Documentation Index
Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
Use this file to discover all available pages before exploring further.
Overview
Tabs 12 is a vertical tab navigation component featuring three clickable tab buttons (Option 1, Option 2, Option 3) each with an icon and label. It uses a custom state to track the active tab, highlighting the selected tab with a solid left border and darker font color. A content area below the tab list conditionally shows content based on the active tab selection, making it ideal for segmented content switching in both web and mobile layouts.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Hovered Tab | Mouse hover over any tab button | Font color and icon color transition to a more opaque zinc tone (rgba(113,113,123,1)) with ease animation over 200ms |
| Active Tab | The parent group’s custom state ‘tabs_item_’ equals the button’s own ‘item_’ custom state value | Font color and icon color change to dark (rgba(27,23,24,1)) and a solid 2px left border appears in the same dark color, visually indicating the selected tab |
| Content Visibility | The parent group’s custom state ‘tabs_item_’ equals the corresponding tab’s ‘item_’ value | The respective content text element becomes visible; all others remain hidden and collapsed |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.Workflows
This component includes pre-built workflows.| Trigger | Action |
|---|---|
| BT - Tab 1 (Tabs 12) is clicked | Sets the ‘tabs_item_’ custom state on the parent tabs group to the value of Tab 1’s ‘item_’ custom state (1), switching the active tab to Option 1 |
| BT - Tab 2 (Tabs 12) is clicked | Sets the ‘tabs_item_’ custom state on the parent tabs group to the value of Tab 2’s ‘item_’ custom state (2), switching the active tab to Option 2 |
| BT - Tab 3 (Tabs 12) is clicked | Sets the ‘tabs_item_’ custom state on the parent tabs group to the value of Tab 3’s ‘item_’ custom state (3), switching the active tab to Option 3 |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
Platforms
| Platform | Supported |
|---|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.