Breadcrumbs

A navigation component that shows the current page's location within a navigational hierarchy. It consists of two components: Breadcrumbs and BreadcrumbItem.

Props

NameDefaultType
separatorstring
Custom separator text/symbol between breadcrumb items. If omitted, a default caret icon is shown
NameDefaultType
labelstring
Text to display in the breadcrumb item
hrefstring
URL to navigate to when the item is clicked

Slots

NameAcceptsDescription
defaultBreadcrumbItemAccepts only breadcrumb items
NameAcceptsDescription
defaultanyCustom content for the breadcrumb item. Falls back to label prop if empty

Examples

Custom Separator

Custom Content