View as Markdown

Breadcrumb

Displays the path to the current resource using a hierarchy of 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

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 breadcrumb structure, typically a `Breadcrumb:List` #}
<nav
    data-slot="breadcrumb"
    aria-label="breadcrumb"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</nav>
templates/components/Breadcrumb/Ellipsis.html.twig 
{# @block content Optional custom content replacing the ellipsis icon #}
<span
    data-slot="breadcrumb-ellipsis"
    role="presentation"
    aria-hidden="true"
    class="{{ ('flex size-5 items-center justify-center [&>svg]:size-4 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    <twig:ux:icon name="lucide:ellipsis" />
    <span class="sr-only">More</span>
</span>
templates/components/Breadcrumb/Item.html.twig 
{# @block content The breadcrumb item content, typically a `Breadcrumb:Link` or `Breadcrumb:Page` #}
<li
    data-slot="breadcrumb-item"
    class="{{ ('inline-flex items-center gap-1 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</li>
templates/components/Breadcrumb/Link.html.twig 
{# @block content The clickable link text #}
<a
    data-slot="breadcrumb-link"
    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 list of breadcrumb items, typically multiple `Breadcrumb:Item` components #}
<ol
    data-slot="breadcrumb-list"
    class="{{ ('flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</ol>
templates/components/Breadcrumb/Page.html.twig 
{# @block content The current page text (non-clickable) #}
<span
    data-slot="breadcrumb-page"
    role="link"
    aria-disabled="true"
    aria-current="page"
    class="{{ ('font-normal text-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>
templates/components/Breadcrumb/Separator.html.twig 
{# @block content The separator icon between breadcrumb items, defaults to a chevron #}
<li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    class="{{ ('[&>svg]:size-3.5 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content -%}
        <twig:ux:icon name="lucide:chevron-right" class="rtl:rotate-180" />
    {%- 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: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

Basic

A basic breadcrumb with a home link and a components link.

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: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

Use a custom component as children for Breadcrumb:Separator to create a 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:dot" />
        </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:dot" />
        </twig:Breadcrumb:Separator>
        <twig:Breadcrumb:Item>
            <twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
        </twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Collapsed

We provide a Breadcrumb:Ellipsis component to show a collapsed state when the breadcrumb is too long.

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>

Link component

To use a custom link component from your routing library, you can pass the href attribute to Breadcrumb:Link.

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: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>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

Loading... 
<div class="flex flex-col gap-6">
    <twig:Breadcrumb dir="rtl">
        <twig:Breadcrumb:List>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">الرئيسية</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">المكونات</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Page>مسار التنقل</twig:Breadcrumb:Page>
            </twig:Breadcrumb:Item>
        </twig:Breadcrumb:List>
    </twig:Breadcrumb>
    <twig:Breadcrumb dir="rtl">
        <twig:Breadcrumb:List>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">בית</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Link href="#">רכיבים</twig:Breadcrumb:Link>
            </twig:Breadcrumb:Item>
            <twig:Breadcrumb:Separator>
                <twig:ux:icon name="lucide:dot" />
            </twig:Breadcrumb:Separator>
            <twig:Breadcrumb:Item>
                <twig:Breadcrumb:Page>ניווט</twig:Breadcrumb:Page>
            </twig:Breadcrumb:Item>
        </twig:Breadcrumb:List>
    </twig:Breadcrumb>
</div>

API Reference

Component Breadcrumb

Block Description
content The breadcrumb structure, typically a Breadcrumb:List

Component Breadcrumb:Ellipsis

Block Description
content Optional custom content replacing the ellipsis icon

Component Breadcrumb:Item

Block Description
content The breadcrumb item content, typically a Breadcrumb:Link or Breadcrumb:Page

Component Breadcrumb:Link

Block Description
content The clickable link text

Component Breadcrumb:List

Block Description
content The list of breadcrumb items, typically multiple Breadcrumb:Item components

Component Breadcrumb:Page

Block Description
content The current page text (non-clickable)

Component Breadcrumb:Separator

Block Description
content The separator icon between breadcrumb items, defaults to a chevron