Breadcrumb
Enhanced breadcrumb navigation with smooth animations, customizable separators, and improved accessibility. Perfect for showing hierarchical page location with visual clarity.
Installation
Install via CLI
npx @moontra/moonui-cli add breadcrumbUsage
Examples
Basic Breadcrumb
Simple breadcrumb with home and current page
Variants & Sizes
Tune how loud the trail is: default for standalone page headers, muted when it sits above a large title that should win attention, ghost for dense toolbars. Size follows the heading it belongs to
With Icons
Anchor the trail with a recognisable root icon when the breadcrumb sits directly under a global header — users scan for the house before they read the labels
Custom Separator
Swap the chevron when the trail has to match an existing house style — pass the replacement as children, or as the icon prop when you want to set it once in a wrapper component
With Ellipsis
Collapse the middle of a deep hierarchy so the trail never wraps to a second line. The ellipsis is decorative on screen but announces "More pages" to screen readers
Responsive Breadcrumb
Hides middle items on mobile