Skip to main content

Breadcrumb

Breadcrumbs indicate the current page’s location within a navigational hierarchy, helping the user understand where they are in relation to the rest of the site. They afford one-click access to higher site levels.

Example

  1. Parent
  2. Section
  3. Child
  4. Current
Breadcrumb on a default theme

Best practices

Do

  • Breadcrumbs go at the top of a column above the page heading.

Don’t

  • Don’t use breadcrumbs as a primary way to navigate to other related pages. Use link navigation instead.

Also known as

Breadcrumb trails

Related

Hyperlink
Link navigation

Accessibility

  • Wrap the ordered list in a nav tag for improved semantic meaning and accessibility.

Development

  • Schema definition: The breadcrumb schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Breadcrumb

<nav>
    <ol class="c-breadcrumb">
        <li>
            <a class="c-hyperlink" href="#">Parent</a>
        </li>
        <li>
            <a class="c-hyperlink" href="#">Section</a>
        </li>
        <li>
            <a class="c-hyperlink" href="#">Child</a>
        </li>
        <li>Current</li>
    </ol>
</nav>