2+ Breadcrumb Components - Bootstrap

Breadcrumbs are a navigational aid that displays the user's current location within a website's hierarchy. They help users understand where they are within the site and provide a way to navigate back to higher-level pages. With Bootstrap, creating stylish and functional breadcrumbs is simple. In this collection, we've gathered a variety of Bootstrap breadcrumb designs that you can seamlessly incorporate into your website. Whether you're building an e-commerce platform, a blog, or any other type of website, our collection offers options to enhance navigation and improve the overall user experience.

Bootstrap 4 Breadcrumb with Dropdowns

Enhance website navigation with Bootstrap 4 breadcrumbs featuring dropdowns. Learn how to provide users with flexible navigation options by dropdown menus into your breadcrumb navigation system.

Author: Admin

Preview
Code

<nav class="container mt-5" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item dropdown">
      <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

```
No Custom CSS
```
```
No need of JavaScript
```

Bootstrap 4 Breadcrumb with Icons

Elevate user experience with Bootstrap 4 breadcrumbs featuring icons. Learn how to incorporate visual cues into your website's navigation to guide users through different pages and sections.

Author: Admin

Preview
Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<nav class="container mt-5" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li class="breadcrumb-item"><a href="#"><i class="fa fa-book"></i> Library</a></li>
    <li class="breadcrumb-item active" aria-current="page"> Data</li>
  </ol>
</nav>

```
No Custom CSS
```
```
No need of JavaScript
```

Bootstrap 4 Default Breadcrumb

Easily add default breadcrumbs to your website with Bootstrap 4. Learn how to provide clear navigation paths for users to track their location and easily navigate back through pages.

Author: Admin

Preview
Code

<nav class="container mt-5" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

```
No Custom CSS
```
```
No need of JavaScript
```