Brand logoentauri

Add this component

npx zentauri-ui add breadcrumb

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

No extra runtime dependency beyond React and the package peers already covered in Installation.

Navigation

Breadcrumb navigation

Breadcrumbs communicate hierarchy and help users orient themselves in multi-level navigation. Compose list items, links, separators, and the current page marker to match your IA.

Examples

Custom separator

Small separators

Breadcrumb variants playground

Pick a scenario and appearance to preview the breadcrumb live. Toggle Show output / Show code and the snippet updates to match the selected variant.

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

CSS variable overrides

Breadcrumb CSS variables

Override these breadcrumb variables on :root, a theme selector, or a component wrapper.

78 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-breadcrumb-default-fg: oklch(44.6% 0.043 257.281);
  --zui-breadcrumb-muted-fg: oklch(55.4% 0.046 257.417);
  --zui-breadcrumb-blue-fg: #2563eb;
  --zui-breadcrumb-cyan-fg: #0891b2;
  --zui-breadcrumb-green-fg: #16a34a;
  --zui-breadcrumb-lime-fg: #65a30d;
  --zui-breadcrumb-mint-fg: #10b981;
  --zui-breadcrumb-ocean-fg: #0284c7;
  --zui-breadcrumb-sapphire-fg: #1d4ed8;
  --zui-breadcrumb-lavender-fg: #8b5cf6;
  --zui-breadcrumb-ruby-fg: #be123c;
  --zui-breadcrumb-red-fg: #dc2626;
  --zui-breadcrumb-slate-fg: #475569;
  --zui-breadcrumb-zinc-fg: #52525b;
  --zui-breadcrumb-stone-fg: #57534e;
  --zui-breadcrumb-royal-fg: #4338ca;
  --zui-breadcrumb-electric-fg: #0ea5e9;
  --zui-breadcrumb-forest-fg: #166534;
  --zui-breadcrumb-sunset-fg: #ea580c;
  --zui-breadcrumb-magenta-fg: #c026d3;
  --zui-breadcrumb-crimson-fg: #b91c1c;
  --zui-breadcrumb-aqua-fg: #0f766e;
  --zui-breadcrumb-plum-fg: #7e22ce;
  --zui-breadcrumb-sky-fg: oklch(44.3% 0.11 240.79);
  --zui-breadcrumb-rose-fg: oklch(45.5% 0.188 13.697);
  --zui-breadcrumb-purple-fg: oklch(43.8% 0.218 303.724);
  --zui-breadcrumb-pink-fg: oklch(45.9% 0.187 3.815);
  --zui-breadcrumb-orange-fg: oklch(47% 0.157 37.304);
  --zui-breadcrumb-yellow-fg: oklch(47.6% 0.114 61.907);
  --zui-breadcrumb-teal-fg: oklch(43.7% 0.078 188.216);
  --zui-breadcrumb-indigo-fg: oklch(39.8% 0.195 277.366);
  --zui-breadcrumb-emerald-fg: oklch(43.2% 0.095 166.913);
  --zui-breadcrumb-gray-fg: oklch(27.8% 0.033 256.848);
  --zui-breadcrumb-amber-fg: oklch(47.3% 0.137 46.201);
  --zui-breadcrumb-violet-fg: oklch(43.2% 0.232 292.759);
  --zui-breadcrumb-link-ring-focus: #0000004d;
  --zui-breadcrumb-link-ring-offset-focus: oklch(98.4% 0.003 247.858);
  --zui-breadcrumb-page-fg: oklch(27.9% 0.041 260.031);
  --zui-breadcrumb-separator-fg: oklch(70.4% 0.04 256.788);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-breadcrumb-default-fg-dark: oklch(86.9% 0.022 252.894);
  --zui-breadcrumb-muted-fg-dark: oklch(70.4% 0.04 256.788);
}

Overview

The API follows a small compound pattern: list, item, link, page, and separator. Keep markup shallow and prefer tokens for spacing between items.

Common use cases

  • E-commerce category → product trails.
  • Admin consoles with nested settings routes.
  • Docs sites with section and page context.
  • Marketing sites linking back to primary hubs.

FAQ

Does the breadcrumb work with the Next.js App Router?

Yes. Use standard anchor hrefs or Next.js Link by composing your own link component inside BreadcrumbLink when you need client navigation.

How should I label the nav element?

The root nav defaults to aria-label="Breadcrumb". Override it when you localize strings or need a more specific name for assistive technologies.