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

Code

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