Kobalte.v0.13.4

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

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

API Reference

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

PropDescription
separatorstring | JSX.Element
The visual separator between each breadcrumb item. It will be used as the default children of Breadcrumbs.Separator.
translationsBreadcrumbsIntlTranslations
Localization strings.

Breadcrumbs.Link consists of Link.

PropDescription
currentboolean
Whether the breadcrumb link represents the current page.
disabledboolean
Whether the breadcrumb link is disabled.
Data attributeDescription
data-currentPresent when the breadcrumb link represents the current page.

Rendered elements

ComponentDefault rendered element
Breadcrumbsnav
Breadcrumbs.Linka
Breadcrumbs.Separatorspan