Breadcrumbs

The trail from the home page to the current one, each step a link, with a separator between them that is seen and not read.

Example

View Code 
<nav class="breadcrumbs" aria-label="Breadcrumb">
    <ol role="list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Docs</a></li>
        <li aria-current="page">Nav</li>
    </ol>
</nav>

When to use it

Deep pages: a doc inside a section inside a manual, a product inside a category. The trail says where the page sits and gives one click to each level above it. A site two levels deep does not need one.

How it works

A wrapping row of steps at a small gap. Every step after the first is preceded by a separator drawn by CSS from --yeti-breadcrumbs-separator, a slash by default, which a theme may change to a chevron. Links are muted until hovered; the current step is the text colour in a strong weight. data-size steps the text.

<nav class="breadcrumbs" aria-label="Breadcrumb" data-size="sm">
    <ol role="list">
        <li><a href="#">Home</a></li>
        <li aria-current="page">Docs</li>
    </ol>
</nav>

Accessibility

Label the nav aria-label="Breadcrumb", so it is announced as one. The last step carries aria-current="page", as plain text or as a link to the page itself. The separators are generated content with empty alternative text (content: "/" / ""), so a screen reader hears the steps and nothing between them. role="list" on the ol keeps it a list where the reset removes the markers.

Attributes

Attribute Type Values Default Description
data-size enum sm, md, lg md The text step.

Children

  • > ol: exactly 1. The trail, in order, with role="list".
  • li: at least 2. A step: a link, or plain text with aria-current="page" for the last.

Tokens

Token Description
--yeti-breadcrumbs-separator The string between steps.
--yeti-color-text-muted The links and the separator.
--yeti-text-md Text size when data-size is absent.
--yeti-space-sm The space step when data-size is absent.
--yeti-space-xs Gap between steps, and between a step and its separator.
--yeti-color-text The current step, and a link under the pointer.
--yeti-weight-strong Weight of the current step.
Internal tokens (may change between minor versions) - `--_yeti-size-text` - `--_yeti-size-space`

Accessibility

  • Required attributes: aria-label or aria-labelledby
  • Put aria-label="Breadcrumb" on the nav. The last step carries aria-current="page", as plain text or as a link to the page itself. The separators are CSS with empty alternative text, so assistive tech reads only the steps. Put role="list" on the ol.

Browser support

  • Used without guards: alternative text on generated content
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.