A reusable navigation bar in Bubble ensures consistent navigation across all pages while highlighting the currently active page. This tutorial covers creating a reusable header element with navigation links, highlighting the active page using URL detection or custom properties, passing page context to the reusable component, and maintaining consistent navigation as you add new pages to your app.
Overview: Navigation with Reusable Components
This tutorial shows you how to build a navigation bar as a reusable element that appears on every page with the current page highlighted, ensuring consistent user experience throughout your app.
Prerequisites
- A Bubble app with multiple pages
- Basic understanding of reusable elements
- Familiarity with conditional formatting in Bubble
- Understanding of Bubble's page navigation actions
Step-by-step guide
Create the reusable navigation element
Create the reusable navigation element
In the Design tab, go to the Reusable elements section (click the dropdown next to the page name and select Reusable elements). Create a new reusable element called 'NavBar'. Set it to Row layout with full width. Add your navigation elements inside: a logo Image on the left, Text/Button elements for each page link (Home, Dashboard, Settings, etc.) in the center, and user avatar/name on the right. Style it with a fixed height (60px), background color, and shadow.
Expected result: A reusable NavBar element contains all navigation links and branding.
Add the NavBar to all pages
Add the NavBar to all pages
On each page in your app, drag the NavBar reusable element from the element palette. Place it at the top of the page. Set it to full width with a fixed position at the top so it stays visible when scrolling. Adjust the page content below to account for the NavBar height by adding top padding or margin equal to the NavBar height. Now any changes to the NavBar reusable element automatically propagate to every page.
Expected result: The NavBar appears consistently at the top of every page in your app.
Highlight the active page in navigation
Highlight the active page in navigation
Inside the NavBar reusable element, you need to know which page is currently active. Use Bubble's 'Current page name' data source (available in dynamic expressions). For each navigation link, add a conditional: When Current page name is 'index' → this element's font weight is bold and color is your accent color. Repeat for each page link with the corresponding page name. Alternatively, add an underline or bottom border on the active link. This approach requires no data passing — the reusable element detects the current page automatically.
Pro tip: Use Current page name rather than URL parsing since it is more reliable and works in both development and production environments.
Expected result: The navigation link for the current page is visually highlighted with bold text or accent color.
Add navigation workflows
Add navigation workflows
For each navigation link in the NavBar, add a workflow: When this text/button is clicked → Navigation → Go to page → [target page]. For links that should only appear when logged in (Dashboard, Settings), add a conditional: This element is visible when Current User is logged in. For admin-only links, add: visible when Current User's role is 'admin'. Keep the NavBar simple with 4-6 primary links. Add a mobile hamburger menu that toggles a dropdown of links on smaller screens.
Expected result: Clicking navigation links takes users to the correct pages with proper visibility based on authentication and role.
Handle mobile responsive navigation
Handle mobile responsive navigation
On mobile breakpoints, the horizontal NavBar may not fit all links. Add a hamburger menu icon (three horizontal lines) that is visible only on mobile breakpoints. Create a dropdown Group below the NavBar that is hidden by default. When the hamburger icon is clicked, toggle the dropdown visibility using a custom state 'menu_open' (yes/no). Inside the dropdown, display navigation links stacked vertically. When a link is clicked, hide the dropdown and navigate. Close the dropdown when clicking outside it.
Expected result: On mobile devices, navigation collapses into a hamburger menu with a dropdown for all links.
Complete working example
1REUSABLE NAVIGATION SUMMARY2=====================================34REUSABLE ELEMENT: NavBar5 Layout: Row, full width, fixed 60px height6 Left: Logo Image7 Center: Nav links (Text elements)8 Right: User avatar + name9 Style: background, shadow, fixed position1011ACTIVE PAGE HIGHLIGHT:12 Conditional on each nav link:13 When Current page name is '[page]'14 → Bold, accent color, underline15 No data passing needed — auto-detects1617NAVIGATION WORKFLOWS:18 Click nav link → Go to page [target]19 Auth visibility:20 Dashboard, Settings → logged in only21 Admin links → role = admin only2223MOBILE RESPONSIVE:24 Desktop: horizontal link row25 Mobile: hamburger icon26 Custom state: menu_open (yes/no)27 Click hamburger → toggle dropdown28 Dropdown: vertical link list29 Click link → navigate + close dropdown3031PLACEMENT:32 Add NavBar to every page33 Fixed position at top34 Page content: top padding = NavBar heightCommon mistakes when navigating Pages with Reusable Components in Bubble
Why it's a problem: Hardcoding page names in navigation instead of using a reusable element
How to avoid: Use a single reusable NavBar element placed on all pages so updates propagate automatically
Why it's a problem: Not accounting for NavBar height in page content
How to avoid: Add top padding or margin to the page content equal to the NavBar's height (typically 60px)
Why it's a problem: Using URL parsing instead of Current page name for active detection
How to avoid: Use Bubble's built-in Current page name data source which works consistently across environments
Best practices
- Use a reusable element for navigation to ensure consistency
- Highlight the active page using Current page name detection
- Limit primary navigation to 4-6 links for clarity
- Implement a hamburger menu for mobile breakpoints
- Control link visibility based on authentication and user roles
- Use fixed positioning so navigation stays visible while scrolling
- Test navigation on both desktop and mobile layouts
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a reusable navigation bar in Bubble.io that highlights the current page and works across all pages. How do I detect and highlight the active page?
Help me create a reusable navigation header with logo, page links with active highlighting, user avatar, and a mobile hamburger menu that collapses on small screens.
Frequently asked questions
Can I have different navigation for different page types?
Yes. Create multiple reusable NavBar elements (main NavBar, admin NavBar, landing NavBar) and use the appropriate one on each page.
How do I add a dropdown submenu to a navigation link?
Add a Group below the nav link that is hidden by default. Show it on hover or click. Place submenu links inside this Group.
Does fixing the NavBar position affect SEO?
No. Fixed positioning is a CSS display property that does not affect how search engines read your page content.
Can I animate the mobile menu opening?
Yes. Use Bubble's Animate element action to slide the dropdown in, or use CSS transitions on the Group's height/opacity properties.
Should I use buttons or text elements for nav links?
Either works. Text elements are lighter weight. Buttons provide built-in hover states. Choose based on your styling needs.
Can RapidDev help design app navigation?
Yes. RapidDev can design and implement professional navigation systems in Bubble including responsive menus, mega-menus, and role-based navigation.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation