Breadcrumbs

Interactive

See Breadcrumbs in Storybook for every variant, with live controls.

The path to the current page.

import { Breadcrumbs } from "@kairosis/eidos";

<Breadcrumbs
  items={[
    { id: "home", label: "Workspace", icon: "house" },
    { id: "services", label: "Services" },
    { id: "api", label: "api-gateway" },
  ]}
  onNavigate={go}
/>;

Props

Prop	Type	Default	Description
items	Crumb[]	—	Required. Root first, current page last
onNavigate	(id: string) => void	—	Fires for any crumb except the last

Crumb is { id, label, icon? }.

Guidelines

• The last item is the current page — it renders as plain text with aria-current="page", not as a button, and never fires onNavigate. Always include it.
• Chevron separators are decorative and drawn between items automatically.
• Keep labels short — this is a path, not a description.