Documentation

HTML
Vue
Laravel
React
Tailwind
Angular
CodeIgniter

Requirements
File Structure

Basic
React

Favicon
Loading Transitions
Logo
Changing Fonts
Layout Configure
Sidebar and Header

Disable Form
Sizing
Input Group
Alternate Input
Floating Label
Alternate Float Label
Toggle Button
Validation

Tyography
Images
Tables
Figures

AOS Animation
Datepicker
Circle Progress
CounterUp
NoUiSlider
Data Table
Source & Credits
Upgrade Guide
Change Log

Breadcrumb

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

Examples

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

<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

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

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

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

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

You can also remove the divider setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

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