Breadcrumb

@wmcadigital/ui-breadcrumb

Breadcrumb styles and markup patterns to show page hierarchy and aid navigation.

Install

pnpm add @wmcadigital/ui-breadcrumb

What this package provides

• Compiled CSS at dist/styles/main.css implementing the .ds-breadcrumb block.
• SCSS source at src/styles/main.scss with tokens and responsive helpers.
• Class-based markup patterns for accessible breadcrumb trails.

Markup

Use a nav landmark with aria-label="Breadcrumb" and an ordered list. Mark the current page with aria-current="page".

<nav class="ds-breadcrumb" aria-label="Breadcrumb">
  <ol class="ds-breadcrumb__list">
    <li class="ds-breadcrumb__list-item"><a class="ds-breadcrumb__link" href="/">Home</a></li>
    <li class="ds-breadcrumb__list-item">
      <a class="ds-breadcrumb__link" href="/section">Section</a>
    </li>
    <li class="ds-breadcrumb__list-item" aria-current="page">
      <span class="ds-breadcrumb__link ds-breadcrumb__link--current">Page</span>
    </li>
  </ol>
</nav>

Notes:

• The styles insert a visual separator (>) before every list item except the first via CSS ::before.
• Use .ds-breadcrumb--mobile-app for app-specific variants (the SCSS includes a helper that hides/shows the breadcrumb at certain breakpoints).

Accessibility

• Always wrap breadcrumbs in a nav with aria-label to provide a landmark for assistive technologies.
• Use aria-current="page" on the current item; avoid making the current page a link.
• Use semantic ordered lists (<ol>) to convey hierarchy.

Customisation

• Colour and spacing use design tokens (get-color(...), $size-* variables). Override tokens to fit your theme.
• The separator content is generated by CSS; change the symbol in src/styles/main.scss if you need a different separator.

Development

• SCSS source: src/styles/main.scss.
• Build the package from the monorepo root:

pnpm -w -r run build

• Linting:

pnpm -w -r run lint