Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Basic example

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.

Design

React

<Breadcrumb>
    <Breadcrumb.Item active>Home</Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb>
    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
    <Breadcrumb.Item active>Library</Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb>
    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#">Library</Breadcrumb.Item>
    <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

Dividers

Dividers are automatically added in CSS through ::before and content . They can be changed by modifying a local CSS custom property. We have created a new style named .slash-breadcrumb class to impliment the same.

Design

Code

<div className='slash-breadcrumb'>
    <Breadcrumb>
        <Breadcrumb.Item active>Home</Breadcrumb.Item>
    </Breadcrumb>
    <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item active>Library</Breadcrumb.Item>
    </Breadcrumb>
    <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Library</Breadcrumb.Item>
        <Breadcrumb.Item active>Data</Breadcrumb.Item>
    </Breadcrumb>
</div>