Breadcrumbs

#Example

<nav aria-label="Breadcrumb"><ol class="breadcrumbs"><li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Home</a></li><li><a href="#">Projects</a></li><li><a href="#">Acme Web</a></li><li><span aria-current="page">Settings</span></li></ol></nav>

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.breadcrumbs :where(svg) {
  width: 1rem;
  height: 1rem;
}

.breadcrumbs :where(a):hover {
  color: var(--foreground);
}

.breadcrumbs-slash > :where(li + li)::before {
  content: "/";
  width: auto;
  height: auto;
  background: none;
  mask: none;
}

.breadcrumbs-boxed {
  width: fit-content;
  padding: .375rem .875rem;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-full);
  background: var(--surface);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Breadcrumbs: start from the base class, then add modifiers -->
<nav aria-label="Breadcrumb"><ol class="breadcrumbs"><li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Home</a></li><li><a href="#">Projects</a></li><li><a href="#">Acme Web</a></li><li><span aria-current="page">Settings</span></li></ol></nav>

#Accessibility

• Wrap navigation in nav with an aria-label when there is more than one on the page, and mark the current link with aria-current="page".
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components