Breadcrumbs

Since v0.5.0@kobalte/core/breadcrumbsSource Breadcrumb

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

Import

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.

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

Example

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

export function BasicExample() {
  return (
    <Breadcrumbs>
      <ol class={style.breadcrumbs__list}>
        <li class={style.breadcrumbs__item}>
          <Breadcrumbs.Link href="/" class={style.breadcrumbs__link}>
            Home
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator class={style.breadcrumbs__separator} />
        </li>
        <li class={style.breadcrumbs__item}>
          <Breadcrumbs.Link href="/components" class={style.breadcrumbs__link}>
            Components
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator class={style.breadcrumbs__separator} />
        </li>
        <li class={style.breadcrumbs__item}>
          <Breadcrumbs.Link current class={style.breadcrumbs__link}>
            Breadcrumbs
          </Breadcrumbs.Link>
        </li>
      </ol>
    </Breadcrumbs>
  );
}

.breadcrumbs__list {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__link {
  font-weight: 500;
  color: hsl(240 4% 16%);
}

.breadcrumbs__link[data-disabled] {
  color: hsl(240 4% 46%);
}

.breadcrumbs__link:hover {
  color: hsl(201 96% 32%);
}

.breadcrumbs__link[data-current] {
  font-weight: 400;
}

.breadcrumbs__separator {
  display: inline-block;
  margin: 0 4px;
  color: hsl(240 5% 65%);
}

[data-theme*="dark"] .breadcrumbs__link {
  color: hsl(0 100% 100% / 0.9);
}

[data-theme*="dark"] .breadcrumbs__link[data-disabled] {
  color: hsl(240 4% 46%);
}

[data-theme*="dark"] .breadcrumbs__link:hover {
  color: hsl(201 96% 32%);
}

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.

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

tip

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

API Reference

Breadcrumbs

Breadcrumbs is equivalent to the Root import from @kobalte/core/breadcrumbs (and deprecated 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`	`nav`
`Breadcrumbs.Link`	`a`
`Breadcrumbs.Separator`	`span`

Last updated: 7/16/26, 7:09 AM

Edit this page on GitHub