Breadcrumb

Navigation

Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks

Breadcrumb

Show the user’s location within an app hierarchy and provide quick navigation back to previous levels.

Default

Pills

Bordered

With Icons

Add icons to breadcrumb items for better visual context.

Separator Types

Use different separators to match your visual style or brand.

Chevron (default)

Slash

Dot

Arrow

Custom Separator

Contextual Usage

Combine breadcrumbs with cards, headers, and content to provide context within a page.

Project: Saha UI

A modern React component library with glassmorphism effects.

This breadcrumb navigation helps users understand their current location within the application hierarchy.

Usage Guidelines

When to Use

  • Deep site navigation
  • E-commerce categories
  • Documentation

Accessibility

  • nav landmark with aria-label
  • Current page not a link
  • aria-current on last item

Performance

  • Renders only visible items
  • Lightweight separator components

Common Mistakes

  • Making current page clickable
  • Too many levels without truncation

Frequently Asked Questions

Show all levels for clarity, or use truncation for deep hierarchies (more than 4-5 levels).
No, the current page should be text only, not a link, following accessibility best practices.

View on GitHub

See the full source code on GitHub

Related Components

View all
AppBar

Application bar with scroll effects, elevation changes, and fixed/sticky positioning

BottomNavigation

Mobile bottom navigation bar with icon labels and active state indicators

Link

Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration

Menubar

Horizontal menu bar implementing nested dropdown menus with keyboard navigation, ARIA menubar pattern, and collision detection

Previous

BottomNavigation

Next

ButtonGroup