Breadcrumb

Navigation breadcrumbs help users understand their current location within the application hierarchy. Customize separators and add interactive elements.

With Slashes

Classic breadcrumb navigation with forward slash separators

With Dots

Breadcrumb with dot separators and onClick handler

With Chevrons

Modern breadcrumb style with chevron separators

Props Reference

PropTypeDescription
itemsarrayArray of breadcrumb items with label, href (optional), and onClick (optional)
separatorReactNodeCustom separator element (text, icon, or SVG)
labelstring(Item prop) Display text for the breadcrumb item
hrefstring(Item prop) Navigation URL for the breadcrumb item
onClickfunction(Item prop) Click handler for the breadcrumb item