Breadcrumbs

Shows where a page sits and links to each level above it. With moreLabel set, long trails fold their middle levels into a menu.

Breadcrumbs

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Breadcrumbs

Dark theme, Breadcrumbs

High contrast theme, Breadcrumbs

UsageLink to the section Usage

tsx

import { Breadcrumbs } from '@skribly/ui/navigation'

tsx

<Breadcrumbs label="Breadcrumb" moreLabel="Show hidden levels" items={[
  { id: 'home', label: 'Home', href: '/' },
  { id: 'docs', label: 'Docs', href: '/docs' },
  { id: 'install', label: 'Install' }
]} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A nav landmark with an ordered list; the last item is the current page with aria-current="page".
The fold button opens a menu of the hidden levels, navigable with arrow keys and closed with Escape.
Separators are hidden from screen readers.
Items wrap on narrow screens and long labels truncate while keeping their full name.

This demo runs through axe in all three themes on every test run. See what the tests check.