Breadcrumb

Basic

{% component "Breadcrumb" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Library{% endcomponent %}
            {% endcomponent %}

Preview:


Single Item Active

{% component "Breadcrumb" %}
                {% component "BreadcrumbItem" active=True %}Home{% endcomponent %}
            {% endcomponent %}

Preview:


Three Items

{% component "Breadcrumb" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" href="#" %}Library{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Data{% endcomponent %}
            {% endcomponent %}

Preview:


Custom Divider Greater Than

{% component "Breadcrumb" attrs:style="--bs-breadcrumb-divider: '>';" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Library{% endcomponent %}
            {% endcomponent %}

Preview:


No Divider

{% component "Breadcrumb" attrs:style="--bs-breadcrumb-divider: '';" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Library{% endcomponent %}
            {% endcomponent %}

Preview:


Custom Label

{% component "Breadcrumb" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Library{% endcomponent %}
            {% endcomponent %}

Preview:


Custom Attrs

{% component "Breadcrumb" attrs:class="custom-class" %}
                {% component "BreadcrumbItem" href="#" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True %}Library{% endcomponent %}
            {% endcomponent %}

Preview:


Item Custom Attrs

{% component "Breadcrumb" %}
                {% component "BreadcrumbItem" href="#" attrs:data-test="home" %}Home{% endcomponent %}
                {% component "BreadcrumbItem" active=True attrs:class="highlighted" %}Library{% endcomponent %}
            {% endcomponent %}

Preview: