How to Build Smarter Menus in Bubble Using Option Sets (No More Headaches) – ratio.dev

Are you sick and tired of struggling to organize your menus and dashboards in bubble? In this video, I'm going to magically banish these frustrations for good, thanks to the secret option set tactic I'm going to share with you. But first, if you're eager to up your bubble game, I definitely recommend that you go to the link in the description and you get free access to our no Code Resource Center. It's full of vetted plugins, how to videos, podcast episodes, great books to read, a whole bunch of really good stuff that will keep you on your toes with bubble, and it's absolutely free, so check it out. I don't know about you, but for me it is a real pain to maintain separate desktop and mobile menus for your pages to keep track, reorder and add new tabs to your dashboards in general, not waste time on repetitive maintenance tasks related to your menus. I used to have the same frustrations until I started leveraging option sets to maintain my menus. Why? They're faster than using database tables and they're way easier to maintain than just hard coding it into your pages.

Let's jump in and see a working example. This is a quiz building dashboard page. You can see there is a set of options over here on the left. You could click them and it changes the tabs in the middle. There's another separate dropdown for mobile on this same page when you're using a cell phone. And here's the big secret that bubble developers miss. When you use option sets for your menu structure, you only need to change your data in one place and automatically updates everywhere in your application. So let's go in now to the bubble editor and see how we've set this up. And here we have an option set called Quiz Admin Menu. Okay? And it has a set of attributes for each option in the option set. So there is an icon which is an image when it is selected. There's an icon when it's not selected because usually the color varies on those two icons. There's an order number for in the menu and there's a tab number which tells it what tab to show when it is clicked on. And now below we have the different options. So quizzes, questions, structure, scoring, groups, participants, and results. These are the same tabs that you saw when I was showing you the page. And we can go into any one of these for example, and look at the attributes. So in this case I'm not using icons. So there's no icons in here. The order number is 20. I like to do it by tens, but you can put whatever numbering in there you want. And the tab number is tab number one. And so if I wanted to change the order, I could just make this a five. And now quizzes would be ahead of questions instantly. Nothing else needed to do. So that's the power of setting them up like this.

Here we are in the design of the page. We have the menu on the left. This is the menu for mobile. Let's just look at this one here. And here what you can see is this is a repeating group of that option set and I have sorted it by menu order. So that makes it go in the right order. Don't have to worry about dragging them in the option set, anything like that. The background color is what we're changing here based on if it's selected or not. This is using if current Cell's tab number is the same as the dashboard's current tab, then it's going to change the background color.

In the text field Here we are actually pulling in the display for that option. So parent groups that options display, which is the text that shows up here. And then I also have a conditional here where I change the color of that display if it's selected. And that allows me to control all of those tabs without having to hard code anything into my page.

You can also use this in your header menus. Be sure to use link elements for SEO. Don't use workflow actions that go to pages, make them link elements. If you have links to in your header to external pages, then you'll need to contemplate that in your options head. Have another attribute for the external URL. You may want to put a yes no if it's internal or external. So that makes it easy for you to decide in your workflow what to do when they click on that option. Another benefit of this is that when you need to add a new menu item, you don't have to touch your page design at all. Just add the new option to your option set and boom, it appears right there in the menu. So that's really cool. If you want to reorder them, you just change those order values. If you want to change the icon, just change it in that one place and it shows up correctly in all the other places. This approach is especially powerful for complex applications with multiple navigation systems. Remember, sign up for the no Code Resource center in the link below. It's full of really great information. You'll really like it. We update it weekly, so there's always new stuff coming in, so definitely grab that. Hope you've enjoyed this video. See you in the next one.