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

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'
listProps
object
 {}

Additional props passed as-is to the underlying <ol> element
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.
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

href attribute for the inner a element
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

target attribute for the inner a element
title
node

title attribute for the inner a element
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/