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
  • Undo
  • Redo
  • Edit
  • Edit reusable
  • Edit page
  • Delete
  • Replace by another type
  • Convert to a reusable element
  • Detach reusable element
  • Group elements in a Group
  • Ungroup these elements
  • Add a new page...
  • Clone this Page
  • Make this page the new index
  • Add a new reusable element...
  • Clone this reusable element
  • Backend workflows
  • Cut
  • Copy
  • Paste
  • Duplicate
  • Select all
  • Select first parent
  • Copy with workflows
  • Paste with workflows
  • Copy formatting
  • Paste formatting
  • Copy style
  • Paste style
  • Copy layout settings
  • Paste layout settings
  • Copy conditional expressions
  • Paste conditional expressions
  • Copy condition
  • Paste condition
  • Copy expression
  • Paste expression
  • Clear expression
  • Paste before
  • Paste after
  • Copy to another app
  • Clear all
  • Bring to front
  • Send to back
  • Collapse all children
  • Expand all children
  • Show all children
  • Hide all children
  • Delete all children
  • Center horizontally
  • Center vertically
  • Align left
  • Align horizontal centers
  • Align right
  • Align top
  • Align vertical centers
  • Align bottom
  • Distribute horizontally
  • Distribute vertically
  • Swap element positions
  • Reveal in Elements tree
  • Start/Edit workflow
  • Insert an action
  • Reveal the element
  • Reveal the action
  • Show short videos
  • Always show all properties
  • Show recent feature release
  • Shortcut list
  • Academy
  • Forum
  • Report a bug
  • Show grid
  • Snap element to edges
  • Snap elements to grid
  • Snap to edges and grid
  • Do not snap elements
  • Show element borders
  • Cut column
  • Copy column
  • Copy column with workflows
  • Cut row
  • Copy row
  • Copy row with workflows
  • Paste column to right
  • Paste column to left
  • Paste row above
  • Paste row below
  • Paste column with workflows to left
  • Paste column with workflows to right
  • Paste row with workflows above
  • Paste row with workflows below
  • Select all cells
  • Add column to left
  • Add column to right
  • Add row above
  • Add row below
  • Copy cell content
  • Copy cell content with workflows

Was this helpful?

  1. Core Reference
  2. Bubble's Interface

Top and context menu options

Last updated 1 year ago

Was this helpful?

This core reference entry is suited for beginner-level builders.

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Bubble editor

This article series covers the interface of the Bubble editor.

  • Article series:

Video lesson:

This reference entry lists all the different options available in the top menus and context menu. The available options in these can vary depending on where you are in the editor and what you have selected.

To find the option you are looking for we recommend using the Docs search tool or using Bubble's in-editor documentation links.

Undo

Undo the last change.

Redo

Redo an undo change.

Edit

Edits the current selection, e.g., element, action, event.

Edit reusable

Navigates the design editor to edit the currently selected reusable element.

Edit page

Edits the current page.

Delete

Deletes the current selection, e.g., element, action, event, style.

Replace by another type

This action replaces an element/action/event by another element/action/event of a different type. For example, change an element from a checkbox to a toggle or from a group to a popup.

Note: This operation may lead to inconsistencies if the data type changes and a different input is needed. Review the Issue checker to ensure no issues were introduced. Undo this change, if necessary.

Convert to a reusable element

This option takes a group of elements and converts them into a reusable element.

Detach reusable element

This option takes a reusable element and converts them to a group that contains the same elements and workflows as the original reusable element.

Limitations for repeating groups

The Detach reusable element function comes with a few limitations:

  • Once a reusable element that contains a workflow event is detached from a repeating group cell, the workflow belongs to the page and cannot reference a specific cell's data. This limitation applies specifically to workflow events that are not attached to an element, such as "Do every 5 seconds" as opposed to "When button is clicked," in a reusable element within a repeating group cell.

  • Once a reusable element containing a popup, group focus, or floating group is detached within a repeating group cell, any data that is inherited from the repeating group cell will not be automatically passed to the detached container since they are now a part of the page. A workflow will need to be set up specifically to send the data to the detached group.

  • If a reusable element within a repeating group cell contains a group focus, and the group focus references an element within the reusable element, detaching the reusable element will result in the group focus being unable to reference the element within the repeating group cell, since the container is now a part of the page.

  • If a reusable element inside a repeating group cell that includes an element linked to an action to display a group focus is detached, the action will lose its reference to the group focus and no longer be able to display it.

Group elements in a Group

This option takes the selected elements and creates a new group. You can choose with container layout type you'd like to group the elements in. The options are as follows:

Ungroup these elements

This option moves the elements outside of the group that contains them, leaving the elements in the same position. This does not delete the group container, so delete it if no longer needed.

Add a new page...

Creates a new page from a blank template or by cloning an existing page.

Clone this Page

Creates a new page with the same elements/actions/events as the original page.

Make this page the new index

This function replaces the app's existing index and uses the current page as the new index. An index page cannot be deleted, so use this option to replace it. The previous page will be renamed old_index.

Add a new reusable element...

Creates a new reusable element. Choose an existing element or clone a reusable element.

Clone this reusable element

Creates a new reusable element with the current element's properties.

Backend workflows

This page is for editing the different backend workflows used in the app - the common characteristic of all backend workflows is that they run on the server, i.e. they are not tied to a specific page of the app. There are three types of backend workflows you can define:

Cut

Cuts the current selection, e.g., element, action, event, style.

Copy

Copies the current selection, e.g., element, action, event, style.

Paste

Pastes the current clipboard onto the current page. If the pasted element came from a different page or a different app, relative references to elements on the initial page will be removed.

Duplicate

Copies the current selection and pastes it onto the current page.

Select all

Selects all the elements on the page.

Select first parent

Selections the immediate parent of the selected element. This is convenient when an element is contained by a group with the same dimensions.

Copy with workflows

Copies the selected elements and the associated workflows.

Paste with workflows

Pastes the elements and the associated workflows from the clipboard. If the pasted element came from a different page or app, relative references to elements on the initial page will be removed.

Copy formatting

Copies the design options of the current selection.

Paste formatting

Pastes the design options from the clipboard.

Copy style

Copies the style of the current selection.

Paste style

Pastes the design options from the clipboard. The style itself is also copied.

Copy layout settings

Copies the layout settings of the selected element.

Paste layout settings

Applies the layout settings from the clipboard to the selected element. A full list of settings that can be copied and pasted is included below.

Note: Not all elements have compatible layout settings. When the elements are incompatible, this option will be disabled in the menu. Below are instances where element layout settings are not compatible:

  • Visual Elements and Containers

  • Form Inputs and Containers

  • Elements with different parent container layout types

List of layout settings that can be copied and pasted

Global

  • Make this element fixed width

  • min width

  • max width

  • fit width to content

  • Make this element fixed height

  • min height

  • max height

  • fit height to content

  • Padding

  • Margin

Specific to Row Parent

  • Vertical Alignment

Specific to Column parent

  • Horizontal Alignment

Specific to Align to Parent parent

  • Nonant

Specific to Container

  • Container Layout Type

  • Container Alignment

  • Row gap

  • Column Gap

Layout Settings that cannot be copied pasted

  • Order (Row & Column)

Copy conditional expressions

Copies all conditional expressions of the currently selected element.

Paste conditional expressions

Pastes all the conditional expressions from the clipboard.

Copy condition

This function copies a condition of an element (when editing it in the Property Editor). It can then be pasted for the same element or another element.

Paste condition

This function pastes a condition to an element.

Copy expression

This function copies a dynamic expression that was built with the Composer.

Paste expression

This function pastes a dynamic expression from the clipboard. Access it when editing an expression, even if it is empty.

Clear expression

This clears the dynamic expression.

Paste before

This function pastes a text dynamic expression from the clipboard and appends it before the currently edited expression.

Paste after

This function pastes a text dynamic expression from the clipboard and appends it after the currently edited expression.

Copy to another app

This function copies the selected element(s) or reusable element(s) so that it can then be pasted into another app. It includes associated data such as styles, font/color variables, and reusable definitions across the apps.

When copying reusable elements:

  • All elements within the reusable elements, as well as associated styles, will be copied.

    • If the reusable uses default default font or color variables they will take on the properties of the second app

  • If the reusable element contains one or more reusable element, they'll be inserted as standard elements, not as reusable ones

Clear all

Clears the entire dynamic and text expression.

Bring to front

Moves an element to the forefront.

Send to back

Moves an element behind all other elements.

Collapse all children

Collapses (closes) the selected, and all containers descended from it.

Expand all children

Expands (opens) the selected, and all containers descended from it.

Show all children

Make all direct children visible in the editor.

Hide all children

Make all direct children invisible in the editor.

Delete all children

Delete recursively all children in an element.

Center horizontally

Centers an element horizontally relative to the group that contains it or to the page.

Center vertically

Centers an element vertically relative to the group that contains it or to the page.

Align left

When applied to several elements, this option arranges all the elements so that the left borders line up.

Align horizontal centers

When applied to several elements, this option arranges all the elements so that their horizontal centers line up.

Align right

When applied to several elements, this option arranges all the elements so that the right borders line up.

Align top

When applied to several elements, this option arranges all the elements so that the top borders line up.

Align vertical centers

When applied to several elements, this option arranges all the elements so that their vertical centers line up.

Align bottom

When applied to several elements, this option arranges all the elements so that the bottom borders line up.

Distribute horizontally

When applied to several elements, this option ensures that the horizontal space between the elements is equal.

Distribute vertically

When applied to several elements, this option ensures that the vertical space between the elements is equal.

Swap element positions

Swaps the positions of two elements.

Reveal in Elements tree

This option shows where the element is in the Elements tree box, which is located in the Palette.

Start/Edit workflow

Use this function to either create a workflow or display the existing workflow for the selected element.

Insert an action

Inserts an action before the action you're currently editing.

Reveal the element

Use this function to see which element is used by the selected event or action.

Reveal the action

Shows the action a dynamic expression is referring to.

Show short videos

For new users, a short video is shown the first time you draw each type of new element. Click here to disable this feature.

Always show all properties

Show less options in the Property Editor for visibility and clarity purposes.

Show recent feature release

Add a gift icon to your toolbar to stay up to date on new features and fixes that we add to Bubble. Clicking here opens a popup that lists the changes since the last time you visited the application editor.

Shortcut list

Open a popup that lists keyboard shortcuts for common actions, such as CTRL+P to preview your application just like you had clicked on Preview in the toolbar.

Academy

A link to our educational library, including video courses, tutorials, and quick tips.

Forum

A link to our online community, where many expert Bubble users spend time helping other users out.

Report a bug

A link to a bug report form, where you can share steps for our team to reproduce and investigate an unexpected behavior on Bubble.

Show grid

Customize a grid on the background of your page to help with your design. Choose the grid's color, step size, gutter size, and horizontal lines.

Snap element to edges

Auto-align elements to the edges of other elements, for example, to make sure two buttons are left-aligned.

Snap elements to grid

Auto-align elements to the edges of the grid on your page, for example, if you wanted to design your page in thirds.

Snap to edges and grid

Auto-align elements to each other and columns or rows within you grid.

Do not snap elements

Manually position elements only, without preference for the edges of other elements or alignment with the grid.

Show element borders

Add an outline around the edges of your elements when designing in the application editor. Change the color in the View menu to help it stand out.

Cut column

Cut a column from a table element.

Copy column

Copy a column's content in a table element.

Copy column with workflows

Copy a table element column along with any associated workflows.

Cut row

Cut a row from a table element.

Copy row

Copy the contents of a row in a table element.

Copy row with workflows

Copy a row along with any associated workflows in a table element.

Paste column to right

Paste a previously copied column to the right of the current column in a table element.

Paste column to left

Paste a previously copied column to the left of the current column in a table element.

Paste row above

Paste a previously copied row above the current row in a table element.

Paste row below

Paste a previously copied row below the current row in a table element.

Paste column with workflows to left

Paste a previously copied column along with its workflows to the left of the current column in a table element.

Paste column with workflows to right

Paste a previously copied column along with its workflows to the right of the current column in a table element.

Paste row with workflows above

Paste a previously copied row along with its workflows above the current row in a table element.

Paste row with workflows below

Paste a previously copied row along with its workflows below the current row in a table element.

Select all cells

Select all cells in a table element.

Add column to left

Add a new column to the left of the current column in a table element.

Add column to right

This action adds a new column to the right of the current column in a table element.

Add row above

This adds a new row above the current row in a table element.

Add row below

This action adds a new row below the current row in a table element.

Copy cell content

This action allows you to copy the content of a cell in a table element.

Copy cell content with workflows

This copies the content of a cell along with any associated workflows in a table element.

API workflows: a general workflow that can be initiated from elsewhere in the app or via the Workflow API (see )

Recurring workflows: a workflow that is set to run at a certain frequency (see )

Database change trigger: a workflow that runs when any change of any thing of a specified data type happens (see )

The Bubble editor
How to group elements together
Workflow API
Recurring Event
Trigger Event
Our Academy quick tip on how to ungroup elements
Our Academy quick tip on how to set a new index page
Our Academy quick tip on how to center elements
Our Academy quick tip on how to swap element positions
Watch our Academy quick tip on what to include in a bug report
Group elements in a Fixed container
Group elements in a Row container
Group elements in a Column container
Group elements in an Align-to-Parent container