Components

Breadcrumbs

CSS-only trail navigation from wckd-ui-components.css. Use an ordered or unordered list with class .breadcrumbs and list items in route order. For a home affordance, use a.breadcrumbs-home with a wckd-icon + house SVG and aria-label="Home" (no visible text required).

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing 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