Browse docs

Breadcrumbs

Breadcrumb trail component built on MUI. Accepts a static items array for full control, or a pathname to auto-resolve breadcrumbs from a navigation tree.

Basic

const items = [
  { id: 'home', label: 'Home', href: '/' },
  { id: 'products', label: 'Products', href: '/products' },
  { id: 'item', label: 'Widget Pro' },
];
<Breadcrumbs items={items} />

Quick Start

tsx

import { Breadcrumbs } from '@dashforge/ui';

// Static items
const items = [
  { id: 'home', label: 'Home', href: '/' },
  { id: 'products', label: 'Products', href: '/products' },
  { id: 'widget', label: 'Widget Pro' },
];

<Breadcrumbs items={items} />

// Auto-resolve from pathname (requires navItems prop)
<Breadcrumbs pathname="/products/widget-pro" navItems={navTree} />

API

Prop	Type	Default	Description
`items`	`{ id: string, label: string, href?: string, disabled?: boolean }[]`	—	Static breadcrumb items. Takes priority over `pathname`.
`pathname`	`string`	—	Current route path used to auto-resolve breadcrumbs from a nav tree.
`separator`	`string`	`'/'`	Character rendered between breadcrumb items.
`includeHome`	`boolean`	`true`	Whether to prepend a Home item automatically.
`home`	`{ label: string, href: string }`	—	Custom home item config when `includeHome` is true.
`LinkComponent`	`ComponentType`	—	Custom link component (e.g. React Router `Link`).
`maxItems`	`number`	—	Collapse middle items when breadcrumb count exceeds this value.

Notes

The last item (current page) is always rendered as plain text, not a link, even if href is provided.
When using pathname, pass navItems (the same tree used by AppShell) so the component can resolve labels.

Capabilities

Breadcrumbs provides flexible navigation with router integration, automatic path resolution from tree structures, and extensive customization options for labels, separators, and rendering.

Flexible Structure

Navigation

Use a controlled items array or automatic tree resolution. Supports nested hierarchies with custom matching logic.

Controlled or tree-based
Automatic path resolution
Nested hierarchy support

tsx

const items = [
  { id: 'home', label: 'Home', href: '/' },
  { id: 'page', label: 'Current Page' }
];

<Breadcrumbs pathname="/page" items={items} />

Router Integration

Framework Agnostic

Works with any router. Pass custom LinkComponent for React Router or Next.js Link integration.

Custom link components
Framework agnostic design
getLinkProps for customization

tsx

import { Link } from 'react-router-dom';

<Breadcrumbs
  pathname="/page"
  items={items}
  LinkComponent={Link}
  getLinkProps={(node) => ({ to: node.href })}
/>

Custom Rendering

Flexible

Customize labels with React nodes or i18n hooks. Control separators, icons, and styling via props.

Custom separators and icons
getLabel for i18n
slotProps for styling

tsx

<Breadcrumbs
  pathname="/page"
  items={items}
  separator={<ChevronRightIcon />}
  getLabel={(node) => t(node.label)}
  slotProps={{ link: { sx: { color: 'primary.main' } } }}
/>