---
title: "Breadcrumbs"
description: "A navigation trail showing the current page's position in the site hierarchy."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/breadcrumbs"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/breadcrumbs.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Breadcrumbs

A navigation trail showing the current page's position in the site hierarchy.

```tsx
import { Breadcrumbs } from "@sanity/sanity-id/components/breadcrumbs"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | yes | — | Accessible label for the nav element |
| `links` | `Array<{ title: string; href?: string; current?: boolean }>` | yes | — | Breadcrumb items to render |
| `className` | `string` | no | — | Additional CSS classes |
| `renderLink` | `ElementType<ComponentProps<"a"> & { href: string }>` | no | — | Custom link component for client-side navigation (e.g. Next.js Link) |

## Usage

```tsx
import { Breadcrumbs } from "@sanity/sanity-id/components/breadcrumbs"

export default () => {
	return (
		<div className="flex flex-col flex-wrap gap-32">
			<Breadcrumbs
				label="breadcrumbs-example"
				renderLink={Link}
				links={[
					{ title: "Breadcrumb 1", href: "#breadcrumb-1" },
					{ title: "Breadcrumb 2", href: "#breadcrumb-2" },
					{ title: "Breadcrumb 3", href: "#breadcrumb-3" },
				]}
			/>
			<Breadcrumbs
				label="breadcrumbs-example"
				renderLink={Link}
				links={[
					{ title: "Breadcrumb 1", href: "#breadcrumb-1" },
					{ title: "Breadcrumb 2", href: "#breadcrumb-2" },
					{ title: "Breadcrumb 3" },
				]}
			/>
		</div>
	)
}
```