View as Markdown

Breadcrumb

Indicates the current page's location within a navigational hierarchy.

100%
Loading... 
<twig:Breadcrumb>
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
</twig:Breadcrumb>

Installation

php bin/console ux:install breadcrumb --kit bootstrap

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop divider string|null The custom text used as the divider between breadcrumb items. #}
{# @prop label string|null The accessible name for the breadcrumb navigation. #}
{# @block content The ordered list of breadcrumb items. #}
{%- props
    divider = null,
    label = &#039;breadcrumb&#039;
-%}

{%- set default_attrs = {} -%}
{%- if label is not null -%}
    {%- set default_attrs = default_attrs|merge({&#039;aria-label&#039;: label}) -%}
{%- endif -%}
{%- if divider is not null -%}
    {%- set default_attrs = default_attrs|merge({style: &quot;--bs-breadcrumb-divider: &#039;&quot; ~ divider ~ &quot;&#039;;&quot;}) -%}
{%- endif -%}

&lt;nav {{ attributes.defaults(default_attrs) }}&gt;
    &lt;ol class=&quot;breadcrumb&quot;&gt;
        {%- block content -%}{%- endblock -%}
    &lt;/ol&gt;
&lt;/nav&gt;

Usage

<twig:Breadcrumb>
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
</twig:Breadcrumb>

Accessibility

Give the navigation a meaningful accessible name. Apply aria-current="page" to the final breadcrumb item so assistive technologies can identify the current page.

Examples

Build breadcrumb trails with linked items followed by an active item for the current page.

100%
Loading... 
<div class="d-flex flex-column gap-2">
    <twig:Breadcrumb>
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb>
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb>
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </twig:Breadcrumb>
</div>

Dividers

Customize the divider with text, an escaped SVG data URL, or an empty CSS custom property.

100%
Loading... 
<div class="d-flex flex-column gap-2">
    <twig:Breadcrumb divider=">">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb style="--bs-breadcrumb-divider: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&quot;);">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>

    <twig:Breadcrumb style="--bs-breadcrumb-divider: ''">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </twig:Breadcrumb>
</div>

API Reference

<twig:Breadcrumb>

Prop Type Default
divider 
 string|null null
label 
 string|null 'breadcrumb'
Block Description
content The ordered list of breadcrumb items.