Zentauri UI
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 code examples

Use Show output / Show code on each row. Snippets start with a Variant line naming the scenario.

Scenario: DEFAULT SLASH SEPARATORS

Scenario: DOT SEPARATORS

Scenario: SMALL SEPARATOR SIZE

Appearance: DEFAULT

Appearance: MUTED

Appearance: SKY

Appearance: ROSE

Appearance: PURPLE

Appearance: PINK

Appearance: ORANGE

Appearance: YELLOW

Appearance: TEAL

Appearance: INDIGO

Appearance: EMERALD

Appearance: GRAY

Appearance: AMBER

Appearance: VIOLET

CSS variable overrides

Breadcrumb CSS variables

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

36 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-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);
  /* ...same variables with -dark at the end */
}

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.