Breadcrumb

When to use it

The Breadcrumb component is used for showing a "breadcrumb trail" of the page hierarchy.

What it looks like

INFO

The current/selected page (i.e. the last list item) is also a link but will not be styled as such.

Code examples

<ol class="c-breadcrumb">
    <li class="c-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/" class="c-breadcrumb__link" itemprop="item">
            <span itemprop="name">Tickster</span>
            <meta itemprop="position" content="1" />
        </a>
    </li>
    <li class="c-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/services/" class="c-breadcrumb__link" itemprop="item">
            <span itemprop="name">Services</span>
            <meta itemprop="position" content="2" />
        </a>
    </li>
    <li class="c-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="/services/support/" class="c-breadcrumb__link" itemprop="item" aria-current="page">
            <span itemprop="name">Support</span>
            <meta itemprop="position" content="3" />
        </a>
    </li>
</ol>

Accessibility notes

Ensure that the breadcrumb trail is marked up as an ordered list (<ol>) and use clear and descriptive text for each breadcrumb link. Provide a visual indicator for the current page, such as bold text and/or a aria-current="page" attribute.

SEO notes

The attributes itemprop, itemscope, and itemtype are used to add semantic meaning to the HTML elements, making the content more understandable to search engines and other parsers. These attributes are part of the Schema.org vocabulary, which helps improve SEO by providing structured data.

• itemprop: Defines the properties of the item. For example, itemprop="name" specifies that the content is the name of the item.
• itemscope: Indicates that the element is a scoped item, meaning it contains properties defined by itemprop.
• itemtype: Specifies the type of item, using a URL that points to a Schema.org type definition. For example, itemtype="https://schema.org/ListItem" indicates that the item is a list item.

Using these attributes helps search engines better understand the hierarchy and relationships within your content, potentially improving your site's search ranking.