Breadcrumbs

Show hierarchy and navigational context for a user’s location within an application.

Import

ts
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
// or
import { Root, Link, ... } from "@kobalte/core/breadcrumbs";
// or (deprecated)
import { Breadcrumbs } from "@kobalte/core";

ts
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
// or
import { Root, Link, ... } from "@kobalte/core/breadcrumbs";
// or (deprecated)
import { Breadcrumbs } from "@kobalte/core";

Features

• Support for navigation links via <a> elements or custom element types via ARIA.
• Localized ARIA labeling support for landmark navigation region.
• Support for disabled breadcrumb links.

Anatomy

The breadcrumbs consist of:

• Breadcrumbs: The root container for a breadcrumbs.
• Breadcrumbs.Link: The breadcrumb link.
• Breadcrumbs.Separator: The visual separator between each breadcrumb items. It will not be visible by screen readers.
• ol: The native HTML <ol> element used to contain breadcrumb items.
• li: The native HTML <li> element used to contain breadcrumb link and separator.

tsx
<Breadcrumbs>
	<ol>
		<li>
			<Breadcrumbs.Link />
			<Breadcrumbs.Separator />
		</li>
	</ol>
</Breadcrumbs>

tsx
<Breadcrumbs>
	<ol>
		<li>
			<Breadcrumbs.Link />
			<Breadcrumbs.Separator />
		</li>
	</ol>
</Breadcrumbs>

Example

Usage

Custom separator

Use the separator prop to provide a default content for all Breadcrumbs.Separator. You can pass it a string or a SolidJS component.

tsx
import { ChevronRightIcon } from "some-icon-library";
function App() {
	return (
		<Breadcrumbs separator={<ChevronRightIcon />}>
			<ol class="breadcrumbs__list">
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link href="/" class="breadcrumbs__link">
						Home
					</Breadcrumbs.Link>
					<Breadcrumbs.Separator class="breadcrumbs__separator" />
				</li>
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link href="/components" class="breadcrumbs__link">
						Components
					</Breadcrumbs.Link>
					<Breadcrumbs.Separator class="breadcrumbs__separator" />
				</li>
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link current class="breadcrumbs__link">
						Breadcrumbs
					</Breadcrumbs.Link>
				</li>
			</ol>
		</Breadcrumbs>
	);
}

tsx
import { ChevronRightIcon } from "some-icon-library";
function App() {
	return (
		<Breadcrumbs separator={<ChevronRightIcon />}>
			<ol class="breadcrumbs__list">
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link href="/" class="breadcrumbs__link">
						Home
					</Breadcrumbs.Link>
					<Breadcrumbs.Separator class="breadcrumbs__separator" />
				</li>
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link href="/components" class="breadcrumbs__link">
						Components
					</Breadcrumbs.Link>
					<Breadcrumbs.Separator class="breadcrumbs__separator" />
				</li>
				<li class="breadcrumbs__item">
					<Breadcrumbs.Link current class="breadcrumbs__link">
						Breadcrumbs
					</Breadcrumbs.Link>
				</li>
			</ol>
		</Breadcrumbs>
	);
}

API Reference

Breadcrumbs

Breadcrumbs is equivalent to the Root import from @kobalte/core/breadcrumbs (and deprecated Breadcrumbs.Root).

Breadcrumbs.Link

Breadcrumbs.Link consists of Link.

Rendered elements