Breadcrumb

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

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

2. If necessary, install the following Composer dependencies:

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

3. And the most important, enjoy!