Breadcrumbs

Usage

import {
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsLink,
  BreadcrumbsList,
  BreadcrumbsPage,
  BreadcrumbsSeparator,
} from '@epilot/spark-ui/breadcrumbs'

<Breadcrumbs>
  <BreadcrumbsList>
    <BreadcrumbsItem>
      <BreadcrumbsLink href="/">Home</BreadcrumbsLink>
    </BreadcrumbsItem>
    <BreadcrumbsSeparator />
    <BreadcrumbsItem>
      <BreadcrumbsPage>Devices</BreadcrumbsPage>
    </BreadcrumbsItem>
  </BreadcrumbsList>
</Breadcrumbs>

Examples

Custom separator

The default separator is a /. Pass children to override.

Router integration

BreadcrumbsLink accepts a render prop so you can drop in any router-specific link component (TanStack Link, Next Link, …) and inherit the breadcrumb styling.

<BreadcrumbsLink render={<Link to="/settings" />}>Settings</BreadcrumbsLink>

API Reference

`BreadcrumbsLink`

Prop	Type	Default
`render`	`ReactElement`	—

Forwards remaining props to the underlying anchor (or to the element passed to render, which replaces the rendered anchor).

`BreadcrumbsPage`

Marks the current page with aria-current="page". No props beyond standard <span> attributes.

`BreadcrumbsSeparator`

Defaults to "/". Pass children to render any glyph (›, →, etc.). Always rendered with aria-hidden.

Breadcrumbs

On this page