Breadcrumbs

Where the page sits, as a trail of links ending in the page itself.

import { Breadcrumbs } from '@zitdevs/ui';

Examples

1. Home/
2. Services/
3. IT audit

On the primary band, and in Spanish:

1. Inicio/
2. Legal/
3. Cookies

import * as es from '@zitdevs/ui/labels/es';

<Breadcrumbs
  tone="primary"
  labels={es.breadcrumbs}
  items={[{ label: 'Inicio', href: '/es' }, { label: 'Legal' }, { label: 'Cookies' }]}
/>;

Through a router’s link, such as Next’s Link:

1. Home/
2. Services/
3. IT audit

import Link from 'next/link';

<Breadcrumbs linkAs={Link} items={items} />;

Props

Prop	Type	Default	Notes
items	readonly { label; href? }[]	required	Root first. The last is the current page, never linked.
tone	'light' | 'primary'	'light'	primary on the primary hero band.
labels	Partial<BreadcrumbsLabels>	English	{ breadcrumbs }, the landmark’s name. es.breadcrumbs from labels/es.
linkAs	LinkComponent	'a'	Renders each ancestor’s link: Next’s Link, or any router’s.
ref	Ref<HTMLElement>	—	The <nav>.
className	string	—	Placement.
anything else	<nav> attributes	—	Except aria-label, which labels sets.

Exported types: BreadcrumbsProps, BreadcrumbItem, BreadcrumbsLabels, and the label sets breadcrumbsLabels.

Accessibility

• A <nav> landmark named “Breadcrumb” (“Ruta de navegación” in Spanish), holding an ordered list.
• The last item is the current page: aria-current="page" and never a link, since a link to the page itself does nothing.
• An ancestor with no page of its own has no href and reads as plain text.
• The separators are hidden from assistive technology; the list already says where each step ends.
• Each link draws the kit’s focus ring itself.

Without JavaScript

It needs none: links and a list. It holds no state and renders as a Server Component, through a router’s link too.

Theming

muted, ink and border-strong (the separators) on a light field; on-primary on the primary band; the focus ring.