How to: Create a Menu using Option Sets

Why use Option Sets for menus?

There are several reasons for why you should create a menu using Option Sets. App performance is one of them: building a menu structure in a Repeating Group instead of in separate regular Groups is a lighter way to build, and using Option Sets instead of the database reduces the loading time and allows the data to be fetched from Cloudflare‘s CDN instead of Bubble’s servers.

The method in this tutorial also gives you a an easy “menu editor” on your Option Sets that let you easily add and reorder new menu options as needed. We’ll be referencing the Option Sets both in the menu, our URL parameters and on the Groups we want to show and hide, helping with app consistency. If we ever want to make changes to our menu options, the changes will instantly be available app-wide.

This tutorial requires some experience building with Bubble, and we’ll assume you know your way around the design editor and Bubble’s different group types.

In the example below, we’re setting up a structure for a potential blogging platform, and we’re setting it up as a Single Page Application, meaning that your Users will stay on the same page as they navigate. Let’s get into it:

Create a menu using Option Sets

The first thing we’ll do is to add the Option Sets that we need. We’re going to create two of them – one for the main navigation and one for sub navigation. Create the two, one called Navigation: Main and one called Navigation: Sub. Add the following fields:

The Main Menu

The main menu will contain our main navigation options.

FieldTypePurpose
DisplayText (built-in)We’ll use this to store the URL parameter used for navigation
LabelTextThis is the text we’ll be showing in the menu
Sub-OptionsNavigation: Sub (list)This is the sub-options we’ll be showing under this option

The Sub Menu

The purpose of the sub menu is to contain an additional level of options in our menu structure, like Users -> Admins. Set up the Option Set fields like this:

FieldTypePurpose
DisplayText (built-in)We’ll use this to store the URL parameter used for navigation
LabelTextThis is the text we’ll be showing in the menu
ParentNavigation: MainThis is the Parent option from the previous step

Adding your menu options

With the option sets set up, let’s add some data to it. For our example here, we’re going to add a few main options, and some sub options:

Main OptionSub Option
users
users
admins
content
articles
categories
settings
languages
settings

With that structure, your main menu option set should look like this:

Create a menu using Option Sets with Bubble's editor

Opening up the users main option should look like the image below:

Option set attribute editor

Designing the menu

Next, we need to add the menu to the app. In this example, we’ll use a Floating Menu attached to the left side of the screen to create a sidebar. We always follow a grid of 25 pixels, so we’ll make that floating menu 200 pixels wide for now.

Setting up the groups

Next, do the following:

  1. Create a Repeating Group with a height of 100 pixels. This will contain both our main options and sub options.
    Type of content: Navigation: Main
    Data Source: All Navigation: Main
  2. Create a regular Group inside of that Repeating Group at 50 pixels, and with a height of 50 pixels. This purpose of this group is to let us show and hide the sub options.
    Type of Content: Navigation: Main
    Data source: Current Cell’s Navigation: Main
  3. Inside of the regular Group, create a second Repeating Group with a height of 50 pixels to display our list of sub options.
    Type of Content: Navigation: Sub
    Data Source: Current Cell’s Navigation Main’s Sub Options

Looking at your two repeating groups, they should look like this:

Adding the label text

We have a separate step for this part for a reason. One of our performance best practices is to avoid adding any more elements to your page than are needed, as it will bloat your app. In most cases, menu options are built as text elements inside of a bigger group element in order to make it a bigger clickable area. To reduce the number of elements (remember, they’re multiplying for each cell in your repeating group too!), we’re going to set up the text label to be bigger, and instead use styling to space it correctly.

Add a text element inside each of the Repeating Groups from the last step, and set that text to be 50 pixels high. This should make it cover its entire existing cell, to make that cell clickable. If you have a font size of 14, change your padding settings to the following to adjust the placement:

Setting text padding in Bubble

Set the text content to Current Cell’s Navigation: Main’s Label and repeat the step for the sub option, but set the Horizontal padding to 50 to indicate that it’s a sub option.

With that set up, let’s preview our app. You’ll now have a menu that looks something like this:

Menu tree structure example
By sticking with a 25×25 pixel grid, our menu is already nicely spaced.

Setting up the navigation workflows

Now our menu still doesn’t do much except look nice and tidy. So let’s set up some workflows to actually help us navigate the app. For navigation, we always use URL parameters, as this allows your users to use the back button as they move around in your app and be taken back to where they just were rather than reloading the previous page. URL Parameters in Bubble are manipulated using the Go to page action, so that’s what we’ll use.

Navigation: Main

For our Main menu options, we’ll set up our action to automatically take us to the first available menu option within that option if clicked. Select the Label text in the Navigation: Main option and click Add/Edit workflow.

Set up the go to page as illustrated below. We usually name the URL parameters t (for tab) and s (for subtab), but you can give them whichever name you want.

The go to page action with two different URL parameters

Testing that action in your app should produce the following result in your browsers URL bar:

Navigation: Sub

For the sub menu text, we’re going to do almost exactly the same thing, but with some key changes:

The go to page action with slightly different URL parameters
Notice that we’re switching the roles of the t and s parameters since we’re now working on the sub option.

Setting up the conditions

Now, let’s set up the conditions to reflect the changes in navigation on the page. This part involves to steps:

  • Showing/hiding the sub options in the sidebar menu as needed
  • Showing the page content that we’re navigating too

Menu option

The behavior we’re looking for is for the sub option menu to be visible if its parent is currently active. The way we can tell this is by referencing the s parameter in our URL. Select the Group that contains the Repeating Group with the sub options in it.

Bubble condition hiding and showing a group based on URL parameter
Bubble recognizes Option Sets by their Display value, allowing us to reference it directly, even from the URL bar

Don’t forget to change the Group’s settings as well:

Bubble element property editor for Group Element

Using this same condition allows you to place any kind of styling you want on your currently selected menu options, and will also make sure the correct option is open if the page is reloaded with URL parameters intact.

Page content

Now for the final part, let’s add the Group that we want to display content in accordance with the selected menu option. In this case we need to reference the s parameter instead. I’ve set a red background color to the content group to show it clearly, and notice the key changes in the condition:

Adding a condition to a group to show and hide it on the page
This time we’ll reference the s parameter.

This is where we start seeing the strength in using Option Sets for navigation, since we can now reference the users value directly in our condition. We’re passing the same option from the menu, through the URL and to the final group we want to show: should we want to change the URL parameter, it will automatically update everywhere.

Dropdown menu showing that option sets can be referenced directly.
We can pick the users option from a dynamic list and reference it directly with no risk of misspelling or conflict with future changes.

Conclusion

In just a few minutes, we’ve built a performance-friendly and dynamic menu that can easily be updated with new options and sub-options without touching the page design. Using Option Sets opens up for other creative uses as well, such as hiding and showing menu options based on the Current User’s admin privileges and redirecting them away from content they shouldn’t be able to access.

If you have questions or comments, let us know in the comment section below!

Share:

More Posts

Understanding Bubble Groups

Bubble has five different group types. While they’re all used as containers, their use differs greatly. This article explains the difference between them in detail.

Bubble’s new expressions: SPLIT BY and ARBITRARY TEXT explained

Bubble quietly launched two new features in July 2021 that are quite useful: split by and arbitrary text. They’re both expressions that solve tiny problems that otherwise would require cumbersome workarounds, and are absolutely worth checking out. You’re not gonna

Combining icons and text in Bubble

Placing icons inside of your text elements by using BBCode is a quick way to reduce the total number of elements on your page and make sure your app runs smoothly. Read on for how to do it.

Leave A Reply

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

*