Breadcrumbs

Breadcrumbs show a navigational hierarchy of pages, helping users understand where they are within a site and navigate back to parent sections.

Import

import { Breadcrumbs, BreadcrumbItem } from '@proyecto-viviana/solid-spectrum';

Basic Breadcrumbs

A simple breadcrumb trail showing page hierarchy. The last item is the current page and is not a link.

<Breadcrumbs items={basicCrumbs}>
  {(crumb) => (
    <BreadcrumbItem id={crumb.id} href={crumb.href}>
      {crumb.label}
    </BreadcrumbItem>
  )}
</Breadcrumbs>

Interactive Navigation

Click any breadcrumb to navigate back to that level. The trail updates to reflect the new location.

Current page: Laptops

<Breadcrumbs items={crumbs()} onAction={handleNavigate}>
  {(crumb) => (
    <BreadcrumbItem id={crumb.id} href={crumb.href}>
      {crumb.label}
    </BreadcrumbItem>
  )}
</Breadcrumbs>

Size Variants

Breadcrumbs support different sizes to match surrounding content.

Small

Medium (default)

Large

<Breadcrumbs size="sm" items={dashboardCrumbs}>
  {(crumb) => (
    <BreadcrumbItem id={crumb.id} href={crumb.href}>
      {crumb.label}
    </BreadcrumbItem>
  )}
</Breadcrumbs>

File Path Breadcrumbs

Breadcrumbs work well for displaying file or folder navigation paths.

Root
ui
Button.tsx

<Breadcrumbs items={deepCrumbs}>
  {(crumb) => (
    <BreadcrumbItem id={crumb.id} href={crumb.href}>
      {crumb.label}
    </BreadcrumbItem>
  )}
</Breadcrumbs>

Breadcrumbs Props

Props

Prop	Type	Default	Description
`items`	T[]	—	Data items to render as breadcrumb entries
`children`	(item: T) => JSX.Element	—	Render function called for each item to produce BreadcrumbItem elements
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant affecting font size and spacing
`isDisabled`	boolean	`false`	Whether all breadcrumb links are disabled
`onAction`	(key: Key) => void	—	Handler called when a breadcrumb item is pressed

BreadcrumbItem Props

Props

Prop	Type	Default	Description
`id`	string	—	Unique identifier for the breadcrumb item
`href`	string	—	URL for the breadcrumb link. Omit for the current page.
`children`	JSX.Element	—	Label content of the breadcrumb
`isDisabled`	boolean	`false`	Whether this breadcrumb link is disabled

Accessibility

Uses nav element with aria-label="Breadcrumbs"
Items use an ol list structure for proper semantics
Current page is marked with aria-current="page"
Separator characters are hidden from screen readers
Links are focusable and activatable via keyboard
Screen readers announce the full trail context