Breadcrumb

A navigation trail showing the user's position in a page hierarchy. Composable sub-components let you build simple or complex breadcrumbs with separators, ellipsis for overflow, and current-page indicators.

Use cases

• Hierarchical navigation — show path from root to current page.
• File browsers — display folder path.
• Multi-level settings — indicate nesting depth.

When NOT to use

• For flat navigation — use Tabs or a navbar.
• For step-by-step flows — use a Stepper.
• For single-level back navigation — use a back button.

Import

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbHomeLink,
  BreadcrumbLink,
  BreadcrumbAccentPage,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@mihcm/ui/Breadcrumb';

Basic usage

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Profile</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composition

• BreadcrumbLink renders an <a> — pass href or wrap with your router's Link component.
• BreadcrumbPage marks the current page and renders as non-interactive text with aria-current="page".
• BreadcrumbSeparator defaults to a / character. Pass children to customize (e.g. a chevron icon).
• For deep hierarchies (5+ levels), collapse middle items with BreadcrumbEllipsis.

Branded home/current style

Use BreadcrumbHomeLink for an orange home icon and BreadcrumbAccentPage for an orange current item:

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbHomeLink href="/" /></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/employees">Employees</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbAccentPage>Profile</BreadcrumbAccentPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Related

• NavigationMenu — primary site navigation.
• TopBar — breadcrumbs are placed in the TopBar start slot.
• Tabs — for switching views within a page, not navigation hierarchy.