Breadcrumbs
Navegación jerárquica con separadores. Acepta lista de items con label, href y icon opcional. El último item se marca aria-current="page".
<nav class="crumbs" aria-label="breadcrumb"><a class="crumbs-item" href="#">ERPlora
</a><span class="crumbs-sep" aria-hidden="true"><iconify-icon icon="lucide:chevron-right" width="14" height="14"></iconify-icon></span><a class="crumbs-item" href="#">Cafetería La Rambla
</a><span class="crumbs-sep" aria-hidden="true"><iconify-icon icon="lucide:chevron-right" width="14" height="14"></iconify-icon></span><a class="crumbs-item" href="#">Sede · Eixample
</a><span class="crumbs-sep" aria-hidden="true"><iconify-icon icon="lucide:chevron-right" width="14" height="14"></iconify-icon></span><a class="crumbs-item" href="#">Comercial
</a><span class="crumbs-sep" aria-hidden="true"><iconify-icon icon="lucide:chevron-right" width="14" height="14"></iconify-icon></span><span class="crumbs-item" aria-current="page">Pedido #FCT-2026-00184
</span>
</nav>
{% from "breadcrumbs.jinja" import breadcrumbs %}
{{ breadcrumbs([
{"label": "ERPlora", "href": "#"},
{"label": "Cafetería La Rambla", "href": "#"},
{"label": "Sede · Eixample", "href": "#"},
{"label": "Comercial", "href": "#"},
{"label": "Pedido #FCT-2026-00184"},
]) }}
<Breadcrumbs items='[
{"label": "ERPlora", "href": "#"},
{"label": "Cafetería La Rambla", "href": "#"},
{"label": "Sede · Eixample", "href": "#"},
{"label": "Comercial", "href": "#"},
{"label": "Pedido #FCT-2026-00184"},
]' />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<nav class="crumbs" aria-label="breadcrumb"><a class="crumbs-item" href="#">Inicio
</a><span class="crumbs-sep" aria-hidden="true">/</span><a class="crumbs-item" href="#">Manufactura
</a><span class="crumbs-sep" aria-hidden="true">/</span><a class="crumbs-item" href="#">Línea 04
</a><span class="crumbs-sep" aria-hidden="true">/</span><span class="crumbs-item" aria-current="page">Trazabilidad
</span>
</nav>
{% from "breadcrumbs.jinja" import breadcrumbs %}
{{ breadcrumbs([
{"label": "Inicio", "href": "#"},
{"label": "Manufactura", "href": "#"},
{"label": "Línea 04", "href": "#"},
{"label": "Trazabilidad"},
], separator="/") }}
<Breadcrumbs items='[
{"label": "Inicio", "href": "#"},
{"label": "Manufactura", "href": "#"},
{"label": "Línea 04", "href": "#"},
{"label": "Trazabilidad"},
]' separator="/" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<nav class="crumbs chips" aria-label="breadcrumb"><a class="crumbs-item" href="#">Inventario
</a><a class="crumbs-item" href="#">Almacenes
</a><a class="crumbs-item" href="#">ALM-MAD-01
</a><span class="crumbs-item" aria-current="page">SKU 8743290
</span>
</nav>
{% from "breadcrumbs.jinja" import breadcrumbs %}
{{ breadcrumbs([
{"label": "Inventario", "href": "#"},
{"label": "Almacenes", "href": "#"},
{"label": "ALM-MAD-01", "href": "#"},
{"label": "SKU 8743290"},
], variant="chips") }}
<Breadcrumbs items='[
{"label": "Inventario", "href": "#"},
{"label": "Almacenes", "href": "#"},
{"label": "ALM-MAD-01", "href": "#"},
{"label": "SKU 8743290"},
]' variant="chips" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<nav class="crumbs sm" aria-label="breadcrumb"><a class="crumbs-item" href="#">Inicio
</a><span class="crumbs-sep" aria-hidden="true">/</span><a class="crumbs-item" href="#">Operaciones
</a><span class="crumbs-sep" aria-hidden="true">/</span><span class="crumbs-item" aria-current="page">Hoy
</span>
</nav>
{% from "breadcrumbs.jinja" import breadcrumbs %}
{{ breadcrumbs([
{"label": "Inicio", "href": "#"},
{"label": "Operaciones", "href": "#"},
{"label": "Hoy"},
], variant="sm", separator="/") }}
<Breadcrumbs items='[
{"label": "Inicio", "href": "#"},
{"label": "Operaciones", "href": "#"},
{"label": "Hoy"},
]' variant="sm" separator="/" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
items | list[dict] | — | Lista de items {label, href?, icon?, current?}. El último se marca current si no se indica. |
variant | "sm"|"chips"|None | None | Variante visual. |
separator | "chevron"|str | "chevron" | SVG chevron (default) o cualquier carácter literal (e.g. "/"). |
attrs | dict | {} | Atributos HTML extra en el <nav>. |