Skip to content
Pages, Views, Menus
This stuff is really just for web apps!
Most of it isn’t applicable for Bubble’s new mobile builder, BUUUUUUUUT BUT BUT! This is the absolute BACKBONE of ALL of my apps, so it might still be worth a read.
What this is:
Bubble doesn’t give you dynamic access to the pages and views in your app. But sometimes you want to say, “this thing happened here” or “when a person is on this page, do this.” So in each app I build, one of the first things I do is create a system of option sets that I use for a whole host of things.
First the setup, and then the explanation...
The Setup:
Create three option sets:
“App Locations” option set for your Pages and Big Deal Reusables (usually only Header Bar, Sidebar Menu & Footer). This option set should contain these attributes (plus any other that make sense):
Field Name
Field Type
List
DT/OS
Notes
Actual Page Name
Text
This is what the page is actually called in Bubble (if you change the page name, you need to update this attribute).
Back to Index if Logged Out
Yes/No
(see below)
No results from filter
“Displays” option set for the displays within pages. Attributes should be:
Field Name
Field Type
List
DT/OS
Notes
Parent Location
Option Set
App Location
What page this view is on.
URL Parameter
Text
For use in navigation (i.e., ?display=projects)
Menu Item Active
Option Set
Menu Items
Which menu item should appear as “activated” when the user is on this display.
No results from filter
“Menu Items” option set for all possible menu items in your sidebar or top nav bar. Attributes should be:
Field Name
Field Type
List
DT/OS
Notes
Display for UI
Text
This is the text that actually appears in the menu.
Icon
Image
The icon that appears next to the “Display for UI” text
Go To (Display)
Option Set
Displays
When someone clicks on this menu item, what “display” parameter value should be put in the URL?
Go to (Page)
Option Set
App Location
When someone clicks on this menu item, what page should the user be taken to?
Order
Number
The order in which your menu items will appear.
Show For (User Type)
Option Set
User Type
This menu item will only show up for this user type.
Show when Logged Out
Yes/No
If the user is logged out, should they see this menu item? If no, it’s hidden.
Deprecated
Yes/No
In case you want to do away with a menu item, mark this to yes. Exclude any with a “yes” in this attribute when you build the menu (see below)
No results from filter
The menu item attributes are mostly used in the UI - for determining the search that displays the appropriate menu items. It’s also used for navigation.
Use Cases for this:
How Navigation Works
This entire system is built around a dynamic navigation system that handles everything. It’s a Reusable Element called “Global Nav” with a set of custom workflows in it - one for each page in your app.
The custom workflows have properties for any of the possible bits of data that need to be sent to that page via URL parameters.
This reusable is placed on every page, and in most other reusables. Then, from the page (or other reusable), instead of a “Go to page” action, you...
This system works alongside another reusable called “Global Variables” which reads the URL for the current “Display” and other important bits of data.
This system is BEAUTIFUL in that you never have to remember what url parameters to send to a page. The workflow handles all of it for you, and if you need to make updates, you just make them in that one place instead of all over the app.
A note about this: This system uses URL parameters for navigation, but you could use a similar setup for paths.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.