Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Installation
Usage
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link render={<a href="/" />}> {"Home"->React.string} </Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link render={<a href="/components" />}>
{"Components"->React.string}
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page> {"Breadcrumb"->React.string} </Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>Examples
Basic
A basic breadcrumb with a home link and a components link.
Custom separator
Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.
Dropdown
You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.
Collapsed
We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.
Link component
To use a custom link component from your routing library, you can use the render prop on <BreadcrumbLink />.
API Reference
Breadcrumb
The Breadcrumb component is the root navigation element that wraps all breadcrumb components.
BreadcrumbList
The BreadcrumbList component displays the ordered list of breadcrumb items.
BreadcrumbItem
The BreadcrumbItem component wraps individual breadcrumb items.
BreadcrumbLink
The BreadcrumbLink component displays a clickable link in the breadcrumb.
BreadcrumbPage
The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).
BreadcrumbSeparator
The BreadcrumbSeparator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.
BreadcrumbEllipsis
The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.