Breadcrumb

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

<Breadcrumb as={"nav"}>
    <Breadcrumb.Item active>
        Home
    </Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb as={"nav"}>
    <Breadcrumb.Item href="">
        Home
    </Breadcrumb.Item>
    <Breadcrumb.Item href="" active>
        Library
    </Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb as={"nav"}>
    <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 --bs-breadcrumb-divider , or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

<Breadcrumb as="nav">
    <Breadcrumb.Item href="">
        Home
    </Breadcrumb.Item>
    <Breadcrumb.Item href="" active>
        Library
    </Breadcrumb.Item>
</Breadcrumb>