Breadcrumbs
A semantic trail from a higher-level location to the current page.
Try it
Article trail
A three-level documentation path.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_breadcrumbs.html" with crumbs=breadcrumbs %}context = {'breadcrumbs': [{'label': 'Docs', 'url': '/docs/'}, {'label': 'Components', 'url': '/components/'}, {'label': 'Breadcrumbs'}]}Guide
Add it to your project
- Build crumbs in navigation context.
- Include the partial in the shell `breadcrumbs` block.
- Make the final entry the current page.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| crumbs | list[dict] | Not set | Yes | Ordered `{label, url?}` items. Constraint: Final crumb is rendered current and unlinked; an empty list emits nothing. |
Named blocks
Fill these only when you extend the component template. They are not values passed to an include or tag.
| Block | What it replaces |
|---|---|
| breadcrumbs | Shell breadcrumb region containing this trail. Constraint: Markup-only extension seam; passing a context variable with this name is ignored. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- An ordered list sits in the shell nav and the current page gets `aria-current="page"`.
- Responsive
- No component breakpoint; long trails follow the container rules.
- Without JavaScript
- Static HTML only.
Need help?
Troubleshooting
Contract check: current page is never a link). Intermediate crumbs with a url are
Omit the final crumb URL so the current page is rendered as text with `aria-current="page"`.
Explore next