Navigation & Headers
Breadcrumb
Breadcrumb navigation displaying user location in site hierarchy with expandable dropdown menus for subcategory access.
Overview
Reflects canonical navigation path with each level (except current page) as a clickable link. On PDPs, current category remains clickable while product title is excluded. On small mobile screens, shows only current category with truncation for long names. Supports RTL languages and dynamically generates paths based on page taxonomy. Uses LuiText, LuiNavigationMenuTextItem, and LuiDropdown for rendering.
Key Business & UX Benefits
- Shows where the user is in the site so they can jump back up the hierarchy.
- Clickable levels reduce clicks to reach category or home.
- Mobile truncation keeps breadcrumb useful on small screens.
- RTL and dynamic paths support international and CMS-driven sites.
Pro-Tip from Larry: Use breadcrumbs on PDP so users can quickly go back to category or home.
Usage
LuiBreadcrumb
Feature List
- Full navigation path with clickable links reflecting category hierarchy
- Dropdown menus showing subcategories on hover (desktop)
- Mobile-optimized collapsible display with expandable navigation
- CSS-only responsive layout to prevent layout shifts
API Reference
| Prop | Default | Type |
|---|---|---|
colorMode | on-light | "on-light" | "on-dark" |
items | [] | BreadcrumbItem[] { id, label, isDropdown, 4 more } |
homeHref | / | string |