Breadcrumb

Overview

The Breadcrumb component provides hierarchical navigation, allowing users to trace their path through a website or application. It is especially useful for multi-level navigation systems and improves both usability and accessibility.

Examples

Basic Usage

With Dropdown

With Current Path Detection

For Next.js applications, you can pass the current pathname to automatically highlight the active dropdown option. The dropdown item will be highlighted with a purple radio button:

Behavior

The Breadcrumb component automatically handles several behaviors:

• Last item styling: The last item in the breadcrumb is automatically styled differently (non-clickable for links, special styling for dropdowns)
• Dropdown state management: Dropdown open/close states are managed internally
• Radio selection: When currentPath is provided, matching dropdown options are automatically selected with a radio button
• Chevron rotation: Dropdown chevrons rotate when opened/closed
• Fallback values: If no value is provided for dropdown options, the label is used as the value

CSS Classes

The component applies the following CSS classes that can be styled:

• integral-breadcrumb: Main breadcrumb container
• integral-breadcrumb__list: Breadcrumb list container
• integral-breadcrumb__item: Individual breadcrumb items
• integral-breadcrumb__item--dropdown: Dropdown button items
• integral-breadcrumb__item--link: Link items
• integral-breadcrumb__item--page: Page (non-clickable) items
• integral-breadcrumb__item--last: Last item in breadcrumb
• integral-breadcrumb__dropdown-chevron: Chevron icon in dropdowns
• integral-breadcrumb__dropdown-chevron--open: Chevron when dropdown is open
• integral-breadcrumb__dropdown-chevron--last: Chevron in last dropdown item
• integral-breadcrumb__menu-content: Dropdown menu content
• integral-breadcrumb__menu-item: Individual dropdown menu items
• integral-breadcrumb__separator-chevron: Separator between breadcrumb items

Props

Breadcrumb Props

BreadcrumbItem Props

DropdownOption Props

Import

import { Breadcrumb } from '@im/integral/components/styled';