labsUIBreadcrumb
Navigation trail from a list of items: links up to the current page, which is marked for assistive tech. Server-safe, custom separator.
npx @kznlabs/labsui add breadcrumbimport { Breadcrumb } from "@/components/ui/breadcrumb";export function NavTrail({ post }: { post: { title: string } }) { return ( <Breadcrumb items={[ { label: "Home", href: "/" }, { label: "Blog", href: "/blog" }, { label: post.title }, ]} /> );}<Breadcrumb>
Where the page sits in the site: a list of links ending at the current page. Server-safe.
items*Crumb[]The trail, outermost first. The last item is the current page.
separatorReactNodeDrawn between items. Default a chevron.
| Prop | Type | Default |
|---|---|---|
items*The trail, outermost first. The last item is the current page. | Crumb[] | — |
separatorDrawn between items. Default a chevron. | ReactNode | — |
Also accepts every <nav> prop.
- type Crumb
- { label: ReactNode; href?: string; onClick?: MouseEventHandler<HTMLAnchorElement>; }
* required. Every component also takes className.