Breadcrumb

A breadcrumb lists the levels that lead from the top of the application to the page users are on. Every level above that page is a link, so users can go back to any of them in one step.

UsageCopy Anchor Link

import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator,
} from "@biem/ui/components/ui/breadcrumb";

export function BreadcrumbDefault() {
	return (
		<Breadcrumb>
			<BreadcrumbList>
				<BreadcrumbItem>
					<BreadcrumbLink href="/inventory">Inventory</BreadcrumbLink>
				</BreadcrumbItem>
				<BreadcrumbSeparator/>
				<BreadcrumbItem>
					<BreadcrumbLink href="/inventory/transfers">Transfers</BreadcrumbLink>
				</BreadcrumbItem>
				<BreadcrumbSeparator/>
				<BreadcrumbItem>
					<BreadcrumbPage>Transfer 4821</BreadcrumbPage>
				</BreadcrumbItem>
			</BreadcrumbList>
		</Breadcrumb>
	);
}

ExamplesCopy Anchor Link

Custom SeparatorCopy Anchor Link

Where a product already separates levels with a mark of its own, the trail repeats that mark instead of introducing a second one. The separator shows any element passed to it as children in place of its default mark, and it stays hidden from assistive technology, so screen readers announce only the levels.

With EllipsisCopy Anchor Link

Deep hierarchies, such as product categories with many levels, produce trails that would wrap over several lines. An ellipsis then takes the place of the levels that users need least for orientation, so the trail stays short and keeps the page they are on in view.

Link as ButtonCopy Anchor Link

Not every level has an address of its own, for example inside a dialog in which users drill down from a region to a single store without leaving the page. With render set to a button, a level becomes an action that the application handles, such as a return to an earlier step, and users still reach it with the keyboard.

API ReferenceCopy Anchor Link

BreadcrumbCopy Anchor Link

Breadcrumb marks the trail as navigation and labels it "breadcrumb" for assistive technology. It renders a nav and has no props of its own.

BreadcrumbListCopy Anchor Link

BreadcrumbList holds the items and the separators in order and wraps them onto the next line when they don't fit in one. It renders an ol and has no props of its own.

BreadcrumbItemCopy Anchor Link

BreadcrumbItem holds one level of the trail: a link, the page or the ellipsis. It renders an li and has no props of its own.

BreadcrumbLinkCopy Anchor Link

BreadcrumbPageCopy Anchor Link

BreadcrumbPage names the page that users are on and marks it as the current page for assistive technology. It renders a span and has no props of its own.

BreadcrumbSeparatorCopy Anchor Link

BreadcrumbEllipsisCopy Anchor Link

BreadcrumbEllipsis stands for the levels that a shortened trail leaves out. It renders a span with three dots and has no props of its own.