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: