Breadcrumbs

Use breadcrumbs module to insert breadcrumbs on the page that provide links for each page that leads to the current location on a website and additionally display the current page.

Configuration parameters

homePageLinkName

string Defines the name of the first breadcrumb linking to a home page will be the name of the shop or home page. Supported values are storeName or homePage.

Module source code

{% from "@macros/icon.twig" import icon %}

{% set breadcrumbs = ObjectApi.getBreadcrumbs() %}
{% set shopInfo = ObjectApi.getShopInfo() %}

{% if breadcrumbs|length > 1 %}
    <nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
        <ol class="breadcrumbs__list">
            {% for link in breadcrumbs %}
                <li class="breadcrumbs__list-item" {% if loop.last %} aria-current="page" {% endif %}>
                    {% if not loop.first %}
                        {{ icon('icon-chevron-right', {
                            ariaHidden: 'true',
                            classNames: ['breadcrumbs__list-item-icon']
                        }) }}
                    {% endif %}

                    {% if loop.last %}
                        <span class="link link_disabled breadcrumbs__list-item-link_disabled">{{ link.title | raw }}</span>
                    {% else %}
                        <a class="link breadcrumbs__list-item-link" href="{{ link.url.absolute }}"
                           title="{{ translate('Go to') }} {{ link.title | raw }}">
                            {% if loop.first and moduleConfig.homePageLinkName == "storeName" %}
                                {{ shopInfo.name }}
                            {% else %}
                                {{ link.title | raw }}
                            {% endif %}
                        </a>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endif %}

{% set itemListElement = breadcrumbs|map((link, index) => {
    "@type": "ListItem",
    position: index,
    item: {
        "@id": link.url.absolute,
        name: link.title | raw
    }
}) %}

{% set breadcrumbsJsonLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    name: "Breadcrumbs",
    itemListElement: itemListElement
} %}

<script type="application/ld+json">{{ breadcrumbsJsonLd | json_encode | raw }}</script>

The module uses JSON-LD and Microdata from schema.org to optimize search results in browsers.

Macros reference

• icon

Used Object Api methods

• getBreadcrumbs()
• getShopInfo()

Used styles

• Breadcrumbs
• Links

Module configuration schema

[
  {
    "state": "unfolded",
    "label": "General settings",
    "elements": [
      {
        "type": "radio",
        "name": "homePageLinkName",
        "label": "Name of the link that directs you to the home page:",
        "defaultValue": "storeName",
        "hint": "Clickable text that displays as the first link in breadcrumbs and redirects to the home page.",
        "options": {
          "radioOptions": [
            {
              "key": "storeName",
              "label": "Store name"
            },
            {
              "key": "homePage",
              "label": "Home page"
            }
          ]
        }
      }
    ]
  }
]