Markdown docs
Breadcrumbs
This is the Twig implementation of the Breadcrumbs component.
Basic example usage:
{% set items = [
{
title: 'Root',
url: '#rootUrl',
},
{
title: 'Category',
url: '#categoryUrl',
},
{
title: 'Subcategory',
url: '#subcategoryUrl',
},
{
title: 'Current page',
url: '#currentUrl',
},
] %}
<Breadcrumbs goBackTitle="Back" items={ items } />Without lexer:
{% embed "@spirit/breadcrumbs.twig" with { props: {
goBackTitle: "Go back",
items: items
}} %}{% endembed %}Example of custom usage:
<Breadcrumbs>
<ol>
<li class="d-none d-tablet-flex">
<Link href="#rootUrl" color="primary" underlined="always">Root</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#categoryUrl" color="primary" underlined="always">Category</Link>
</li>
<li class="d-tablet-none">
<Link href="#subcategoryUrl" color="primary" underlined="always">Custom go back link</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#subcategoryUrl" color="primary" underlined="always">Subcategory</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#currentUrl" color="secondary" aria-current="page">Current page</Link>
</li>
</ol>
</Breadcrumbs>Without lexer:
{% embed "@spirit/breadcrumbs.twig" with { props: {
elementType: 'nav'
}} %}
{% block content %}
<li class="d-none d-tablet-flex">
<Link href="#rootUrl" color="primary" underlined="always">Root</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#categoryUrl" color="primary" underlined="always">Category</Link>
</li>
<li class="d-tablet-none">
<Link href="#subcategoryUrl" color="primary" underlined="always">Custom go back link</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#subcategoryUrl" color="primary" underlined="always">Subcategory</Link>
</li>
<li class="d-none d-tablet-flex">
<Link href="#currentUrl" color="secondary" aria-current="page">Current page</Link>
</li>
{% endblock %}
{% endembed %}Breadcrumbs
The Breadcrumbs component works with breadcrumb items passed from parent and renders the content by itself or its content can be overridden by any custom block content.
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| elementType | string | nav | ✕ | HTML tag to render |
| goBackTitle | string | — | ✕ | Title/translation for backlink to previous page on mobile. It's required to be set when items are present. If the items property is not passed and the link tree is constructed manually within the children, the backlink needs to be included there as well. |
| items | array | [] | ✕ | Navigation menu items |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
BreadcrumbsItem
Use the BreadcrumbsItem component for the ordered list as the component's children instead of passing the breadcrumb items array via props:
<Breadcrumbs>
{% for item in items %}
<BreadcrumbsItem isCurrent={ loop.last } href={ item.url }>
{{ item.title }}
</BreadcrumbsItem>
{% endfor %}
</Breadcrumbs>API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| href | string | — | ✕ * | URL, if not set, the item is rendered as a plain text |
| iconNameEnd | string | chevron-right | ✕ | Icon name at the end of the item |
| iconNameStart | string | chevron-left | ✕ | Icon name at the start of the item |
| isCurrent | boolean | false | ✕ | Whether is the item the current page |
| isGoBackOnly | boolean | false | ✕ | Whether should be displayed in go back mode |
| UNSAFE_className | string | — | ✕ | Wrapper custom class name |
| UNSAFE_style | CSSProperties | — | ✕ | Wrapper custom style |
(*) Optional only for the current page.
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
Dealing with long titles
When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers. Twig has an implementation of text truncating using u filter. Please see the documentation for more details.
{{ 'Lorem ipsum'|u.truncate(8, '…') }}Additional option is to use helper class text-truncate with defined width.