Canvas Documentation
Bubble Best Practices
v3.7
v3.7
  • Introduction
  • Key Features
  • What's New
  • For Designers
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
    • 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
        • Admin Portal
        • Account
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Login
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, launch, and settings
          • Admin marketing pages
          • Admin portal canvas logic
          • Admin options settings
        • Menu Focus Elements
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Bubble Best Practices
    • Learning Bubble Basics
    • Principles
    • Database
    • Design
    • Security
    • SEO
    • Speed
    • Modularity
      • Data triggers
  • Canvas library
    • Page templates
      • Free Bubble Marketing Page
      • Premium Bubble Marketing Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List 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
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • 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
      • 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
    • Popups
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll 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
      • Pricing Plans Popup
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up
  • How to show a tab

Was this helpful?

  1. Canvas library
  2. Blocks

Toggle Tabs Group

Use this to add toggle tabs above repeating groups, groups, and maps.

PreviousBottom Input Chat WidgetNextSingle-Select or Multi-Select Pill Tabs Group

Last updated 3 years ago

Was this helpful?

Overview

This group includes a tab-like UI component for showing and hiding blocks.

Structure

  • This Group toggleTabsGroup has a data type of text. It stores the name of the current tab that the user is viewing. It includes all of the tabs that a user can click on. Each tab group (e.g., Group Nav 1 tab -) has a data type of text and contains the name of the tab. Clicking on tab group will toggle to a different tab (you will have to determine which group to show).

How to set up

  • Update the data source of each of the tab groups (e.g., Group Nav 1 tab - , Group Nav 2 tab -, etc.)

  • Update the group's text

  • Resize the tab groups to ensure the full text is visible.

  • In the workflow tab, create a custom workflow called Navigate of type text

  • Add the following workflow to the custom workflow: Go to [page name] and send a parameter called tab, where tab = current workflow text

  • For each Group Nav 1 tab -, trigger the Navigate custom workflow and set the workflow thing to Parent group's text

  • Adding these workflows will allow your users to use the browser's BACK feature to go back to the last tab they've viewed. Please note this will only work if the box for Replace the entry in the browser history is unchecked in the Go to page step of the Navigate workflow.

The tab elements are within a single-celled horizontal scroll repeating group called "RepeatingGroup scrolling (do not change)". Please do not alter or remove this repeating group; it is used to create the horizontal scroll functionality on mobile.

How to show a tab

  • Add the following conditional statement to the block you want to display for each tab: If Group toggleTabsGroup's text is Group Nav 1/2/3/4 tab -'s text then this group is visible