Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s the more familiar choice. URL parameters are just as fast and offer several interesting extra features.

This article will compare the two methods, and how to pick the right one in a given scenario.

What they have in common

Let’s first look at what the two have in common. Both…

  • … allow you to instantly hide and show elements on the page based on Conditions
  • … are performed client-side and don’t rely on the database or any server actions
  • … can be used in any Conditional expression, including to trigger workflows

On the surface, they are similar, but they are different in the way that they behave in the browser.

What are URL parameters?

URL parameters, while sounding techie, are easy to set up and if you haven’t used them, you’ll find them an incredibly valuable tool in your Bubble toolbox.

In essence, all they do is add some sort of information – usually a string of text – to the URL in your browser. The page URL and its parameters are separated by the ? sign, and additional parameters with the & sign. We talk about URL parameters using a few simple terms:

Query strings are the collection of all the parameters you have in your URL. Whether you have one or more parameters stored, the are collectively called a query string.

The URL parameter consists of a key and a value. The key is the string that Bubble uses to find the right parameter, and the value is the data you’ve stored. Here’s a quick example:

URL bar showing a URL with parameters.

In the example above, we have a domain called myapp and a page called page. You’ll see the query strings after the ampersand. This is a typical navigation set up, with three keys each containing a unique value. Note that the final value references the unique ID of a Bubble Thing.

In this way, a URL parameters not doing anything differently from a state. You’re simply saving a variable to reference from somewhere else. Also like states, URL parameters are not private – they’re visible to anyone right there in your browsers URL bar, and should never be used to store sensitive information.

How URL parameters are different from states

The main difference between the two is that a state is 100% reliant on you as a developer to set: it either has to be set through an action, or have a pre-defined value on page load.

Since Users can manipulate the text in the URL bar, they can add or change parameters as they please. This gives you several opportunities that states can’t offer, and a few pitfalls.

Let’s look at a few scenarios where this can be useful:

Using the back button

One of the more obvious uses of using URL parameters for navigation is the fact that they’re recognized by the browser as navigating to a new page, even if the page doesn’t need to reload. In other words, your users can use the browsers back button navigate back to where they were before the change. This is especially useful for mobile apps, where your users will naturally expect the back button to work.

Bookmarking specific parts of your app

If a URL parameter can take you directly into the right part of your app and load the correct database Thing without any navigation, your users will naturally start navigating directly to that URL (either by bookmarking it, or simply by the browser suggesting his most visited URLs). As an example, let’s say you’re building a project management tool. If your users keep navigating to the same project over and over again, their browser will start suggesting that URL or the user will bookmark it to save time.

Copy/paste a link to a specific part of your app

Similarly to the point above, the trend of the day is that users increasingly share information between different web apps. An important detail in that trend is the copying/pasting of links that lead directly into a specific part of your app. If we again use the project management tool as an example, your users may want to copy/paste links directly to specific projects, tasks and even user comments.

Sharing info between reusable elements

Unlike states, URL parameters are available from anywhere in your app. In other words, you can use them to pass information between reusable elements instantly. That would otherwise require a complex system of custom states updating each other or having to resort to the database.

Pitfalls of using URL parameters

There are a few pitfalls to think about before setting up all of your navigation as URL parameters.

When you want to limit access

You don’t always want your users to be able to navigate by changing the URL. Typical examples are to skip steps in an on-boarding process or access a restricted part of the app. Use actions to redirect them or conditions to hide groups based on other criteria. But be aware that a small percentage of users do try to manipulate URL parameters, posing a security risk.

When you don’t want the back button to work

You don’t always want to allow your users to go back from where they came from. If a user signs in to your app and then clicks back, taking them back to that form is probably not what you want. By using Custom States or hiding/showing Groups with an action, the user can’t go back.


Are custom states faster than URL parameters for navigating?

No, both options are instant, and there’s no performance gain to be had from choosing one over the other.

Are custom states more secure than URL parameters?

Both options require you to set up different security measures to avoid misuse and accidentally revealing information or parts of your app unintentionally. While URL parameters will show any information visibly in the URL bar, from a technical standpoint, one is not really any more secure than the other.

Can a URL parameter be manipulated by a user in Bubble?

Yes, URL parameters can be manipulated by any user in any app (not just Bubble), since it’s accessible right in the URL bar of their browser.


More Posts

How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to do complex calculations in Bubble

The Bubble expression editor – you know… this one: … is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like

How to run Javascript from an action in Bubble

Javascript is a pretty easy programming language and can greatly extend Bubble’s features, like copying text to the clipboard. If you’re not fluent in computerese, make sure to visit the Bubble forum, where you’ll always find someone happy to help

Leave A Reply

Your email address will not be published. Required fields are marked *


Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This