Used to display the current page path and quickly return to the history page.

  • <Breadcrumb>
  • <Breadcrumb.Item>


import { Breadcrumb } from 'rsuite';



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



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


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
πŸŽ‰ v5 is released! Head to the v5 documentation to get started.