Stepper
A multi-step progress/navigation indicator.
Try it
Checkout steps
Three server-owned stages.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_stepper.html" with steps=steps mode=mode %}context = {'steps': [{'label': 'Basket', 'status': 'complete'}, {'label': 'Delivery', 'status': 'current'}, {'label': 'Payment', 'status': 'upcoming'}], 'mode': 'progress'}Guide
Add it to your project
- Provide the component’s steps context from the view.
- Use real step destinations for the no-JS route.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| steps | list of mappings | Not set | Yes | Progress mode uses label and status; sequence mode uses label. Constraint: Each step record needs its label and documented state; keep a single current step. |
| orientation | string | horizontal | No | Layout direction. Allowed: horizontal, vertical. Constraint: Allowed values: `horizontal`, `vertical`. |
| mode | string | progress | No | Whether state is conveyed. Allowed: progress, sequence. Constraint: Allowed values: `progress`, `sequence`. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Current state must be conveyed in text and ARIA by the supplied template.
- Responsive
- No inferred breakpoint behaviour.
- Without JavaScript
- Real links remain usable.
Need help?
Troubleshooting
Contract check: indicator, never the flow itself.
Keep flow routing and validation in the host application; the component communicates step state but does not implement the workflow.
Explore next