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
Stepper 07 is a multi-step progress indicator component featuring three clickable steps arranged horizontally. Each step displays a numbered circle (or checkmark when completed), a connector line between steps, and optional title/description labels. It uses a custom state to track the current active step, visually updating circle colors and showing checkmarks for completed steps.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Step Active | custom.step_ equals the step number | Step circle background turns dark and number text color changes to white |
| Step Completed | custom.step_ is greater than the step number | Number text hides and a checkmark icon becomes visible; connector line turns dark |
| Step Inactive | custom.step_ is less than the step number | Step circle remains light gray with muted number text; connector line stays light |
| Mobile Hidden Labels | Current page width is less than or equal to mobile breakpoint | Step title and description text groups are hidden on mobile |
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 - Step 01 - Stepper 07 is clicked | Sets custom state custom.step_ on the parent group to value 1 |
| BT - Step 02 - Stepper 07 is clicked | Sets custom state custom.step_ on the parent group to value 2 |
| BT - Step 03 - Stepper 07 is clicked | Sets custom state custom.step_ on the parent group to value 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.