Component Breadcrumb - Shadcn UI Kit

Displays the path to the current resource using a hierarchy of links.

<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

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

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

{# @block content The breadcrumb structure, typically a `Breadcrumb:List`. #}
&lt;nav
    data-slot=&quot;breadcrumb&quot;
    aria-label=&quot;breadcrumb&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/nav&gt;

&lt;span
    data-slot=&quot;breadcrumb-ellipsis&quot;
    role=&quot;presentation&quot;
    aria-hidden=&quot;true&quot;
    class=&quot;{{ (&#039;flex size-5 items-center justify-center [&amp;&gt;svg]:size-4 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    &lt;twig:ux:icon name=&quot;lucide:ellipsis&quot; /&gt;
    &lt;span class=&quot;sr-only&quot;&gt;More&lt;/span&gt;
&lt;/span&gt;

{# @block content The breadcrumb item content, typically a `Breadcrumb:Link` or `Breadcrumb:Page`. #}
&lt;li
    data-slot=&quot;breadcrumb-item&quot;
    class=&quot;{{ (&#039;inline-flex items-center gap-1 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/li&gt;

{# @block content The clickable link text. #}
&lt;a
    data-slot=&quot;breadcrumb-link&quot;
    class=&quot;{{ (&#039;transition-colors hover:text-foreground &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/a&gt;

{# @block content The list of breadcrumb items, typically multiple `Breadcrumb:Item` components. #}
&lt;ol
    data-slot=&quot;breadcrumb-list&quot;
    class=&quot;{{ (&#039;flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/ol&gt;

{# @block content The current page text (non-clickable). #}
&lt;span
    data-slot=&quot;breadcrumb-page&quot;
    role=&quot;link&quot;
    aria-disabled=&quot;true&quot;
    aria-current=&quot;page&quot;
    class=&quot;{{ (&#039;font-normal text-foreground &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/span&gt;

{# @block content The separator icon between breadcrumb items, defaults to a chevron. #}
&lt;li
    data-slot=&quot;breadcrumb-separator&quot;
    role=&quot;presentation&quot;
    aria-hidden=&quot;true&quot;
    class=&quot;{{ (&#039;[&amp;&gt;svg]:size-3.5 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content -%}
        &lt;twig:ux:icon name=&quot;lucide:chevron-right&quot; class=&quot;rtl:rotate-180&quot; /&gt;
    {%- endblock %}
&lt;/li&gt;

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.

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

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

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

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

<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

`<twig:Breadcrumb>`

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

`<twig:Breadcrumb:Item>`

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

`<twig:Breadcrumb:Link>`

Block	Description
`content`	The clickable link text.

`<twig:Breadcrumb:List>`

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

`<twig:Breadcrumb:Page>`

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

`<twig:Breadcrumb:Separator>`

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