Skip to content

Breadcrumbs

Shows where the current page sits in the hierarchy, with links back to each level.

alphaReact AriaSource

Installation

pnpm add @syntara/react @syntara/tokens
import { Breadcrumbs, Breadcrumb } from '@syntara/react';

Usage

import { Breadcrumb, Breadcrumbs } from '@syntara/react';

export function ClaimTrail() {
  return (
    <Breadcrumbs>
      <Breadcrumb href="/">Home</Breadcrumb>
      <Breadcrumb href="/claims">Claims</Breadcrumb>
      <Breadcrumb>CLM-20481</Breadcrumb>
    </Breadcrumbs>
  );
}

Examples

Collapsed

maxItems folds the middle of a long trail into an ellipsis button that expands it.

With an icon

Icons in children are sized to the text.

Accessibility

KeysAction
TabMoves between links; the current page is not a tab stop.
EnterFollows the focused link, or expands a collapsed trail from the ellipsis button (focus moves to the first revealed link).
  • Renders <nav aria-label="Breadcrumbs"> around an <ol> with the same name. Landmark names must be unique: pass aria-label when a page shows more than one trail.
  • The last item has aria-current="page" and is not a link; it is set in medium weight so it doesn't rely on colour.
  • Chevron separators are decorative (aria-hidden) and mirror in right-to-left layouts.

Guidelines

Do

  • Start at the top level of the product and end at the current page.
  • Use the page titles people see in headings.
  • Collapse trails deeper than about four levels with maxItems.

Don’t

  • Don't use breadcrumbs for steps in a flow — use Steps.
  • Don't make the current page a link.
  • Don't use them as the only navigation on a page.

API reference

Breadcrumbs

childrenRequired
ReactNode

Breadcrumb elements, root first. The last one is the current page.

maxItems
number

Collapse when there are more items: keeps the first and the last maxItems − 1, with an ellipsis button between.

aria-label
string

Name of the navigation landmark and the list. Must be unique on a page — name each trail if a page has more than one.

Default 'Breadcrumbs'

expandLabel
string

Accessible name of the ellipsis button.

Default 'Show all breadcrumbs'

isDisabled
boolean

Disables every link.

Default false

onAction
(key: Key) => void

Called when an item is pressed (for client-side routing without hrefs).

Breadcrumb

href
string

Link target. Ignored on the last (current) item.

id
Key

Key passed to onAction.

linkProps
Omit<LinkProps, 'href' | 'children' | 'className'>

Extra props for the inner link, e.g. target or routerOptions.

autoFocus
boolean

Focuses the link when it mounts.

Default false

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour4
text.subtletext.defaultfocus.ringtext.disabled
Type3
font.size.smline-height.snugfont.weight.medium
Space and size3
space.1space.6space.2
Shape1
radius.badge
Motion6
motion.duration.fastmotion.easingmotion.duration.normalmotion.easing-outmotion.duration.springmotion.spring