Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • Examples of reusable elements
  • Why use reusable elements?
  • Reusable element types
  • Creating reusable elements
  • The page menu
  • The element tree
  • Converting existing element(s)
  • Passing data to and from a reusable element
  • Using the data source
  • The Display data action
  • Custom states
  • URL parameters
  • Reusable element properties
  • Adding an existing reusable element to a page
  • Modifying dimensions
  • Other ways to learn

Was this helpful?

  1. User manual
  2. Design
  3. Elements

Reusable Elements

This section covers reusable elements: elements that can be using in multiple places in your app

Last updated 1 year ago

Was this helpful?

Reusable elements are a way to create groups of elements that can be used in more than one place.

For example, if you have created a navigation toolbar, you may want that same toolbar to be visible on multiple pages, and only have to make changes to it once to update all of them.

Reusable elements contain elements, and and each instance of the reusable element behaves in isolation: in other words, what happens in one reusable element has no effect on other copies of the same reusable element, even if they're on the same page.

Examples of reusable elements

Reusable elements can be used for any collection of elements/workflows that you want to re-use across your app. To further illustrate what reusable elements are often used for, let's look at a few examples:

  1. Navigation Bar: This is usually placed at the top of every page and provides links to the main sections of your app.

  2. Footer: Like the navigation bar, a footer is a consistent element placed at the bottom of each page, containing information such as copyright notices, contact details, and additional links.

  3. Login/Signup Form: forms reused across different pages for user authentication.

  4. Search Bar: If your app includes a search function, you may want that feature to be present on multiple pages.

  5. Buttons: Call to action (CTA) buttons like "Sign Up", "Buy Now", or "Learn More" can be standardized and used throughout your application.

  6. Sidebar Menu: a sidebar menu may be present on multiple pages for navigation.

  7. Pop-up Modals: Reusable pop-up windows for things like confirmation messages or user prompts.

  8. Contact Forms: Standardized forms for user inquiries.

  9. Data Cards: Card lists showing stuff like user profiles, eCommerce products and tourist destinations

  10. Error Messages: Standardized error messages can be used across different scenarios and pages.

Why use reusable elements?

There are many reasons as to why you would want to use them:

Speeding up development and maintenance

Any change that you make to a reusable element is instantly visible across all instances of it. Instead of making changes in a lot of different places across your app, you can centralize the management of key features into one element.

Maintaining consistency

By using reusable elements for designs that are used frequently, like forms, pop-ups, and footers, you give your app a consistent look and cut down on the work you have to do to maintain it.

Isolating work in the Bubble editor

If a page has lots of elements and workflows, putting some parts in reusable elements can make it easier to focus. This way, there are fewer things to keep track of on the screen at the same time.

Performance

Reusable elements keep your app lightweight and performant, since its content only needs to be loaded once.

Reusing workflows

Reusable elements can also be used to store workflows that you use in multiple places across your app. In fact, a reusable element doesn't have to contain any visible elements – you can use it to simply .

Reusable element types

Reusable elements can be created as one of the following container types:

  • Group: used to contain other elements

  • Popup: used to contain other elements and hover centered above all other content on the page

  • Floating group: used to contain other elements and hover near an edge of the screen (such as a navigation toolbar)

Each of these types behave in the same way that their container element counterparts do. You can read more about the different types in our article series on containers.

Creating reusable elements

There are multiple ways to create new reusable elements:

The page menu

To create a new blank reusable element:

  1. Open the page navigation menu in the upper left corner of the Bubble editor

  2. Scroll to the Reusable elements section

  3. Click Add a new reusable element

The element tree

You can also create a blank reusable element using the :

  1. Navigate to the Design tab of the Bubble editor

  2. In the element tree, scroll down to the Reusable elements section

  3. Click New reusable

Converting existing element(s)

You can also convert one or more elements on a page into a reusable element:

  • If you select a container element, a new reusable element will be created, containing the child elements inside of the original container

  • If you select one or more elements, a new reusable element will be created containing those elements

  • The original elements on the page will not be deleted or replaced with the newly created reusable element

  • Any workflows associated with the selected elements will be copied into the new reusable element, but may break if they lose access to original references

To convert existing containers or elements into a reusable, do the following:

  1. Select one or more elements on the page

  2. Right-click the mouse on one of the selected elements or click the Edit menu at the top of the screen

  3. Select Convert to a reusable element

A new reusable element will be created and you will be taken to that element in the editor.

Passing data to and from a reusable element

In many cases you'll need to pass data to and from a reusable element. There are a few different ways to do this:

Using the data source

When a reusable element has a Type of content set and it's been placed on the page, you can set a data source for it. For example, if the reusable element has a data type called Product as its type of content, you can set any product in your database as the data source on the page where the reusable element is placed.

This method works one direction: passing data from the parent to the reusable element.

The Display data action

The Display data action can be used to send any kind of data to the reusable element, as long as it matches the Type of content set on that element. For example, if you have a form to edit someone's user profile, you can send the relevant user data to the reusable element using the display data action.

This method works both directions: passing data from the parent to the reusable element or vice versa.

Custom states

You can also pass data from the parent page to a reusable element using the Set state of an element action:

  1. Set up the relevant custom state with the correct data type on the reusable element. The custom state needs to be create on the parent reusable element, not any of its children

  2. Use the Set state of an element action to populate the custom state with data

This method works in both directions: passing data from the parent to the reusable element or vice versa.

URL parameters

do not pass data directly into a reusable element per sé, but since they can be read and manipulated by both the page and any reusable element within that page, they can be a useful way to share information between the two.

This method works in both directions: passing data from the parent to the reusable element or vice versa.

Reusable element properties

Reusable elements also come with customizable properties that can be set up to share dynamic data between it and other elements such as the parent page.

Properties can be populated by a default value assigned on the reusable element itself or from the parent. Any new property that you add will be assigned a field on each instance of that reusable element placed on a page, and they can be individually assigned data.

The data populated in the fields are prioritized in order of 1) data assigned from the parent, and 2) default data, meaning that the data from the parent element takes priority.

Unlike custom states (that require an action to be assigned a value), reusable element properties let you use dynamic data. Unlike the Type of content field that all resuable elements have, you can set up as many different properties as you need, each with individual data types.

Reusable element property types

You set select one of three types for any new property.

  • Dynamic value lets you assign any or that you can then populate using a dynamic expression, such as a database search, an option set or something else. This is useful for passing different types of data dynamically to and from the reusable element.

  • Color picker lets you assign a or a saved . This is useful for dynamically passing a color value to the reusable element. You can then use that color to communicate something to your users, such as a different background, button or text color.

  • Checkbox is a simple way to pass a to or from the reusable.

This method works in both directions: passing data from the parent to the reusable element or vice versa.

Passing data both ways

Let's revisit the point that reusable element properties can pass data not only to a reusable element, but from the element to the parent. This value can then be read by any element on the parent, allowing you to pass dynamic data to other elements on that page without having to use actions.

The fact that you can keep dynamic values updated automatically between a reusable element and its parent opens up for scenarios where you can use the reusable element to store different variables that you use elsewhere on the page and manage from one place.

Adding an existing reusable element to a page

To add an existing reusable element to a page, navigate to the Reusable elements section of the , click the element that you want to add, and then click on the area where you want to add it to a page.

Modifying dimensions

Reusable elements' dimensions are defined when you edit the element itself. However, these elements are responsive (except if you make them fixed width), and if you need to resize them in the destination page you can do so, and the content will adjust as defined with the responsive settings of the inner elements.

Other ways to learn

Video lessons

Article series:

Containers
Converting elements to reusable elements
How to build a responsive navigation bar
Our Academy course includes how to convert groups into reusable elements
The navigation toolbar on www.bubble.io (marked in red) is a typical use case for reusable elements. This toolbar and all its buttons and workflows can be re-used in as many places as you need.
Every reusable element you create will be added to the Reusable element section of the element tree.