Marble UI
← Components

Breadcrumbs

Preview: Chevron

Path to the current page; the last item is the current page and is not a link.

Import

import { Breadcrumbs, Breadcrumb } from '@marbleui/ui'

Props

<Breadcrumbs>

PropTypeDefaultDescription
separatorSeparator'chevron'

Also accepts React Aria props (84).

<Breadcrumb>

PropTypeDefaultDescription
hrefstring—

Also accepts React Aria props (79).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Breadcrumb · React Aria Breadcrumbs · React Aria Link. Follow the primitive's docs for the full keyboard map.

Usage notes

Path to the current page. For navigation between sibling sections use TabNav; for a hierarchical tree of items use Tree.

<Breadcrumbs>
  <Breadcrumb href="/">Acme</Breadcrumb>
  <Breadcrumb href="/projects">Projects</Breadcrumb>
  <Breadcrumb>Settings</Breadcrumb>
</Breadcrumbs>
  • The last item is the current page and renders without a separator. Give it no href.
  • separator is chevron (default) or slash.
  • Breadcrumbs is React Aria’s component, so it also accepts onAction for client-side routing.
  • It does not collapse long trails; items wrap onto multiple lines.
Example source · show
import { Breadcrumb, Breadcrumbs } from './breadcrumbs'

export const styles = {
  Chevron: () => (
    <Breadcrumbs>
      <Breadcrumb href="#">Acme</Breadcrumb>
      <Breadcrumb href="#">Projects</Breadcrumb>
      <Breadcrumb href="#">Website</Breadcrumb>
      <Breadcrumb>Settings</Breadcrumb>
    </Breadcrumbs>
  ),
  Slash: () => (
    <Breadcrumbs separator="slash">
      <Breadcrumb href="#">docs</Breadcrumb>
      <Breadcrumb href="#">components</Breadcrumb>
      <Breadcrumb>breadcrumbs</Breadcrumb>
    </Breadcrumbs>
  ),
}

Source: packages/ui/src/breadcrumbs/breadcrumbs.tsx

Catalog

Category
navigation
Priority
Foundation
Primitive
react-aria
React Aria
Breadcrumbs