Canvas Documentation
Bubble Best Practices
v6.0
v6.0
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Page
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Product homepage
        • Marketplace homepage
        • SaaS homepage
        • About us
        • Pricing
        • Admin Portal
        • Account
          • Account deletion
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Log in
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, setup checklist, and settings
          • Admin options app variables
        • Menu Focus Elements
        • Sidebar tab
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Canvas library
    • Updating asset RG data source
    • UI Patterns
      • Simple Dashboard Page
      • Product Marketplace Dashboard Page
      • Labor Marketplace Profile Page
      • Social Network Profile Page
      • Simple Events Search Page
      • Events Search Page
      • Ecommerce Search Page
      • Labor Marketplace Search Page
    • Page templates
      • Basic Bubble Marketing Page
      • Chat Messenger Page
      • Form Builder Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Horizontal Tabs Portal / Dashboard Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page with Tabs
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Pagination
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings Group
      • Order Confirmation Group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column (Repeating Group)
      • Nested Data Table (Repeating Group)
      • Standard Data Table (Repeating Group)
      • Standard Data Table (Table Element)
      • Mobile-Friendly Data Table (Repeating Group)
      • Mobile-Friendly Data Table (Table Element)
      • Infinite Columns Horizontal Scroll Data Table (Repeating Group)
      • Infinite Columns Horizontal Scroll Data Table (Table Element)
      • Activity Feed
      • Social Feed
      • Nested Repeating Group
      • Advanced Form Inputs Group
      • Reviews with Ratings Summary and Images
      • Reviews Repeating Group with User Images
      • Reviews (Text Only) Repeating Group
      • Standard Repeating Group with Image
      • Search Bar Group
      • Listing Details Group
      • Post Group with Upvoting UI
      • Large Chart Dashboard Widget
      • Chart With Key Metrics Dashboard Widget
      • 2-Column Table and Key Metrics Dashboard Widgets
      • 2-Column Large Metrics Dashboard Widgets
      • 4-Column Large Metrics Dashboard Widgets
      • Main Image with Thumbnails
      • Centered Profile Block
      • Left-justified Profile Block
      • Tile Image Gallery and Popup
      • Image Feed with Nested Comments Thread
      • 1-Column Standard Form Inputs Group
      • 2-Column Slideshow Tiles Repeating Group
      • 2-Column Repeating Group (Text, Link, Image, and Description)
      • 2-Column Repeating Group (Link, Text, and Button)
      • 2-Column Repeating Group with Actions
      • 2-Column Grid Tiles Repeating Group
      • 2-Column Form Group
      • 4-Column Tiles Repeating Group
      • Expiration timer
    • Popups
      • Edit Drawer
      • Map Location Details Drawer
      • Details and Comments Drawer
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Permissions popup
      • Multimedia Slideshow Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Net Promoter Score (NPS) Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
      • Sidebar_icontab
      • Doublesidebar_tab
Powered by GitBook
On this page
  • The Header
  • Creating/editing a header
  • Telling Canvas which header to display
  • Header sections
  • Updating the logged in focus group menu
  • The Footer
  • How to add, edit, or delete Navigation items
  • Styling
  • Footer Sections
  • Setting up Navigation item actions
  • Open Bubble page
  • Open external link
  • Run Bubble action
  • Dropdown menu
  • Clone the reusable template
  • Assign the type of content
  • Set up the dropdown buttons
  • Using the custom events

Was this helpful?

  1. CANVAS FUNCTIONALITY

Menus & Navigation

The Canvas template has three main navigation reusable elements: the Header, the Footer, and the Menu Focus Group.

PreviousRoles & PermissionsNextData & Workflows

Was this helpful?

The Header

Element name: header Overview: The Canvas header allows Canvas developers to create any number of headers for an app. The header reusable dynamically displays different navigation elements, including texts, icons, buttons, the Current User profile image and group focus, and mobile menu.

This header element is fully responsive, and it is used on every page of the Canvas template. Each Canvas application comes preconfigured with three headers as shown below.

Admin user

Standard logged in user

Logged out user

Creating/editing a header

Canvas developers can create any number of Headers within the admin portal, and each Header can have any combination of dynamic navigation elements (icons, texts, buttons, and the Current User profile picture).

You can create a new header or you can choose to clone an existing header if you have one that is similar to what you would like to create.

  1. Click New to create a new header from scratch

  2. Click Edit to edit the name of the currently selected header

  3. Click Clone to duplicate an existing headers settings into a new header

  4. Click Delete to remove the currently selected header

Telling Canvas which header to display

Canvas will display any Header based on the “var - current header” hidden variable within the header reusable. As you create new Headers, you will need to add more conditionals to this hidden variable to specify when to show each Header. For example, you could show a specific Header based on the Current User’s role or show a particular Header based on a certain page’s name.

Remember, when setting conditionals Bubble will give priority to the last condition that is true. So if you have three conditions and both condition #1 and condition #3 evaluate as true, Bubble will prioritize condition #3 over condition #1.

Header sections

Text

Text Navigation items will appear to the left of the icons in your header. On a mobile screen, these elements will be moved from the header into the mobile dropdown menu.

Icons

The icon element is a special element as we have included four reusable Bubble elements with GroupFocus drop downs that you can set up to be triggered from the icon.

You can add up to 4 icons per header but for best mobile experience we recommend using a max of 3 icons for a header that has the logged in state toggled on

To set up this functionality, in the Edit Icon Option popup select the Open widget action type and then select from one of the four widgets below.

    • Widget Action Trigger = Open notifications widget

    • Recommended icon = bell

    • Widget Action Trigger = Open messages widget

    • Recommended icon = messages-circle

    • Widget Action Trigger = Open search widget

    • Recommended icon = search

    • Widget Action Trigger = Open cart widget

    • Recommended icon = cart

Each of the above widgets contains a small text element that displays a number alert for that widget (think unread notifications or count of items in cart). This number is static by default but can be made dynamic by modifying the var - unread or var - count elements within the corresponding widget reusable.

Buttons

You can include up to two buttons on each header.

General Settings

  • Logo link Set the logo link for each header. Choose between the index page or another url.

  • User info Set toggle on if this header is visible to logged-in Users. This header will display the Current User's profile picture with a dropdown menu that allows them to view their account settings or log out.

    • Check 'Show user's first name' to display the user's name to the left of their profile image.

Note, if you would like to display text other than the user's first name, you can edit the var - user text element within the header reusable.

Mobile menu and responsiveness

Each Header's responsive settings are set automatically. On desktop, the Header will display text links, icons, buttons, and the Current User profile picture. On mobile, the Header will hide any text and button elements, and display the hamburger menu icon. Clicking on the hamburger menu icon will open a mobile menu that contains the Header's text and button navigation elements. The breakpoint to display the mobile menu is determined dynamically for each Header on page load. If a Header does not contain any text or button navigation elements, the hamburger menu will not become visible on mobile.

Updating the logged in focus group menu

You can manually update the elements in the user account dropdown directly from the header reusable element in the Bubble editor.

From the elements tree open GroupFocus Mini > Group Logged In

There is a button for the user to log out, visit their account page, and navigate to the admin portal. We have also included three placeholder buttons for you to customize and add actions if you would like to create additional functionality.

Placeholder button refers to a fully designed button element that has been hidden by default but can be unhidden and used as needed in your application.

The Footer

Element name: footer Overview: Similar to the Canvas Header, the app’s footer reusable element also displays Navigation Items defined in the admin portal. The primary difference between the header and footer is that there is only one footer version; you cannot define different footer variants through the admin portal.

The footer element is included by default on all Bubble marketing pages. For non-marketing pages you will need to add it manually.

How to add, edit, or delete Navigation items

Adding, editing, and deleting Navigation Items within the Footer is the same as doing so in the Header.

Styling

The Footer’s desktop design has the app’s text links aligned to the left and the app’s social media icons aligned to the right:

On mobile, all elements become centered:

Footer Sections

Pages

Pages are simple text links and your template will have two Navigation items in this section linking to the Home and About pages.

Legal

Canvas allows you to manage your terms of service and privacy policy content directly from the admin portal. By default the footer will have a link to both the Terms of service and Privacy policy pages.

We have provided default content for your but the content contains references to text that needs to be changed. If you search for all references of the word "Sample" and replace those with an appropriate word (usually the legal name of your company), that is a start, but you should also determine if the content of the documents is appropriate for your application.

To edit the content for these pages, from the left menu navigate to Settings > Terms of service or Settings > Privacy policy

We have compiled a list of resources to help you get started with customizing your legal pages.

Social media

Here you can add social media icons to your footer that link to your social media pages.

Setting up Navigation item actions

When adding items to the header or footer, you will see the same actions available to setup for both. You can set up almost any configuration possible. Here's how:

Open Bubble page

Open external link

Enter a url (including https:) that would like to navigate to when this element is clicked.

Run Bubble action

This will trigger a workflow in the header reusable called Run Bubble Action Triggered which is a Javascript to Bubble element action from the Toolbox plugin. The text value that you save in the 'Bubble action trigger' input will be passed through this event as "This JavascripttoBubble's value".

Let's say we want to show a popup when a link is clicked we would set that up with the following steps

  1. First let's decide on a unique text we can use to identify that this particular link was clicked. For this case it would make sense to make that text be show-popup.

  2. Now we need to add an action in the Run Bubble Action Triggered workflow to show the popup. On this action add a condition so that it only runs when This JavascripttoBubble's value is show-popup .

  3. Finally, to set up the link to trigger this action, we will select Run Bubble action as the action type and in the Bubble action trigger will add the text show-popup .

That's it! The popup will now be shown when the user clicks this link.

We recommend setting up only one action per link trigger in this Run Bubble Action Triggered. If you need to create a more complex action, put those actions in a Custom event and trigger the custom event from the Run Bubble Action Triggered workflow.

Dropdown menu

Element name: menufocus_template Purpose: Provide the user with a concise list of actions they can take in a convenient dropdown menu.

The dropdown menu is used consistently throughout the Canvas template to provide the user with actions they can take such as Edit/delete a thing, View more details, Send a message, etc.

The dropdown is triggered by clicking on the icon, can be dismissed by clicking anywhere outside the dropdown, and is most often used in repeating groups to provide action items for each thing in the list.

Clone the reusable template

Open the menufocus_template and from the top bar of the Bubble editor click Edit > Clone this Page.

Assign the type of content

With your cloned menufocus_template open, double-click in the gray area of the editor to open up the settings for the reusable. Change the 'Type of content' to the datatype you will be using this menu to edit. You will need to change the type of content for the GroupFocus Dummy as well.

Set up the dropdown buttons

In the elements tree click the '+' to open the GroupFocus Dummy. This group contains all the dropdown buttons in the menu. Group Option 2 and Group Option 3 are already set up as the Edit and Delete actions.

There are three more Group Options (1, 4, & 5) that are unused and can be customized to add more buttons to your menu. Each of these groups has a corresponding event in the workflow tab that will be run when the group is clicked.

The menufocus_template reusable element also contains two popups that correlate to the Edit and Delete actions:

  • Popup Edit Clicking on Option 2 (Edit) in the dropdown will open a standard edit form popup to create or edit a thing.

  • Popup Remove Clicking on Option 3 (Delete) in the dropdown will open a popup to remove a thing.

Customize/duplicate these popups to your purposes.

Using the custom events

Each popups can be triggered by the corresponding custom events 'Create/edit thing' and 'Remove thing'.

Setting up custom events within a reusable gives you the option of using that workflow from the page it is on with the 'Trigger a custom event from a reusable element' action.

Each header can contain custom text links, icons, or buttons and have multiple actions that can be set for each item. Learn about how to use each action .

Widget Notifications This action will show a notifications group focus when clicked. Learn how to customize this element .

Widget Messages This action will show a messages group focus when clicked. Learn how to customize this element .

Widget Search This action will show a search input within a group focus when clicked. Learn how to customize this element .

Widget Shopping Cart This action will show the shopping cart group focus when clicked. Learn how to customize this element .

Opening a Bubble page will use the reusable data that is setup inside the editor.

For example, you can add the menufocus_template element to the on a page and trigger a custom event to create/edit or remove a thing.

Privacy Policy resources
Terms of Service resources
here
here
here
here
here
hidden variables popup
Bubble Pages