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

Go to Data tab → Data types and create a 'Category' Data Type with fields: name (text), slug (text), parent_category (Category — this creates the self-referencing hierarchy), sort_order (number), page_link (text, the page URL to navigate to), and icon (image, optional). Top-level categories will have an empty parent_category field. Second-level categories will reference a top-level category as their parent. This structure supports unlimited nesting levels.

Go to Data tab → App data → Category. Click 'New entry' and create your top-level categories first (with parent_category left empty): Products (sort_order: 1), Services (sort_order: 2), Resources (sort_order: 3). Then create subcategories with their parent set: under Products, add 'Software' (parent: Products, sort_order: 1), 'Hardware' (parent: Products, sort_order: 2). Under Software, add 'Desktop Apps' (parent: Software, sort_order: 1), 'Mobile Apps' (parent: Software, sort_order: 2).

On your page (or in a reusable NavBar element), add a Repeating Group set to layout type 'Row' (horizontal). Set Type of content to 'Category' and Data source to 'Do a search for Categories' with constraint: parent_category is empty, sorted by sort_order ascending. This shows only top-level items. Inside each cell, add a Text element displaying 'Current cell's Category's name.' Style the Repeating Group as a horizontal bar with appropriate spacing and colors.

Inside each cell of the top-level Repeating Group, add a Group below the category name text. Set this group to not be visible on page load. Add a conditional: 'When This Group is hovered → This element is visible.' Inside this dropdown group, add another Repeating Group (vertical this time) with Type of content 'Category' and Data source: 'Do a search for Categories' where parent_category = Parent group's Category. This shows all children of the hovered item. Style the dropdown with a white background, shadow, and absolute positioning so it overlays the page content.

Inside each cell of the subcategory Repeating Group, add the same pattern: a hidden group that becomes visible on hover, containing a Repeating Group of Categories where parent_category = current subcategory. Position this third-level dropdown to the right of the second-level dropdown (using Align to Parent with top-right). Each item in the third level should have a click workflow: Go to page → the Category's page_link. Apply this click workflow to second-level items as well for categories that are both clickable and have children.

Create a new group visible only on mobile breakpoints. Add a hamburger icon button (three horizontal lines). Add a custom state on the page called 'mobile_menu_open' (yes/no, default no). When the hamburger is clicked, toggle this state. Below the icon, add a full-width group visible only when mobile_menu_open is yes. Inside it, add a Repeating Group of top-level categories. Each cell has the category name plus a chevron icon. Add a custom state 'expanded_category' (Category type) on the page. When a cell is clicked, set expanded_category to Current cell's Category. Below the name, add a nested Repeating Group of subcategories, visible only when expanded_category = Current cell's Category.