PettyUI/.firecrawl/kobalte.dev-docs-core-components-breadcrumbs.md

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

Import

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

Copyts
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.

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

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

Example

index.tsxstyle.css

Copytsx
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
import "./style.css";

function App() {
  return (
    <Breadcrumbs>
      <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>
  );
}

Copytsx
import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
import "./style.css";

function App() {
  return (
    <Breadcrumbs>
      <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>
  );
}

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.

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

Copytsx
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

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

Prop	Description
separator	`string
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

Previous←BadgeNextButton→