Breadcrumb — Component Storybook

LIVE PREVIEW 2

breadcrumb(label=url, label=url, label=url)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`items`	`list`	—

PROPS — OPTIONAL 4

Name	Type	Default
`separator`	`str`	/
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_separator`	`str`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Breadcrumb nav must have aria-label=Breadcrumb	`nav`	`aria-label`	Breadcrumb

AVAILABLE SLOTS 1

slot_separator

CSS VARIABLES 2

--foreground --muted-foreground

TEMPLATE SOURCE

breadcrumb.html

<nav class="{{ css_prefix }}breadcrumb {% if attrs.class %}{{ attrs.class }}{% endif %}"
     aria-label="Breadcrumb"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <ol class="{{ css_prefix }}breadcrumb-list">
        {% for item in items %}
        <li class="{{ css_prefix }}breadcrumb-item">
            {% if not forloop.last %}
            <a href="{{ item.url }}" class="{{ css_prefix }}breadcrumb-link">{{ item.label }}</a>
            {% if slot_separator %}
            <span class="{{ css_prefix }}breadcrumb-separator" aria-hidden="true">{{ slot_separator|safe }}</span>
            {% else %}
            <span class="{{ css_prefix }}breadcrumb-separator" aria-hidden="true">{{ separator }}</span>
            {% endif %}
            {% else %}
            <span class="{{ css_prefix }}breadcrumb-current" aria-current="page">{{ item.label }}</span>
            {% endif %}
        </li>
        {% endfor %}
    </ol>
</nav>