Breadcrumbs

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

Import

ts
import { Breadcrumbs } from "@kobalte/core";

ts
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.Root: 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.Root>
	<ol>
		<li>
			<Breadcrumbs.Link />
			<Breadcrumbs.Separator />
		</li>
	</ol>
</Breadcrumbs.Root>

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

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.Root 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.Root>
	);
}

tsx
import { ChevronRightIcon } from "some-icon-library";
function App() {
	return (
		<Breadcrumbs.Root 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.Root>
	);
}

You can also override each Breadcrumbs.Separator content by providing your own children.

API Reference

Breadcrumbs.Root

Prop	Description
separator	`string \| JSX.Element` The visual separator between each breadcrumb item. It will be used as the default children of `Breadcrumbs.Separator`.
translations	`BreadcrumbsIntlTranslations` Localization strings.

Breadcrumbs.Link

Breadcrumbs.Link consists of Link.

Prop	Description
current	`boolean` Whether the breadcrumb link represents the current page.
disabled	`boolean` Whether the breadcrumb link is disabled.

Data attribute	Description
data-current	Present when the breadcrumb link represents the current page.

Rendered elements

Component	Default rendered element
`Breadcrumbs.Root`	`nav`
`Breadcrumbs.Link`	`a`
`Breadcrumbs.Separator`	`span`