0build.dev
Playground

Breadcrumb

Create breadcrumbs to show users their location within a website.

Report an IssueContexts

Table of contents

Usage

The Breadcrumb component consists of links, which are aligned side by side and separated by a divider. Add the .z-breadcrumb class to a <ul> element to define the component. Use <a> elements as breadcrumb items within the list. An active state is automatically applied to the last <li> element.

To add list items without a link, use a <span> element instead of an <a>. Alternatively, disable an <a> element by adding the .z-disabled class to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.

<ul class="z-breadcrumb">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><span></span></li>
</ul>

Accessibility

In order for the Breadcrumb component to adhere to the Breadcrumb design pattern, set the appropriate WAI-ARIA roles, states and properties.

  • Contain the breadcrumb list within a nav element and set the aria-label property to describe the type of the provided navigation.
  • If the last item is the current page and a link, set the aria-current="page" property.
<nav aria-label="Breadcrumb">
  <ul class="z-breadcrumb">
    ...
  </ul>
</nav>