Breadcrumb

A navigation element that shows the current page's location in the site hierarchy with clickable links.

Loading... 
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Ellipsis />
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

bin/console ux:install Breadcrumb --kit shadcn

That's it!

Install the following Composer dependencies:

composer require symfony/ux-icons tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Breadcrumb.html.twig 
{# @block content The default block #}
<nav{{ attributes }} aria-label="Breadcrumb">
    {%- block content %}{% endblock -%}
</nav>
templates/components/Breadcrumb/Ellipsis.html.twig 
<span
    class="{{ '[&>svg]:w-3.5 [&>svg]:h-3.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
    role="presentation"
    aria-hidden="true"
>
    <twig:ux:icon name="lucide:ellipsis" />
</span>
templates/components/Breadcrumb/Item.html.twig 
{# @block content The default block #}
<li
    class="{{ 'inline-flex items-center gap-1.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</li>
templates/components/Breadcrumb/Link.html.twig 
{# @block content The default block #}
<a
    class="{{ 'transition-colors hover:text-foreground ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</a>
templates/components/Breadcrumb/List.html.twig 
{# @block content The default block #}
<ol
    class="{{ 'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</ol>
templates/components/Breadcrumb/Page.html.twig 
{# @block content The default block #}
<span
    class="{{ 'font-normal text-foreground ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
    role="link"
    aria-disabled="true"
    aria-current="page"
>
    {%- block content %}{% endblock -%}
</span>
templates/components/Breadcrumb/Separator.html.twig 
{# @block content The default block #}
<li
    class="{{ '[&>svg]:w-3.5 [&>svg]:h-3.5 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
    role="presentation"
    aria-hidden="true"
>
    {%- block content -%}
        <twig:ux:icon name="mdi:chevron-right" />
    {%- endblock %}
</li>

Happy coding!

Usage

<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Ellipsis />
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Examples

Default

Loading... 
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Ellipsis />
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator />
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Custom Separator

Loading... 
<twig:Breadcrumb>
    <twig:Breadcrumb:List>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator>
            <twig:ux:icon name="lucide:slash" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator>
            <twig:ux:icon name="lucide:slash" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
        </twig:Breadcrumb:Item>
        <twig:Breadcrumb:Separator>
            <twig:ux:icon name="lucide:slash" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

API Reference

Breadcrumb

Block Description
content The default block

Breadcrumb:Item

Block Description
content The default block

Breadcrumb:Link

Block Description
content The default block

Breadcrumb:List

Block Description
content The default block

Breadcrumb:Page

Block Description
content The default block

Breadcrumb:Separator

Block Description
content The default block