PixelBreadcrumb

Trail of links representing the user's location in a hierarchical site structure, with pixel-chevron or slash separators per surface.

Renders <nav> + <ol>/<li> landmark with configurable aria-label.
Active crumb marked with aria-current="page" and emphasised typography.
Per-item href (link), onClick (button), or plain label — choose per crumb.
Pixel surface uses a crisp-edged chevron SVG; linear surface uses a slash separator.
SSR-safe, tree-shakable, and follows the nearest PxlKitSurfaceProvider.

Status: stable
Category: navigation
Since: v1.0.0

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`items` (required)	`PixelBreadcrumbItem[]`	—	Crumbs in order, from root to current page.
`surface`	`'pixel' \| 'linear'`	—	Visual surface treatment override.
`ariaLabel`	`string`	`'Breadcrumb'`	Accessible label for the nav region.

ref points to its element (HTMLElement).

WCAG target: 2.1 AA

navigation

Rendered as a <nav> landmark with a configurable aria-label (defaults to "Breadcrumb"). Crumbs live inside an ordered <ol>/<li> list reflecting the hierarchy. The active crumb carries aria-current="page" and is rendered as a non-interactive <span> to convey the user's current location. Separators between crumbs use aria-hidden so screen readers skip the decorative chevron or slash.

Keyboard

Key	Action	When
`Tab`	Moves focus through interactive crumbs (links and buttons).	—
`Enter`	Activates the focused crumb link or button.	—
`Space`	Activates the focused crumb when rendered as a button.	—

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];

export function Default() {
  return <PixelBreadcrumb items={TRAIL} />;
}

Examples

Default

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];

export function Default() {
  return <PixelBreadcrumb items={TRAIL} />;
}

Pixel surface

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];

export function PixelSurface() {
  return <PixelBreadcrumb items={TRAIL} surface="pixel" />;
}

Linear surface

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];

export function LinearSurface() {
  return <PixelBreadcrumb items={TRAIL} surface="linear" />;
}

With onClick

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

export function WithOnClick() {
  return (
    <PixelBreadcrumb
      items={[
        { label: 'Dashboard', onClick: () => {} },
        { label: 'Reports', onClick: () => {} },
        { label: 'Q4 Summary', active: true },
      ]}
    />
  );
}

Plain labels

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

export function PlainLabels() {
  return (
    <PixelBreadcrumb
      items={[
        { label: 'Library' },
        { label: 'Albums' },
        { label: 'Photos', active: true },
      ]}
    />
  );
}

Single crumb

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

export function SingleCrumb() {
  return <PixelBreadcrumb items={[{ label: 'Home', active: true }]} />;
}

Localised label

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

const TRAIL = [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs' },
  { label: 'Components', href: '/docs/components' },
  { label: 'Breadcrumb', active: true },
];

export function LocalisedLabel() {
  return <PixelBreadcrumb items={TRAIL} ariaLabel="Ruta de navegación" />;
}

Deep trail

import { PixelBreadcrumb } from '@pxlkit/ui-kit';

export function DeepTrail() {
  return (
    <PixelBreadcrumb
      items={[
        { label: 'Org', href: '/' },
        { label: 'Workspaces', href: '/workspaces' },
        { label: 'Engineering', href: '/workspaces/eng' },
        { label: 'Projects', href: '/workspaces/eng/projects' },
        { label: 'pxlkit', href: '/workspaces/eng/projects/pxlkit' },
        { label: 'Settings', active: true },
      ]}
    />
  );
}

API

Accessibility