Components

Breadcrumbs

Trail navigation: ol.breadcrumbs or ul.breadcrumbs with one li per segment. Current page: <span aria-current="page"> (not a link). Optional home icon: a.breadcrumbs-home with aria-label and decorative SVG marked aria-hidden.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Basic breadcrumb trail

Use a list with .breadcrumbs; the current location is usually non-link text with aria-current.

  2. Components
  3. Breadcrumbs

Markup

<ol class="breadcrumbs no-bullets">
  <li>
    <a href="/" class="breadcrumbs-home" aria-label="Home">
      <span class="wckd-icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      </span>
    </a>
  </li>
  <li><a href="/docs">Docs</a></li>
  <li><span aria-current="page">Current page</span></li>
</ol>

When to use

  • Docs and app shells where users need orientation within nested routes.
  • Commerce category and product paths where backtracking is common.

Implementation notes

  • Chevrons are rendered with li + li::before in CSS.
  • Icon-only home: keep aria-label="Home" (or the site name) on a.breadcrumbs-home; hide the decorative SVG with aria-hidden on the wrapper.
  • Use true route hierarchy order to keep breadcrumbs meaningful for assistive tech.

Developer checklist

  • Render breadcrumb items in strict parent-to-child route order.
  • Keep only the current page marked with aria-current="page".
  • Use concise labels so the trail remains readable on small screens.

← All components