Breadcrumbs

A wrapping breadcrumb trail of navigation links with chevron separators and automatic current-page semantics.

Import

import { Breadcrumbs } from "@hyzer-labs/ui"

Demo

const items: BreadcrumbItem[] = [
	{ label: 'Home', href: '/docs' },
	{ label: 'Components', href: '/docs/components/button' },
	{ label: 'Button' } // current page, no href, renders as text
];

<Breadcrumbs {items} />

The trail is a cluster-style wrapping row. Each separator rides with its crumb, so a wrapped line never starts with one. The narrow container below shows it.

<!-- The trail is a wrapping flex row: long paths
     break onto new lines; separators stay attached to their crumb -->
<Breadcrumbs {items} />

<Breadcrumbs {items}>
	{#snippet separator()}<span>/</span>{/snippet}
</Breadcrumbs>

Props

Name	Type	Default	Note
`items`	`BreadcrumbItem[]`	`—`	Required. See BreadcrumbItem below.
`ariaLabel`	`string`	`'Breadcrumb'`
`separator`	`Snippet`	`—`	Replaces the chevron between items; rendered aria-hidden.
`class`	`string`	`—`	Merged after the hz-breadcrumbs class.

`BreadcrumbItem`

Name	Type	Default	Note
`label`	`string`	`—`	Required.
`href`	`string`	`—`	Omit on the last item to render the current page as plain text.
`external`	`boolean`	`—`	Adds the external-link treatment.
`ariaCurrent`	`'page' \| 'step' \| 'true'`	`—`	The last item gets aria-current="page" automatically; set this to override.

Theme hooks

What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.

Root class: .hz-breadcrumbs

Data attributes

Hook	Values	Styles
`[aria-current]`	`'page'`	Not a data hook — Breadcrumbs stamps no data-*. The last crumb carries aria-current, and that is the only state selector on offer.

Part classes

Hook	Values	Styles
`.hz-breadcrumbs-current`	`child element`	The final crumb when it has no href (plain text rather than a link).
`.hz-breadcrumbs-separator`	`child element`	The aria-hidden separator wrapper; sizes its icon to 1em.

Breadcrumbs renders a <nav aria-label="Breadcrumb"> landmark wrapping an ordered list. The last item is the current page: it gets aria-current="page" automatically, and renders as plain text when it has no href. Separators are decorative and aria-hidden.