Breadcrumb

Organism

Hierarchical navigation trail wrapped in a nav landmark (ariaLabel, default "Breadcrumb"). Last item marked with aria-current="page" and aria-hidden separators. renderLink renders linked items through a router Link for client-side navigation.

Preview

Code

<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Components', href: '/components' },
  { label: 'Breadcrumb' },
]} />

Preview

Code

<Breadcrumb items={[
  { label: 'Dashboard', href: '/' },
  { label: 'Users', href: '/users' },
  { label: 'Settings', href: '/users/settings' },
  { label: 'Permissions' },
]} />

Preview

Code

<Breadcrumb items={[...]} separator={<span>/</span>} />

Preview

Code

<Breadcrumb items={[/* 6 items */]} maxItems={3} />

Preview

Code

import Link from 'next/link';

<Breadcrumb
  ariaLabel="Page trail"
  items={[...]}
  renderLink={(item, className) => (
    <Link href={item.href} className={className}>{item.label}</Link>
  )}
/>

Breadcrumb

Default

Long path

Custom separator

Overflow / ellipsis

Router link