Breadcrumbs

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Show the path from the top level to the current location as an ordered list. Long trails wrap instead of collapsing, so reading order holds.

Don't let screen readers announce path separators. Use the decorative Separator instead. Mark the current location with aria-current=page. Keep router logic in the product.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root(nav) → List(ol) → Item(Link / decorative Separator / Current)

Keyboard and accessibility

Tab to an ancestor link and press Enter to open it. The current location isn't a Tab stop.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Breadcrumbs } from '@surflane/ui'

<Breadcrumbs.Root aria-label='Project breadcrumb'>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href='/'>Platform</Breadcrumbs.Link>
    </Breadcrumbs.Item>
    <Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Current>Deployments</Breadcrumbs.Current>
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens