Components

Breadcrumbs

Overview

Overview

When to use

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.

When not to use

Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.

If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.

Principles

Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.

The breadcrumbs should start with your ‘home’ page and end with the parent section of the current page.

On mobile devices breadcrumbs may be configured to only show the first and last items.

To do this, add a tds-breadcrumbs--collapse-on-mobile class to the outer <div> element of the component source.

Usage

Usage guidelines

Style

Use neutral color for breadcrumbs links.

Do

Don't

Current page title

Do not include the current page title in the breadcrumbs.

Do

Don't

Truncation

On smaller screens, use truncation. Try to avoid multi-line breadcrumbs.

Do

Don't

Accessibility

Keyboard

Breadcrumbs are ordinary links: Tab moves from one to the next and Enter follows it. There is no script and no custom key handling.

Screen readers

The breadcrumbs are a nav landmark named through aria-label, so screen reader users can jump to them from the landmarks list. The links are in an ordered list (ol), which announces how many levels there are and where each item sits. The last item is the current page and carries aria-current="page", announced as "current page". The ellipsis shown in the collapsed mobile layout is aria-hidden="true", and the separators come from CSS, so neither is read.

Using the example

• The landmark name defaults to "breadcrumb". On Estonian pages pass an Estonian name, for example ariaLabel="Asukoht". Do not include the word "navigation", which screen readers already announce.
• If a page has more than one breadcrumb trail, give each a distinct ariaLabel.
• Keep item labels identical to the titles of the pages they link to, so users recognise where they are.
• Mark only the current page with aria-current="page". The template does this for the last item.
• Render breadcrumbs once, before the main content, in the same place on every page.