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 09 is a horizontal navigation tab component featuring three clickable tab buttons (Tab 1, Tab 2, Tab 3), each with an icon and label. It uses a custom state on the parent group to track the active tab, highlighting the selected tab with a dark underline border and darker text color. Inactive tabs display muted text, and a hover state slightly increases text opacity. Workflows connect each button click to update the active tab state, making it suitable for switching between content sections.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Hover State | User hovers over any tab button | Tab text and icon color changes to a slightly more opaque zinc tone (rgba 113,113,123,1) |
| Active Tab State | The parent group’s custom state ‘tabs_item_’ matches the button’s own ‘item_’ custom state value | Tab text and icon color change to dark (rgba 27,23,24,1) and a solid bottom border appears indicating the active tab |
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 09) is clicked | Sets the parent group’s custom state ‘tabs_item_’ to the value of Tab 1’s ‘item_’ custom state (1) |
| BT - Tab 2 (Tabs 09) is clicked | Sets the parent group’s custom state ‘tabs_item_’ to the value of Tab 2’s ‘item_’ custom state (2) |
| BT - Tab 3 (Tabs 09) is clicked | Sets the parent group’s custom state ‘tabs_item_’ to the value of Tab 3’s ‘item_’ custom state (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.