Breadcrumb

Breadcrumb shows the user's location within a nested hierarchy and lets them navigate back to any ancestor page. Use it on deep pages (settings, detail, or drill-down views) where the path back to the top matters. Anatomy: Breadcrumb (nav/ol wrapper) contains BreadcrumbItem list entries, each holding either a BreadcrumbLink (navigable ancestor) or a BreadcrumbPage (current, non-interactive page), with BreadcrumbSeparator rendering the caret between them.

Path back

Ancestors are BreadcrumbLinks; the page you are on is a BreadcrumbPage, which is deliberately not a link — a link to where you already are is a dead control. In a page, this goes through PageHeader's breadcrumb snippet rather than above it.

<Breadcrumb>
	<BreadcrumbItem>
		<BreadcrumbLink href="/blocks/orders">Orders</BreadcrumbLink>
	</BreadcrumbItem>
	<BreadcrumbSeparator />
	<BreadcrumbItem>
		<BreadcrumbPage>Order 3412</BreadcrumbPage>
	</BreadcrumbItem>
</Breadcrumb>

Deeper

Every crumb before the last has to link somewhere real. If a level has no page of its own, leave it out — an unclickable middle crumb makes the trail look broken rather than complete.

<Breadcrumb>
	<BreadcrumbItem>
		<BreadcrumbLink href="/blocks/orders">Orders</BreadcrumbLink>
	</BreadcrumbItem>
	<BreadcrumbSeparator />
	<BreadcrumbItem>
		<BreadcrumbLink href="/blocks/orders">Order 3412</BreadcrumbLink>
	</BreadcrumbItem>
	<BreadcrumbSeparator />
	<BreadcrumbItem>
		<BreadcrumbPage>Refund</BreadcrumbPage>
	</BreadcrumbItem>
</Breadcrumb>

API

`Breadcrumb`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		`BreadcrumbItem` entries.
`class`	`string`		Additional Tailwind classes merged onto the `<ol>` list element.

`BreadcrumbItem`

A single entry in a Breadcrumb list, holding a BreadcrumbLink or BreadcrumbPage.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Item content, typically a `BreadcrumbLink` or `BreadcrumbPage`.
`class`	`string`		Additional Tailwind classes merged onto the `<li>` element.

`BreadcrumbLink`

A navigable ancestor entry within a Breadcrumb. Renders as an <a>.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	Link content.
`href`	`string`	Destination URL.
`class`	`string`	Additional Tailwind classes merged onto the element.

`BreadcrumbSeparator`

Renders a caret between BreadcrumbItem entries.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the `<li>` element.

`BreadcrumbPage`

The current, non-interactive page within a Breadcrumb. Renders as a <span> with aria-current="page".

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		Page label content.
`class`	`string`		Additional Tailwind classes merged onto the element.