BreadCrumb

BreadCrumb renders a navigation trail. When there are more items than maxItems, the middle items collapse into an overflow menu so the trail never wraps or overflows its container. Separators, item rendering, and theming are all customizable.

When to use

• Show the user's location in a hierarchy (site → library → folder → file).
• Any navigation path that must stay on one line regardless of depth.

Import

import { BreadCrumb } from '@spartanfx/react';

Basic usage

Pass items, each with an id and label (and optional href, icon, disabled).

<BreadCrumb
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'projects', label: 'Projects', href: '/projects' },
    { id: 'alpha', label: 'Project Alpha' },
  ]}
  onItemClick={(item) => navigate(item.href)}
/>

Overflow handling

Cap the visible items with maxItems. Items beyond the cap collapse into a … menu; itemsBeforeCollapse / itemsAfterCollapse control how many stay pinned at each end.

<BreadCrumb
  items={deepTrail}
  maxItems={4}
  itemsBeforeCollapse={1}
  itemsAfterCollapse={2}
  overflowLabel="More"
/>

Custom separator

<BreadCrumb items={items} separator="›" />

Key props

Prop	Type	Default	Notes
items (required)	IBreadCrumbItem[]	—	id + label, plus optional href, icon, disabled, data.
maxItems	number	Infinity	Items shown before overflow collapses.
itemsBeforeCollapse / itemsAfterCollapse	number	1 / 1	Items pinned at start / end.
separator	ReactNode	'/'	Separator between items.
onItemClick	(item, event) => void	—	Fires when an item is clicked.
appearance	AppearanceMode	light	Light or dark theming.

See the full generated reference: BreadCrumb API ↗.

See also

• Components overview