Breadcrumbs

A composable, accessible Breadcrumbs component for modern React applications.

import { Breadcrumbs } from '@nofinite/nui';

Interactive Preview

A navigation aid component that displays the user’s location within a hierarchical structure. Supports interactive links, custom separators, responsive collapsing, and accessibility-friendly navigation semantics.

NUI provides a Dual-Mode Architecture: use Plug and Play (PnP) mode to pass a clean data array with automatic truncation, or assemble the Composable Compound Primitives for full layout customization.

Usage

1. Plug and Play (PnP) Mode — Zero Boilerplate

Pass an array of crumbs via the data prop. NUI automatically links items, renders separators, highlights the active current page, and truncates long paths with an ellipsis when exceeding maxItems:

import { Breadcrumbs } from '@nofinite/nui';

export function QuickBreadcrumbs() {
  const crumbs = [
    { label: 'Home', href: '/' },
    { label: 'Engineering', href: '/engineering' },
    { label: 'Projects', href: '/engineering/projects' },
    { label: 'Design System' },
  ];

  return <Breadcrumbs data={crumbs} maxItems={4} />;
}

2. Composable Compound Mode — Full Structural Control

When you need custom icons, dropdown menus inside breadcrumbs, or specific markup wrappers, assemble the compound primitives directly:

import { Breadcrumbs } from '@nofinite/nui';
import Link from 'next/link';

export function CustomBreadcrumbs() {
  return (
    <Breadcrumbs separator="/">
      <Breadcrumbs.Item>
        <Link href="/">Home</Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Link href="/settings">Settings</Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item isCurrent>
        API Keys
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
}

Truncation with maxItems

When paths get too long, NUI automatically truncates the middle items into an ellipsis:

<Breadcrumbs
  maxItems={3}
  data={[
    { label: 'Home', href: '/' },
    { label: 'Cloud', href: '/cloud' },
    { label: 'Clusters', href: '/clusters' },
    { label: 'Production-US-East' },
  ]}
/>

Props Reference

Breadcrumbs (Root)

Breadcrumbs.Item

Breadcrumbs.Separator

Subcomponents

• Breadcrumbs.Item
• Breadcrumbs.Separator

Accessibility

• Wrapped in <nav aria-label="Breadcrumb"> for screen readers.
• Renders ordered list structure (<ol>, <li>) for navigation semantics.
• Current page crumb automatically receives aria-current="page".
• Visual separators are marked with aria-hidden="true".

API Reference