Skip to content
PHIL
Français

Breadcrumb

component

Where the page sits in the site.

Preview

Light

Code 
<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:Page>Events</twig:Breadcrumb:Page></twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Dark

Code 
<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:Page>Events</twig:Breadcrumb:Page></twig:Breadcrumb:Item>
    </twig:Breadcrumb:List>
</twig:Breadcrumb>

Installation

php bin/console ux:install breadcrumb --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
label string 'Breadcrumb' The name of the navigation for screen readers.

Accessibility

A nav named by label, an ordered list; the current page says aria-current="page".

Files to copy

templates/components/Breadcrumb.html.twig 
{%- props
    ## string The name of the navigation for screen readers.
    label = 'Breadcrumb'
-%}
<nav data-slot="breadcrumb"{{ attributes.defaults({class: 'isBreadcrumb', 'aria-label': label}) }}>
{##- The breadcrumb structure, typically a `Breadcrumb:List`. -#}
{%- block content %}{% endblock -%}
</nav>
templates/components/Breadcrumb/Ellipsis.html.twig 
{%- props
    ## string What screen readers read instead of the ellipsis.
    text = 'More'
-%}
<span data-slot="breadcrumb-ellipsis"{{ attributes.defaults({class: 'isBreadcrumbEllipsis'}) }}><span aria-hidden="true">&hellip;</span><span class="isVisuallyHidden">{{ text }}</span></span>
templates/components/Breadcrumb/Item.html.twig 
<li data-slot="breadcrumb-item"{{ attributes.defaults({class: 'isBreadcrumbItem'}) }}>
{##- The breadcrumb item content, typically a `Breadcrumb:Link` or `Breadcrumb:Page`. -#}
{%- block content %}{% endblock -%}
</li>
templates/components/Breadcrumb/Link.html.twig 
<a data-slot="breadcrumb-link"{{ attributes.defaults({class: 'isBreadcrumbLink'}) }}>
{##- The clickable link text. -#}
{%- block content %}{% endblock -%}
</a>
templates/components/Breadcrumb/List.html.twig 
<ol data-slot="breadcrumb-list"{{ attributes.defaults({class: 'isBreadcrumbList'}) }}>
{##- The list of breadcrumb items, typically multiple `Breadcrumb:Item` components. -#}
{%- block content %}{% endblock -%}
</ol>
templates/components/Breadcrumb/Page.html.twig 
<span data-slot="breadcrumb-page" aria-current="page"{{ attributes.defaults({class: 'isBreadcrumbPage'}) }}>
{##- The current page text (non-clickable). -#}
{%- block content %}{% endblock -%}
</span>
templates/components/Breadcrumb/Separator.html.twig 
<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true"{{ attributes.defaults({class: 'isBreadcrumbSeparator'}) }}>
    {##- The separator between breadcrumb items, a chevron by default. -#}
    {%- block content -%}&rsaquo;{%- endblock -%}
</li>