Navigation

Breadcrumbs

Location in a hierarchy, as links separated by "/". Middle items collapse into a "…" menu when the row runs out of space.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/BreadcrumbsExample.tsx
import { Breadcrumbs } from '@krackedui/motion';

export function Location() {
  return (
    <Breadcrumbs
      className="w-full"
      items={[
        { label: 'Workspace', icon: 'home', href: '#workspace' },
        { label: 'Engineering', href: '#engineering' },
        { label: 'Design system', href: '#design-system' },
        { label: 'Components', href: '#components' },
        { label: 'Breadcrumbs' },
      ]}
    />
  );
}

Examples

Collapsing in a narrow row

At 320px only the first item, "…" and the current page remain.

Emoji icons and an access chip

API Reference

Breadcrumbs

PropTypeDefault
items
{ label: ReactNode; href?: string; icon?: IconName | string; onClick?: () => void }[]
maxItems
number
4
trailing
ReactNode
collapsedLabel
string
"Show hidden breadcrumbs"
aria-label
string
"Breadcrumb"

BreadcrumbAccess

Access chip button ("Private ⌄").

PropTypeDefault
label
ReactNode
"Private"
icon
IconName
"lockFill"

Accessibility

  • Follows the WAI-ARIA breadcrumb pattern: nav labelled "Breadcrumb" around an ordered list; the last item has aria-current="page".
  • Items with href are links, items with only onClick are buttons, others are plain text.
  • The "…" button ("Show hidden breadcrumbs") opens a menu of the collapsed items: Enter/Space/↓ open it, arrows move, Escape closes and returns focus.
  • Separators are hidden from assistive tech. Segments are 32px tall on touch screens.

Usage

  • Use in a top bar or page header to show where a page sits and to move up the hierarchy.
  • Don't use as the main navigation or for steps in a flow.
  • Keep labels short; long ones truncate at 240px.
© 2026 Motion. Internal documentation.