Skip to content

role navigation

Breadcrumb draft v0.1.0

Shows where the current page sits in a hierarchy, with a link to each level above it.

A breadcrumb lists the pages above the current one, from the top of the hierarchy down, each as a link, and ends with the current page, which is not a link. It tells people where they are and lets them go up one or several levels in one activation. It is a navigation landmark of its own, separate from the main navigation.

Playground

JSON array of item entries ("part": "item" for a item).

HTML 
<nav class="ds-breadcrumb" aria-label="Breadcrumb" data-size="medium">
  <ol class="ds-breadcrumb__list" data-part="list">
    <li class="ds-breadcrumb__item" data-part="item">
      <a class="ds-breadcrumb__link" data-part="link" href="#">Home</a>
      <span
        class="ds-breadcrumb__separator"
        data-part="separator"
        aria-hidden="true"
      >chevron_right</span>
    </li>
    <li class="ds-breadcrumb__item" data-part="item">
      <a
        class="ds-breadcrumb__link"
        data-part="link"
        href="#"
      >Projects</a>
      <span
        class="ds-breadcrumb__separator"
        data-part="separator"
        aria-hidden="true"
      >chevron_right</span>
    </li>
    <li class="ds-breadcrumb__item" data-part="item">
      <a
        class="ds-breadcrumb__link"
        data-part="link"
        href="#"
      >Quantum Design System</a>
      <span
        class="ds-breadcrumb__separator"
        data-part="separator"
        aria-hidden="true"
      >chevron_right</span>
    </li>
    <li class="ds-breadcrumb__item" data-part="item">
      <span
        class="ds-breadcrumb__link"
        data-part="link"
        aria-current="page"
      >Settings</span>
    </li>
  </ol>
</nav>