Toc
A documentation “On this page” navigation.
Try it
Article outline
Active child section.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% load brickwork_components %}
{% bw_toc items=toc_items active=active %}context = {'toc_items': [{'label': 'Installation', 'href': '#install'}, {'label': 'Reference', 'href': '#reference', 'children': [{'label': 'Options', 'href': '#options'}]}], 'active': 'options'}Guide
Add it to your project
- Load `brickwork_components`.
- Prefer `bw_toc` to validate item shape and active target.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| items | list of mappings | Not set | Yes | label and href; optional one level of children. Constraint: Each item must follow the component's documented item-record shape; keep labels and destinations paired. |
| active | string | Empty string | No | Href or bare id to mark current. Constraint: Must match an identifier declared by the corresponding structured collection. |
| heading | string | On this page | No | Visible landmark heading. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| heading_id | string | bw-toc-heading | No | Heading id. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- A labelled nav gives `aria-current=location` to the active item.
- Responsive
- Inherits docs TOC measure.
- Without JavaScript
- Normal in-page links.
Need help?
Troubleshooting
Contract check: nothing (no empty landmark).
Supply a non-empty, correctly shaped item list when a contents landmark is needed; empty input intentionally emits no landmark.
Explore next