Free Bubble tutorial: how to set up reusable elements (step-by-step)
Last updated
September 8, 2023
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
In this free tutorial, you're going to learn how to set up reusable elements in Bubble, such as a nav bar, which can be deployed on every page of your app
Start by opening the Bubble designer where a basic page template has been set up.
This template uses components provided by Bubble, including an existing nav bar.
Creating a Reusable Element
Transform the existing nav bar into a reusable element by:
Clicking 'Add a New Reusable Element' on the home page.
Naming it 'Navbar Example'.
Clicking 'Create' without cloning from another source.
Transferring the Existing Nav Bar to the Reusable Element
Copy the current 'Group Header Standard' from the original 'home page'.
Paste it into the new 'Navbar Example' reusable element.
Customizing the Reusable Element
Inside the 'Navbar Example' reusable element:
Adjust the layout to a row.
Set the width for the UI Builder to a thousand.
Extend the UI Builder length to 1500 for alignment purposes.
Ensure the 'Min height' is zero.
Implementing the Reusable Element in Your App
Return to the 'home page' and delete the original nav bar.
Drag in the 'Navbar Example' from the reusable elements section to replace it.
You can modify the horizontal alignment or width, but it's recommended to keep the fixed width unchecked for responsive design.
Making Changes to the Reusable Element
Modifications to the nav bar, such as deleting links, should be done in the reusable element page.
Once changes are saved, they will automatically apply to every page where the nav bar is used in your app.
Conclusion
We hope this tutorial has demonstrated the efficiency and versatility of using reusable elements in your Bubble app. For further information about Bubble building and reusable elements, click here to access our premium course.