<h3>Standard</h3>

<p>
    <code>breadcrumb</code> component has a label and link. Additionally, the
    first breadcrumb can be marked as <code>initial</code> and the last one as active. The
    component will render a breadcrumb navigation that allows users to
    understand their current location within the site's hierarchy and navigate
    back to previous levels if needed.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        <div class="toolbar">
            {%- call ui.util.call(ui.breadcrumb_wrapper) -%}
                {{ ui.breadcrumb("Home", href="/", initial=true) }}
                {{ ui.breadcrumb("Theeming", href="/theming") }}
                {{ ui.breadcrumb("Component", href="/theming/component", active=true) }}
            {%- endcall %}
        </div>
    {%- endraw %}
{%- endcall %}