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
API
Breadcrumb
import Breadcrumb from 'react-bootstrap/Breadcrumb'
Copy import code for the Breadcrumb component
Name | Type | Default | Description |
---|---|---|---|
as |
elementType
|
<nav> |
You can use a custom element type for this component. |
className |
string
|
||
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.Item
import Breadcrumb from 'react-bootstrap/Breadcrumb'
Copy import code for the Breadcrumb component
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
|
|
|
linkAs |
elementType
|
<SafeAnchor> |
You can use a custom element type for this component's inner link. |
linkProps |
object
|
{} |
Additional props passed as-is to the underlying link for non-active items. |
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. |
© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/breadcrumb/