isCurrentPage prop to the
Breadcrumb.Item that matches the current path.
separator used in the breadcrumb by passing a string, like
'-' or any Component.
Breadcrumb composes Box so you can pass all Box props to change the style of the breadcrumbs. Let's say we need to increase the fontSize and change color of the breadcrumbs.
|separator||JSX.Element, string||The visual separator between the breadcrumb item.||-|
|spacing||The space between each stack item.||-|
|isCurrentPage||boolean||If true, it indicates that the breadcrumb link is active page.||-|
Breadcrumb.Link composes the
Link component so you can use all Link props.
- The Breadcrumbs are rendered in a nav to denote that it is a navigation landmark.
- The Breadcrumb nav has aria-label set to breadcrumb.
- The BreadcrumbItem with isCurrentPage prop adds the aria-current=page to the BreadcrumbLink. The separator has role set to presentation to denote that its for presentation purposes.