breadcrumb

Hierarchical navigation trail.

status: stable js: none support: baseline

Preview

Markup

<nav class="breadcrumb"><span class="breadcrumb-item"><a class="breadcrumb-link" href="#">A</a></span><span class="breadcrumb-item"><span class="breadcrumb-current">B</span></span></nav>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/breadcrumb.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add breadcrumb

Accessibility

nav landmark + aria-label; aria-current=page on the current item

Classes

.breadcrumb .breadcrumb-item .breadcrumb-link .breadcrumb-current .breadcrumb-ellipsis

Dependencies

base/tokens