Build a multi-page application in Bubble by creating separate pages for each major section, adding a reusable navigation menu, and passing data between pages using URL parameters or the Go to page workflow action. Understand when to use multiple pages versus a single-page layout with groups and custom states to build the right architecture for your app.
Building a Multi-Page Application in Bubble
Most real-world apps need more than one page — a home page, a dashboard, settings, profile, and so on. This tutorial teaches you how to structure a Bubble app with multiple pages, create a shared navigation menu, and pass data between pages so users can move seamlessly through your app. You will also learn when it makes sense to use separate pages versus a single-page approach with group visibility toggling.
Prerequisites
- A Bubble account with an app open in the editor
- Basic understanding of the Bubble Design tab and elements
- Familiarity with Bubble workflows (clicking buttons and triggering actions)
Step-by-step guide
Create your app's pages in the Design tab
Create your app's pages in the Design tab
In the Design tab, click the page dropdown at the top-left (it shows 'index' by default). Click 'Add a new page.' Name it according to its purpose — for example, 'dashboard,' 'settings,' or 'profile.' Repeat for each major section of your app. Keep page names lowercase with no spaces (use hyphens if needed). Every app starts with 'index' (the homepage), '404' (not found page), and 'reset_pw' (password reset).
Pro tip: Plan your page structure before building. Sketch out which pages you need and how users will navigate between them. Fewer pages with clear purposes is better than many small pages.
Expected result: Your app has multiple pages listed in the page dropdown, each named for its purpose.
Build a reusable navigation menu element
Build a reusable navigation menu element
Instead of duplicating a navigation bar on every page, create a reusable element. Click the page dropdown → 'Add a new reusable element' and name it 'NavBar.' Set its type to Group. Design your navigation inside it: add a Row container with Link elements or Buttons for each page (Home, Dashboard, Settings, etc.). For each link, use the 'Go to page' workflow action to navigate. Style the NavBar with your app's colors and fonts.
Expected result: A reusable NavBar element is created with links to all your main pages.
Add the NavBar reusable element to every page
Add the NavBar reusable element to every page
Go to the Design tab on your 'index' page. Click the '+' icon in the Element Palette, search for your 'NavBar' reusable element, and drag it to the top of the page. Set its width to 100% of the page so it spans the full width. Repeat this process on every page in your app — dashboard, settings, profile, etc. Because it is a reusable element, any changes you make to the NavBar will automatically update across all pages.
Pro tip: Use 'Collapse when hidden' on the NavBar if you want to hide it on certain pages (like a login page) without leaving empty space.
Expected result: Every page in your app shows the same navigation bar at the top, linking to all other pages.
Set up page navigation using Go to page workflows
Set up page navigation using Go to page workflows
In the Workflow tab, create a workflow for each navigation link. For example: When Link 'Dashboard' is clicked → Go to page → select 'dashboard.' To highlight the current page in the NavBar, add a conditional on each link: 'When Current Page name is dashboard → Background color is blue (or your highlight color).' This gives users a visual indicator of which page they are on.
Expected result: Clicking navigation links takes users to the correct page, and the current page is visually highlighted in the NavBar.
Pass data between pages using URL parameters
Pass data between pages using URL parameters
When navigating to a page that needs context (such as a product detail page), use the 'Go to page' action with 'Send more parameters to the page' checked. Add a parameter — for example, key = 'product_id' and value = Current cell's Product's unique id. On the destination page, retrieve it with 'Get data from page URL' → parameter name 'product_id' → type 'text.' Use this value as a constraint in a search to load the right data.
Pro tip: For Data Type parameters, you can send the Thing directly in the 'Data to send' field of Go to page, then access it as 'Current Page's Thing.' This is simpler than URL parameters for single-object data.
Expected result: The destination page receives the URL parameter and uses it to display the correct data dynamically.
Decide between multi-page and single-page architecture for each section
Decide between multi-page and single-page architecture for each section
Not every screen needs its own page. For tabbed interfaces within a section (like settings with sub-tabs), use a single page with multiple Groups and custom states to toggle visibility. Set a custom state on the page called 'active_tab' (type text, default 'general'). On each tab Group, add a conditional: 'When Page's active_tab is general → This element is visible.' Tab buttons set the state: Set state of Page → active_tab = 'billing.' Use separate pages for major app sections (home, dashboard, settings) and groups with states for sub-sections within those pages.
Expected result: Your app uses a hybrid architecture with separate pages for major sections and group toggling for sub-sections within each page.
Complete working example
1MULTI-PAGE APPLICATION ARCHITECTURE2=====================================34Pages:5 - index (homepage / landing page)6 - dashboard (main user area after login)7 - settings (user settings with sub-tabs)8 - profile (public user profile)9 - product-detail (dynamic product page)10 - 404 (built-in not found page)11 - reset_pw (built-in password reset)1213Reusable Elements:14 - NavBar (Group, reusable)15 - Row container, 100% width16 - Links: Home, Dashboard, Settings, Profile17 - Conditional highlight: When Current Page name is [page] → highlight style1819Navigation Workflows:20 When Link Home is clicked → Go to page: index21 When Link Dashboard is clicked → Go to page: dashboard22 When Link Settings is clicked → Go to page: settings23 When Link Profile is clicked → Go to page: profile2425Passing Data Between Pages:26 Method 1 — URL Parameters:27 Go to page: product-detail28 Send more parameters: product_id = Current cell's Product's unique id29 Retrieve: Get data from page URL → product_id (text)3031 Method 2 — Data to Send:32 Go to page: product-detail33 Data to send: Current cell's Product34 Retrieve: Current Page Product3536Single-Page Sub-navigation (Settings page):37 Custom State: Page → active_tab (text, default: 'general')38 Group General: visible when active_tab is 'general'39 Group Billing: visible when active_tab is 'billing'40 Group Notifications: visible when active_tab is 'notifications'41 Tab buttons: Set state → active_tab = [tab name]Common mistakes when building a multi-page app in Bubble
Why it's a problem: Creating too many pages instead of using group visibility toggling
How to avoid: Use separate pages only for major app sections. Within each section, use groups with custom states for sub-navigation.
Why it's a problem: Forgetting to add the NavBar reusable element to new pages
How to avoid: Make it a habit to add the NavBar to every new page immediately after creating it.
Why it's a problem: Not protecting pages that require authentication
How to avoid: Add a 'Page is loaded' workflow on protected pages with the condition: 'When Current User is logged out → Go to page: index.'
Best practices
- Use lowercase page names with hyphens instead of spaces for clean URLs
- Build navigation as a reusable element so changes propagate to all pages automatically
- Pass data between pages using 'Data to send' for simple cases or URL parameters for shareable links
- Add authentication checks on every protected page using 'Page is loaded' workflows
- Use group visibility with custom states for sub-tabs within a page to avoid unnecessary page loads
- Keep your page count manageable — most apps need 5-15 pages, not dozens
- Add visual indicators in the NavBar to show which page the user is currently on
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a Bubble.io app that needs multiple pages: a homepage, dashboard, settings, and profile page. How do I create these pages, build a shared navigation menu as a reusable element, pass data between pages using URL parameters, and decide when to use separate pages vs group visibility toggling?
Create a multi-page app structure with pages for home, dashboard, settings, and profile. Build a reusable NavBar with links to each page and highlight the current page. Add a 'Page is loaded' redirect on dashboard and settings to send logged-out users back to the home page.
Frequently asked questions
How many pages can a Bubble app have?
Bubble does not impose a hard limit on page count. However, more pages mean more to maintain. Most well-structured apps have 5-15 pages with group toggling for sub-sections within each page.
Can I pass data between pages without showing it in the URL?
Yes. Use the 'Data to send' option in the 'Go to page' action. This passes a database Thing to the destination page without exposing its ID in the URL bar.
How do I make a page the default landing page?
The 'index' page is always the default homepage in Bubble. You cannot change this — if you want a different landing page, design your desired content on the index page.
Should I use single-page or multi-page architecture for my app?
Use multi-page for distinct app sections (login, dashboard, settings) and single-page with group toggling for sub-tabs within a section. This hybrid approach gives you the best balance of performance and organization.
How do I redirect users from one page to another?
Use the 'Go to page' workflow action. For automatic redirects (such as after login), trigger this in a workflow action. For auth guards, use a 'Page is loaded' event with the condition 'Current User is logged out.'
Can I get help structuring a complex multi-page Bubble app?
Yes. RapidDev helps founders plan and build multi-page Bubble applications with clean architecture, reusable components, and proper data flow between pages.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation