Breadcrumb
breadcrumbShows a static page hierarchy with a semantic current-page marker.
Usage
Basic usage
Pass in the items array (from the root to the current page). The last item defaults to the current page and cannot be clicked.
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Component", href: "/components" },
{ label: "Breadcrumbs" },
]}
/>Custom separator
separator accepts any ReactNode (character or icon), the default is "/", and the separator is automatically added with aria-hidden.
<Breadcrumb items={items} separator={<ChevronIcon />} />Unclickable middle term
href that omits an item is rendered as neutral plain text (non-navigable ancestor) and is still not the current page.
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Archive" },
{ label: "2026 Annual Report" },
]}
/>Long path automatic line wrapping
Automatically wrap lines in a narrow container when there are a large number of items, and use the chevron separator to make it clearer.
<div className="max-w-xs">
<Breadcrumb items={longPath} separator={<ChevronIcon />} />
</div>When to use
Use Breadcrumb to show the current page's position in the site hierarchy and provide links back through each ancestor, for example Home / Components / Breadcrumb. Use Tabs to switch peer content in one region, Pagination to move through pages, or Stepper for an ordered process.
Import
import { Breadcrumb } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items* | BreadcrumbItem[] | — | Path entries ordered from the root to the current page. |
BreadcrumbItem is { label: ReactNode; href?: string; current?: boolean }. Omitting href renders a non-interactive item, such as the current page or an ancestor without its own destination. current explicitly marks the current page; when no item sets it, the final entry is current.
Slots
| Slot | Type | Description |
|---|---|---|
| separator | ReactNode | Separator between entries. Defaults to "/"; alternatives such as a chevron are automatically marked decorative with aria-hidden. |
Example
<Breadcrumb
items={[
{ label: "Home", href: "/" },
{ label: "Components", href: "/components" },
{ label: "Breadcrumb" }, // Final item without href is the current page
]}
/>With a chevron separator:
<Breadcrumb items={items} separator={<ChevronIcon />} />Usage guidelines
There are no known caveats. An intermediate item without href renders as non-interactive text, which is useful for an ancestor such as Archives that has no standalone page.
Related
Playground
<Breadcrumb items={items} />