Breadcrumbs
Indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS. Add active
prop to active Breadcrumb.Item
. Do not
set both active
and href
attributes. active
overrides href
and span
element is rendered instead of a
.
Example
<Breadcrumb> <Breadcrumb.Item href="#">Home</Breadcrumb.Item> <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> Library </Breadcrumb.Item> <Breadcrumb.Item active>Data</Breadcrumb.Item> </Breadcrumb>;
API
Breadcrumbview source file
import Breadcrumb from 'react-bootstrap/Breadcrumb'
Name | Type | Default | Description |
---|---|---|---|
as | elementType | <nav> | You can use a custom element type for this component. |
label | string | 'breadcrumb' | ARIA label for the nav element https://www.w3.org/TR/wai-aria-practices/#breadcrumb |
listProps | object | {} | Additional props passed as-is to the underlying |
bsPrefix | string | 'breadcrumb' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
Breadcrumb.Itemview source file
import Breadcrumb from 'react-bootstrap/Breadcrumb'
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Adds a visual "active" state to a Breadcrumb Item and disables the link. |
as | elementType | <li> | You can use a custom element type for this component. |
href | string |
| |
target | string |
| |
title | node |
| |
bsPrefix | string | 'breadcrumb-item' | Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |