Breadcrumbs
A navigation trail showing the current page's position in the site hierarchy.
import { Breadcrumbs } from "@sanity/sanity-id/components/breadcrumbs"Props
| Prop | Type | Description |
|---|---|---|
label (required) | string | Accessible label for the nav element |
links (required) | Array<{ title: string; href?: string; current?: boolean }> | Breadcrumb items to render |
className | string | Additional CSS classes |
renderLink | ElementType<ComponentProps<"a"> & { href: string }> | Custom link component for client-side navigation (e.g. Next.js Link) |
Required.
Usage
1import { Breadcrumbs } from "@sanity/sanity-id/components/breadcrumbs"
2
3export default () => {
4 return (
5 <div className="flex flex-col flex-wrap gap-32">
6 <Breadcrumbs
7 label="breadcrumbs-example"
8 renderLink={Link}
9 links={[
10 { title: "Breadcrumb 1", href: "#breadcrumb-1" },
11 { title: "Breadcrumb 2", href: "#breadcrumb-2" },
12 { title: "Breadcrumb 3", href: "#breadcrumb-3" },
13 ]}
14 />
15 <Breadcrumbs
16 label="breadcrumbs-example"
17 renderLink={Link}
18 links={[
19 { title: "Breadcrumb 1", href: "#breadcrumb-1" },
20 { title: "Breadcrumb 2", href: "#breadcrumb-2" },
21 { title: "Breadcrumb 3" },
22 ]}
23 />
24 </div>
25 )
26 }