Breadcrumbs
Implemented NavigationTrail navigation in two sizes.
Kumo reference: kumo-ui.com/components/breadcrumbs/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Icons
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=icon_crumbs only %}Basic
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=crumbs only %}Compact
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=crumbs size="sm" only %}Custom separator
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=crumbs separator="/" only %}Loading state
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=audit_breadcrumbs_loading only %}Copy current item
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=audit_breadcrumbs_copy only %}Root only
Show template
{% load wdj %}
{% include "wdj/components/breadcrumbs.html" with crumbs=audit_breadcrumbs_root label="Root breadcrumb" only %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| crumbs | list[dict] | unset | Breadcrumbs: label, optional href/icon/loading/copy/loading_label/copy_label. The final item is the current page. Phones retain the parent and current page with an ellipsis. |
| size | string | base | Size; pass the documented value shown in the examples. |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| separator | string | unset | Separator; pass the documented value shown in the examples. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |