Breadcrumb

A trail of links from the home page to the current page.

<twig:Tabler:Breadcrumb>
    <twig:Tabler:Breadcrumb:Item href="/">Home</twig:Tabler:Breadcrumb:Item>
    <twig:Tabler:Breadcrumb:Item href="/users">Users</twig:Tabler:Breadcrumb:Item>
    <twig:Tabler:Breadcrumb:Item active>Jane Cooper</twig:Tabler:Breadcrumb:Item>
</twig:Tabler:Breadcrumb>

<nav aria-label="breadcrumbs">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/users">Users</a></li>
        <li class="breadcrumb-item active" aria-current="page">Jane Cooper</li>
    </ol>
</nav>

An item with an href renders a link. Mark the current page active: it renders as plain text with aria-current="page", even with an href.

Separators

separator sets the character between items: default (a slash), dots, arrows or bullets:

{% for separator in ['default', 'dots', 'arrows', 'bullets'] %}
    <twig:Tabler:Breadcrumb separator="{{ separator }}">
        <twig:Tabler:Breadcrumb:Item href="/">Home</twig:Tabler:Breadcrumb:Item>
        <twig:Tabler:Breadcrumb:Item href="/invoices">Invoices</twig:Tabler:Breadcrumb:Item>
        <twig:Tabler:Breadcrumb:Item active>INV-0142</twig:Tabler:Breadcrumb:Item>
    </twig:Tabler:Breadcrumb>
{% endfor %}

<nav aria-label="breadcrumbs">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/invoices">Invoices</a></li>
        <li class="breadcrumb-item active" aria-current="page">INV-0142</li>
    </ol>
</nav>
<nav aria-label="breadcrumbs">
    <ol class="breadcrumb breadcrumb-dots">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/invoices">Invoices</a></li>
        <li class="breadcrumb-item active" aria-current="page">INV-0142</li>
    </ol>
</nav>
<nav aria-label="breadcrumbs">
    <ol class="breadcrumb breadcrumb-arrows">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/invoices">Invoices</a></li>
        <li class="breadcrumb-item active" aria-current="page">INV-0142</li>
    </ol>
</nav>
<nav aria-label="breadcrumbs">
    <ol class="breadcrumb breadcrumb-bullets">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/invoices">Invoices</a></li>
        <li class="breadcrumb-item active" aria-current="page">INV-0142</li>
    </ol>
</nav>

Muted

muted gives the links the color of the text around them:

<twig:Tabler:Breadcrumb muted>
    <twig:Tabler:Breadcrumb:Item href="/">Home</twig:Tabler:Breadcrumb:Item>
    <twig:Tabler:Breadcrumb:Item href="/deployments">Deployments</twig:Tabler:Breadcrumb:Item>
    <twig:Tabler:Breadcrumb:Item active>#1284</twig:Tabler:Breadcrumb:Item>
</twig:Tabler:Breadcrumb>

<nav aria-label="breadcrumbs">
    <ol class="breadcrumb breadcrumb-muted">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/deployments">Deployments</a></li>
        <li class="breadcrumb-item active" aria-current="page">#1284</li>
    </ol>
</nav>

Props

Breadcrumb:

Prop	Type	Default	Description
`separator`	string	`'default'`	`default` `dots` (`breadcrumb-dots`) `arrows` (`breadcrumb-arrows`) `bullets` (`breadcrumb-bullets`)
`muted`	bool	`false`	Muted links (`breadcrumb-muted`)

The component renders a <nav aria-label="breadcrumbs"> around the list; other attributes go to the <ol class="breadcrumb">.

Breadcrumb:Item:

Prop	Type	Default	Description
`href`	string?	`null`	Link target; without it, the item is plain text
`active`	bool	`false`	The current page: plain text, with `aria-current="page"`

Other attributes go to the <li class="breadcrumb-item">.

Sub-components

Component	Renders
`Breadcrumb:Item`	`<li class="breadcrumb-item">`, with an `<a>` when it links