Picture of a person choosing an icon on a virtual screen. Rapid Developers
/Bubble Development Agency

How to create a multi-level menu in Bubble.io: Step-by-Step Guide

Master multi-level menu creation in Bubble.io with ease! Follow our step-by-step guide to enhance your app's navigation and user experience.

Explore more
A person working at the laptop. Rapid Developers

Hire an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Explore more

How to create a multi-level menu in Bubble.io?

Creating a multi-level menu in Bubble.io requires a structured approach to organize your data types and option sets to define menu items, as well as designing the user interface that responds dynamically to user interaction. Here's a step-by-step guide on how to achieve this:

Step 1: Define Your Data Structure

  • Begin by determining your menu categories and items. To create a multi-level menu, you may need a data structure that supports hierarchical relationships.
  • Consider creating a data type called 'Menu Category' with fields such as 'Name', 'Parent Category' (which refers to another 'Menu Category' if it is a subcategory), and 'List of Menu Items'.
  • Create another data type called 'Menu Item' with relevant fields such as 'Name', 'Link', 'Parent Category', and any other details like 'Icon'.

Step 2: Create Option Sets (If Needed)

  • If your menu will have static items, you can also use option sets to define them. Create an option set for each level of your menu (e.g., 'Top Level Menu', 'Submenu').
  • Add attributes such as 'DisplayName' and 'URL' to each option to represent the menu items' name and where they should link to.

Step 3: Build the Menu in the Bubble.io Editor

  • Go to the Bubble.io editor and insert a 'Repeating Group' element for the top-level menu. Set the data source to 'Do a search for Menu Categories' where 'Parent Category is empty' to fetch only top-level categories.
  • Inside the repeating group cells, add text elements to display the category names. You can also add icons or images to enhance the visual appeal.

Step 4: Add Submenus

  • For each top-level menu item that has subcategories or items, add another repeating group within the cell. This repeating group should be set to 'Do a search for Menu Categories' where 'Parent Category is Current cell's category' to fetch the subcategories.
  • Use conditionals or workflows to show or hide the submenus when a user hovers or clicks on a top-level menu item.

Step 5: Dynamic Show/Hide Logic

  • To create a more interactive menu, use custom states and workflows to control the display of submenus.
  • Assign a custom state, such as 'SelectedMenu', to the main Repeating Group or the page itself. Use this state to track which menu item is selected or hovered.
  • Create workflows to 'Set state' when a user hovers or clicks on a menu item, and trigger the visibility of corresponding submenus based on this state.

Step 6: Style the Menu

  • Use Bubble.io's visual styling options to style your menu and submenu elements. Set different background colors, hover effects, borders, and padding to make them visually distinct and user-friendly.

Step 7: Testing

  • Once you've set up your multi-level menu, preview your application and test the usability of the menu. Ensure the submenus are populating correctly and that the hide/show logic is performing as expected.

Step 8: Responsiveness

  • Now, make sure your multi-level menu is responsive. Adjust the layout and design for different screen sizes using Bubble.io's responsive settings. Ensure that submenus are still accessible and the design remains consistent on mobile devices.

Keep iterating on your design and structure based on user feedback and usability testing. Remember that a well-organized and intuitive navigation menu can significantly enhance the user experience on your Bubble.io application.

Want to Enhance Your Business with Bubble?

Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.

Book a free consultation