Reusable elements in Bubble let you build a component once and use it across multiple pages — perfect for navigation bars, footers, and sidebars. This tutorial covers creating reusable elements, placing them on pages, passing page-specific data using custom properties and custom states, and keeping components synchronized across your app.
Overview: Using Reusable Elements Across Multiple Pages
This tutorial shows you how to build reusable elements — components that you design once and deploy across every page of your Bubble app. You will create a global navigation bar, learn how to pass data from each page into the reusable element, and understand the communication patterns between pages and their reusable children. Essential for any multi-page Bubble app that needs consistent headers, footers, sidebars, or notification bars.
Prerequisites
- A Bubble account with an app containing at least two pages
- Basic familiarity with Bubble's Design tab and element placement
- Understanding of Groups and how they contain other elements
- Knowledge of custom states (helpful but not required)
Step-by-step guide
Create a new reusable element
Create a new reusable element
In the Design tab, click the Pages dropdown at the top-left of the editor. At the bottom of the dropdown, click 'Create a new reusable element'. Name it descriptively — for example, 'RE_Navigation' or 'RE_Footer'. Choose the element type (Group is most common for navigation bars and footers). The reusable element opens in its own editor canvas. Design it just like you would design a Group on a page: add Text elements for links, Button elements for CTAs, an Image element for your logo, and any other components you need.
Pro tip: Prefix all reusable element names with 'RE_' so they are easy to identify in the Pages dropdown and element references.
Expected result: A new reusable element appears in the Pages dropdown, ready to be designed and placed on pages.
Design a global navigation bar as a reusable element
Design a global navigation bar as a reusable element
Inside your RE_Navigation reusable element, set the container layout to Row with center alignment. Add an Image element for your logo on the left (set to fixed width of 120px). Add Text elements for navigation links (Home, Dashboard, Settings, etc.) with the cursor set to pointer. Add a Button for your primary CTA (like 'Upgrade' or 'New Project'). For each navigation Text element, create a workflow: when clicked, Go to page [target page]. Style the navigation with a bottom border, white background, and fixed height (60px). Set the reusable element's width to stretch to fill its parent container.
Expected result: A fully functional navigation bar with logo, links, and CTA that navigates to different pages when links are clicked.
Place the reusable element on every page
Place the reusable element on every page
Go to any page in your app via the Pages dropdown. In the Element Palette (click the + icon), search for your reusable element name (RE_Navigation). Drag it onto the page and position it at the top. Set its width to 100% so it spans the full page width. If you want it to stay visible when the user scrolls, wrap it in a Floating Group pinned to the top of the page. Repeat this on every page where you want the navigation bar. Any changes you make to the reusable element's design will automatically appear on all pages that use it.
Pro tip: Use a Floating Group with 'Float relative to: Top' and check 'This element is visible on page load' and a high z-index so it always appears above page content.
Expected result: The navigation bar appears consistently on every page, and design changes propagate automatically across all instances.
Pass page-specific data using reusable element properties
Pass page-specific data using reusable element properties
Sometimes your reusable element needs to know which page it is on — for example, to highlight the active navigation link. Open the reusable element editor. In the Property Editor on the right, scroll to the Custom Properties section and add a new property called active_page (type: text). On each page where you placed the reusable element, select the instance and set the active_page property to the page name (like 'home', 'dashboard', 'settings'). Inside the reusable element, add conditional formatting on each navigation link: when This ReusableElement's active_page is 'home', change the Home link's font weight to bold and color to your primary color.
Expected result: The navigation bar highlights the correct active page link based on the property value set on each page instance.
Use custom states for bidirectional communication
Use custom states for bidirectional communication
For more complex communication, use custom states on the reusable element. Inside the RE_Navigation editor, create a custom state called show_search (type yes/no, default no). Add a search icon that toggles this state. On the parent page, you can read This RE_Navigation's show_search to conditionally show or hide a search panel. For the reverse direction — page to reusable element — use the Display data action: from the page workflow, use 'Display data in a group' targeting the reusable element instance to send data into it. Or set a custom state on the reusable element from the parent page's workflow.
Expected result: The page and reusable element can communicate in both directions using custom states and the Display data action.
Handle responsive behavior in reusable elements
Handle responsive behavior in reusable elements
Open the reusable element editor and switch to the Responsive tab. Test the element at different widths. For a navigation bar, set up a mobile behavior: at widths below 768px, hide the text navigation links and show a hamburger menu icon instead. When the hamburger is clicked, toggle a custom state that shows a vertical dropdown menu. Use Row layout with wrapping for the navigation links so they stack on smaller screens. Make sure the reusable element has Min width of 0 and Max width of 100% so it adapts to any container width.
Expected result: The reusable navigation bar is responsive, showing full links on desktop and a hamburger menu on mobile.
Complete working example
1REUSABLE ELEMENTS WORKFLOW SUMMARY2===================================34REUSABLE ELEMENTS CREATED:5 RE_Navigation (Group, Row layout)6 - Logo (Image, 120px fixed width)7 - Nav links (Text elements): Home, Dashboard, Settings8 - CTA Button: 'Upgrade'9 - Hamburger Icon (visible on mobile only)10 - Mobile Menu Group (Column, hidden by default)11 Custom Properties:12 active_page (text): identifies current page13 Custom States:14 show_search (yes/no): toggles search panel15 mobile_menu_open (yes/no): toggles mobile menu1617 RE_Footer (Group, Column layout)18 - Company info, links, social icons19 - No custom properties needed (static content)2021PLACEMENT ON PAGES:22 Every page:23 1. Floating Group (top, z-index high)24 → Contains: RE_Navigation25 → Set active_page property to page name26 2. RE_Footer at bottom of page Column2728DATA PASSING PATTERNS:29 Page → Reusable (one-way):30 Method 1: Custom Properties (recommended)31 Set active_page = 'dashboard' on each instance32 Method 2: Display data in a group33 Action targets reusable element instance3435 Reusable → Page (read from page):36 Method: Custom states on reusable element37 Page reads: RE_Navigation's show_search38 Conditional: show search panel when state = yes3940 Bidirectional:41 Method: Custom states + conditional logic42 Reusable sets state → page reads state43 Page workflow sets state on reusable → reusable reads4445WORKFLOWS IN RE_Navigation:46 Nav link clicked → Go to page [target]47 Hamburger clicked → Toggle mobile_menu_open state48 Search icon clicked → Toggle show_search state4950CONDITIONAL FORMATTING:51 Each nav link:52 When active_page = 'home' → bold, primary color53 When active_page = 'dashboard' → bold, primary color54 Mobile menu:55 When mobile_menu_open = yes → visible56 Nav links group:57 When page width < 768 → not visibleCommon mistakes when navigating reusable components across multiple pages in Bubble.io: Step-by-
Why it's a problem: Trying to trigger a parent page workflow from inside a reusable element
How to avoid: Set a custom state on the reusable element and use a 'Do when condition is true' event on the parent page that watches for the state change
Why it's a problem: Not upgrading reusable elements to the new responsive engine separately
How to avoid: Open each reusable element individually and upgrade it to the new responsive engine before expecting responsive behavior to work
Why it's a problem: Deleting a reusable element without removing it from pages first
How to avoid: Before deleting a reusable element, use the Search tool to find all pages that use it and remove the instances first
Best practices
- Prefix reusable element names with 'RE_' for easy identification in the Pages dropdown
- Use Custom Properties (not custom states) for passing simple configuration data from parent to child
- Wrap navigation reusable elements in Floating Groups to keep them visible during scrolling
- Design reusable elements to be responsive independently — test them at all breakpoints
- Use a 'Do when condition is true' event on parent pages to react to reusable element state changes
- Keep reusable elements focused — one for navigation, one for footer, one for sidebar, not one giant element
- Set the reusable element width to 100% and let the parent container control its actual size
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a multi-page Bubble app and want a consistent navigation bar on every page. I need the nav bar to highlight the active page link and include a mobile hamburger menu. Can you help me plan the reusable element structure and data passing?
Help me create a reusable navigation bar with my logo, page links (Home, Dashboard, Settings), and a CTA button. It should highlight the active page and collapse into a hamburger menu on mobile. Then place it on all my pages.
Frequently asked questions
Can I pass data from a page into a reusable element?
Yes. Use Custom Properties on the reusable element — set them on each page instance. You can also use the Display data action from a page workflow to send data to the reusable element.
Can a reusable element trigger a workflow on its parent page?
Not directly. Bubble only supports parent-to-child custom event triggering. The workaround is to set a custom state on the reusable element and use a Do when condition is true event on the parent page to watch for changes.
Do changes to a reusable element update on all pages?
Yes. Any design or workflow changes you make to a reusable element automatically appear on every page that uses it. This is the main benefit — update once, change everywhere.
Can I nest reusable elements inside other reusable elements?
Yes, but with limitations. Nested reusable elements add complexity to data passing and can impact performance. Keep nesting to one level deep when possible.
How do I make a reusable element responsive?
Open the reusable element in its own editor and use the Responsive tab to test at different breakpoints. Set min/max widths and use conditional visibility to hide or show elements based on page width.
Can RapidDev help design a component system for my Bubble app?
Yes. RapidDev can create a complete reusable component library for your Bubble app including navigation, footer, sidebar, card templates, and form components that maintain consistency across all pages.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation