cotton

Breadcrumbs

Show the user's location within a hierarchy and let them navigate back up.

Basic Usage

Compose a trail with c-ui.breadcrumbs and one c-ui.breadcrumbs.item per level. Mark the final item with :current="True" so it is styled as the active page and exposed with aria-current.

<c-ui.breadcrumbs>
    <c-ui.breadcrumbs.item>Home</c-ui.breadcrumbs.item>
    <c-ui.breadcrumbs.item>Library</c-ui.breadcrumbs.item>
    <c-ui.breadcrumbs.item :current="True">Data</c-ui.breadcrumbs.item>
</c-ui.breadcrumbs>
{% cotton ui.breadcrumbs %}
    {% cotton ui.breadcrumbs.item %}Home{% endcotton %}
    {% cotton ui.breadcrumbs.item %}Library{% endcotton %}
    {% cotton ui.breadcrumbs.item :current="True" %}Data{% endcotton %}
{% endcotton %}

Custom Separator

Override the default / with a separator slot. It accepts a symbol or an SVG icon, set once for the whole trail.

<c-ui.breadcrumbs>
    <c-slot name="separator">
        <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
    </c-slot>
    <c-ui.breadcrumbs.item href="/">Home</c-ui.breadcrumbs.item>
    <c-ui.breadcrumbs.item href="/components">Components</c-ui.breadcrumbs.item>
    <c-ui.breadcrumbs.item :current="True">Breadcrumbs</c-ui.breadcrumbs.item>
</c-ui.breadcrumbs>

{# a plain symbol works too: #}
<c-slot name="separator">›</c-slot>
{% cotton ui.breadcrumbs %}
    {% cotton:slot separator %}
        <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
    {% endcotton:slot %}
    {% cotton ui.breadcrumbs.item href="/" %}Home{% endcotton %}
    {% cotton ui.breadcrumbs.item href="/components" %}Components{% endcotton %}
    {% cotton ui.breadcrumbs.item :current="True" %}Breadcrumbs{% endcotton %}
{% endcotton %}

{# a plain symbol works too: #}
{% cotton:slot separator %}›{% endcotton:slot %}

API Reference

Breadcrumbs

Name Description Type Options Default
class Extra classes merged onto the inner ordered list. str —
separator (slot) Optional. A character or symbol used between items, set once for the whole trail. — — /
slot (default) The breadcrumb items, one c-ui.breadcrumbs.item per level. — —

Breadcrumbs.Item

Name Description Type Options Default
href Destination URL. When set and the item is not current, the item renders as a link. str —
current Mark the item as the active page. Renders as plain text with aria-current='page' and emphasised styling. bool — False
class Extra classes merged onto the item's link or span. str —
slot (default) The item label. — —