Breadcrumbs

Breadcrumbs is a navigation component that displays the current page’s location within a hierarchy. It supports auto-collapsing long paths, custom separators, and keyboard accessibility.

---

Usage

Basic usage

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

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Projects', href: '/projects' },
    { label: 'NUI', href: '/projects/nui' },
  ]}
/>;

With collapse and custom separator

<Breadcrumbs
  items={[
    { label: 'Home' },
    { label: 'Category' },
    { label: 'SubCat' },
    { label: 'Section' },
    { label: 'Page' },
    { label: 'Final' },
  ]}
  maxItems={4}
  separator=">"
/>

---

Variants

Breadcrumbs does not have visual variants but supports collapsed vs. full display depending on the number of items.

• Full: All items visible.
• Collapsed: Middle items replaced with an ellipsis (…) when items exceed maxItems.

---

Sizes

Breadcrumbs uses a default font size of 14px and does not provide size props. Styling can be adjusted via className or CSS variables.

---

States

Breadcrumbs itself does not have interactive states such as disabled or loading. Individual items reflect:

• Active — the current page is highlighted and not clickable.
• Ellipsis — non-interactive placeholder for collapsed items.

---

Native Props / Composition

You can pass extra HTML props via className and standard aria-* attributes:

<Breadcrumbs
  className="custom-breadcrumbs"
  aria-label="Main Navigation"
  items={[{ label: 'Home', href: '/' }]}
/>

---

Props

Prop	Type	Default	Description
items	Crumb[]	—	List of breadcrumb items. Each Crumb can have label, href, and onClick.
maxItems	number	6	Maximum number of items before collapsing with ellipsis.
separator	React.ReactNode	'›'	Element or string displayed between breadcrumb items.
className	string	""	Additional CSS classes for custom styling.

Crumb

Prop	Type	Description
label	React.ReactNode	Text or element displayed for the breadcrumb.
href	string (optional)	URL for clickable breadcrumb.
onClick	() => void (optional)	Click handler for the breadcrumb.

---

Behavior Notes

• Automatically collapses breadcrumbs when items.length > maxItems.
• Collapsed items are replaced with a non-interactive ellipsis (…).
• The last item is marked with aria-current="page" and rendered as a non-link element when no href or onClick is provided.
• Separators are decorative and non-interactive.

<Breadcrumbs
  items={[
    { label: 'Home' },
    { label: 'Category' },
    { label: 'SubCat' },
    { label: 'Section' },
  ]}
  maxItems={3}
/>

Example output:

Home › … › Section

---

Accessibility

• Renders as <nav aria-label="Breadcrumb"><ol>…</ol></nav>.
• Each link supports standard keyboard navigation (Tab and Enter).
• aria-current="page" is applied to the current page item.
• Ellipsis items are non-interactive.
• Separators are decorative and not focusable.

---

Layout

• Uses a flex layout for the breadcrumb list.
• Default gap between items is 4px.
• Can be rendered full-width using className or inline styles.

<Breadcrumbs style={{ width: '100%' }} items={[{ label: 'Home' }]} />

---

Best Practices

Do

• Use breadcrumbs for hierarchical navigation paths.
• Provide meaningful label and href values for accessibility.
• Adjust maxItems based on expected navigation depth.

Don’t

• Place too many interactive elements inside a breadcrumb label.
• Rely on breadcrumbs for primary navigation.
• Hide critical navigation paths behind collapsed ellipsis.