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 items={ items } />

Without lexer:

                                                
                                                {% embed "@spirit/breadcrumbs.twig" with { props: {
                                                    items: items
                                                }} %}{% endembed %}

Example of custom usage:

                                                
                                                <Breadcrumbs>
                                                  <ol>
                                                    <li class="d-none d-tablet-flex">
                                                      <Link href="#rootUrl" color="primary" isUnderlined>Root</Link>
                                                    </li>
                                                    <li class="d-none d-tablet-flex">
                                                      <Link href="#categoryUrl" color="primary" isUnderlined>Category</Link>
                                                    </li>
                                                    <li class="d-tablet-none">
                                                      <Link href="#subcategoryUrl" color="primary" isUnderlined>Custom go back link</Link>
                                                    </li>
                                                    <li class="d-none d-tablet-flex">
                                                      <Link href="#subcategoryUrl" color="primary" isUnderlined>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'
                                                    goBackTitle: 'Custom go back link title'
                                                }} %}
                                                    {% block content %}
                                                      <li class="d-none d-tablet-flex">
                                                        <Link href="#rootUrl" color="primary" isUnderlined>Root</Link>
                                                      </li>
                                                      <li class="d-none d-tablet-flex">
                                                        <Link href="#categoryUrl" color="primary" isUnderlined>Category</Link>
                                                      </li>
                                                      <li class="d-tablet-none">
                                                        <Link href="#subcategoryUrl" color="primary" isUnderlined>Custom go back link</Link>
                                                      </li>
                                                      <li class="d-none d-tablet-flex">
                                                        <Link href="#subcategoryUrl" color="primary" isUnderlined>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 back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, backlink is to be created within children property. Optional DEPRECATED Will be required in the next major version.
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.