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

    Breadcrumbview source file

    import Breadcrumb from 'react-bootstrap/Breadcrumb'Copy import code for the Breadcrumb component
    NameTypeDefaultDescription
    as
    elementType

    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 <ul> 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.

    Breadcrumb.Itemview source file

    import Breadcrumb from 'react-bootstrap/Breadcrumb'Copy import code for the Breadcrumb component
    NameTypeDefaultDescription
    active
    boolean
    		false

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

    as
    elementType

    You can use a custom element type for this component.

    href
    string

    href attribute for the inner a element

    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.