Breadcrumb
Used to display the current page path and quickly return to the history page.
<Breadcrumb><Breadcrumb.Item>
Usage
import { Breadcrumb } from 'rsuite';Examples
Default
Custom separator
With Expand
Should automatically collapse if there are more than 5 items. Use maxItems to set the maximum number of breadcrumbs to display.
Used with Link in react-router
Props
<Breadcrumb>
| Property | Type (Default) |
Description |
|---|---|---|
| classPrefix | string ('breadcrumb') |
The prefix of the component CSS class |
| maxItems | numner(5) |
Set the maximum number of breadcrumbs to display |
| onExpand | (event: React.MouseEvent) => void | A function to be called when you are in the collapsed view and click the ellipsis |
| separator | React.Node ('/') |
Custom separator |
<Breadcrumb.Item>
| Property | Type (Default) |
Description |
|---|---|---|
| active | boolean | Active state |
| componentClass | React.ElementType ('ol') |
You can use a custom element for this component |
| renderItem | (item:React.Node) => React.Node | Custom rendering item |