Breadcrumb

composant

Where the page sits in the site.

Aperçu

Clair

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>

Sombre

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

Propriétés

Propriété	Type	Par défaut	Description
`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".

Fichiers à copier

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>