Overview

Add active prop to active Breadcrumb.Item. Do not set both active and href attributes. activeoverrides href and span element is rendered instead of a.

Default

Accessible Option

For accessible underlined links add class breadcrumb-underline to Breadcrumb .

Behavious

For implementations with large numbers of sub-directories, make use of dropdown that appears on click of ellipses as shown in the example below

API

import Breadcrumb from `@trimbleinc/modus-react-bootstrap/Breadcrumb`
NameTypeDefaultDescription
as
elementType
<nav>
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 <ol> element

bsPrefix
string
'breadcrumb'
import Breadcrumb.Item from `@trimbleinc/modus-react-bootstrap/Breadcrumb.Item`
NameTypeDefaultDescription
active
boolean
false

Adds a visual "active" state to a Breadcrumb Item and disables the link.

as
elementType
<li>
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'