Breadcrumb Component

A breadcrumb navigation component that helps users understand their location in a website hierarchy.

  • Responsive and accessible design
  • Customizable separators and styling
  • Works with various navigation libraries
  • Includes support for icons and home navigation

Installation

The Breadcrumb component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the breadcrumb in your project.

React TSX
1import { 
2  Breadcrumb, 
3  BreadcrumbList, 
4  BreadcrumbItem, 
5  BreadcrumbLink, 
6  BreadcrumbSeparator,
7  BreadcrumbPage
8} from "@/components/modern-ui/breadcrumb"

React TSX
1<Breadcrumb>
2  <BreadcrumbList>
3    <BreadcrumbItem>
4      <BreadcrumbLink href="/">Home</BreadcrumbLink>
5    </BreadcrumbItem>
6    <BreadcrumbItem>
7      <BreadcrumbSeparator />
8      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
9    </BreadcrumbItem>
10    <BreadcrumbItem>
11      <BreadcrumbSeparator />
12      <BreadcrumbPage>Current Page</BreadcrumbPage>
13    </BreadcrumbItem>
14  </BreadcrumbList>
15</Breadcrumb>

Examples

Basic Breadcrumb

API Reference

The Breadcrumb component is composed of several parts:

ComponentDescription
BreadcrumbThe root container for the breadcrumb navigation
BreadcrumbListThe list container for breadcrumb items
BreadcrumbItemIndividual item in the breadcrumb navigation
BreadcrumbLinkLink element for clickable breadcrumb items
BreadcrumbPageCurrent page element (not clickable)
BreadcrumbSeparatorVisual separator between breadcrumb items
BreadcrumbEllipsisEllipsis element for indicating truncated items

Styling

The Breadcrumb component comes with sensible default styling:

  • The current page is displayed in bold and uses a different color to indicate it's not a link
  • Links have hover effects to indicate interactivity
  • Separators are styled with a muted color to visually separate items
  • Icon support for the home item enhances visual recognition

Accessibility

The Breadcrumb component follows accessibility best practices:

  • Uses semantic HTML elements
  • Includes appropriate ARIA attributes for screen readers
  • Clearly distinguishes between links and the current page
  • Provides visual cues for hover and focus states