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

Watch the video and read on to learn more.

For in-depth learning on building in Bubble, access our comprehensive Bubble course here.
‍

Getting Started in Bubble Designer

• 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.

‍