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.

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

Explore how to integrate a Bootstrap 4 breadcrumb with dropdowns into your web projects. This UI component enhances the traditional breadcrumb by adding dropdowns, providing a more dynamic and user-friendly navigation experience. Follow these simple steps to seamlessly incorporate this feature into your own project:

Copy the Code Snippet:

Begin by copying the provided HTML code snippet for the Bootstrap 4 breadcrumb with dropdowns.

Link Bootstrap CSS and Necessary Scripts:

Ensure Bootstrap CSS and the necessary scripts (jQuery, Popper.js, and Bootstrap JS) are linked in the <head> and before the closing </body> tag of your HTML file. Include the following links:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Customize and Make It Yours:

Modify the breadcrumb with a dropdown component to fit your specific navigation path and design requirements. Adjust the breadcrumb items, links, and dropdown contents to match your website's structure and theme. Use additional Bootstrap utility classes or custom CSS to further customize the appearance and functionality.

Test and Implement:

Test the appearance and functionality of the breadcrumb with dropdowns to ensure it behaves as expected. Verify that the breadcrumb is responsive and displays correctly across different devices and screen sizes.

By following these steps, you can effectively integrate and customize the Bootstrap 4 breadcrumb with dropdowns according to your project's needs. Enhance user navigation and experience with this dynamic and responsive UI component.

Code Explanation

Navigation Element (`<nav class="container mt-5" aria-label="breadcrumb">`):

<nav>: An HTML element used to define a set of navigation links.
class="container mt-5":
- container: A Bootstrap class that provides a responsive fixed-width container.
- mt-5: A Bootstrap class that adds a margin on the top (t) with a size of 5 (large), creating vertical spacing above the container.
aria-label="breadcrumb": An accessibility attribute that provides an accessible name for the navigation region, indicating that this is a breadcrumb navigation.

Ordered List (`<ol class="breadcrumb">`):

<ol>: An HTML element that defines an ordered list.
class="breadcrumb": A Bootstrap class that styles the list as a breadcrumb navigation.

Breadcrumb Items:

Home Item (<li class="breadcrumb-item"><a href="#">Home</a></li>):
- <li>: An HTML element that defines a list item.
- class="breadcrumb-item": A Bootstrap class that styles the list item as part of a breadcrumb.
- <a href="#">Home</a>: A hyperlink with the text "Home".
Library Item (<li class="breadcrumb-item"><a href="#">Library</a></li>):
- Similar to the "Home" item, this is another breadcrumb item with a hyperlink to "Library".
- <a href="#">Library</a>: A hyperlink with the text "Library".
Dropdown Item (<li class="breadcrumb-item dropdown">):
- class="breadcrumb-item dropdown": A Bootstrap class that styles the list item as part of the breadcrumb and enables dropdown functionality.
- Dropdown Toggle (<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>):
- class="dropdown-toggle": A Bootstrap class that styles the link as a dropdown toggle.
- href="#": A hyperlink attribute (the link destination).
- role="button": Indicates that this element functions as a button.
- id="dropdownMenuLink": Sets an ID for the dropdown toggle to associate it with the dropdown menu.
- data-toggle="dropdown": Enables the dropdown functionality.
- aria-haspopup="true": Indicates that the dropdown menu is a popup that can appear.
- aria-expanded="false": Indicates that the dropdown menu is initially not expanded.
- The text "Dropdown" is displayed as the label for the dropdown toggle.
- Dropdown Menu (<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">):
- class="dropdown-menu": A Bootstrap class that styles the div as a dropdown menu.
- aria-labelledby="dropdownMenuLink": Associates the dropdown menu with the toggle button using the ID.
- Dropdown Items:
- <a class="dropdown-item" href="#">Action</a>: A link styled as a dropdown item with the text "Action".
- <a class="dropdown-item" href="#">Another action</a>: Another dropdown item with the text "Another action".
- <a class="dropdown-item" href="#">Something else here</a>: Another dropdown item with the text "Something else here".
Active Item (<li class="breadcrumb-item active" aria-current="page">Data</li>):
- class="breadcrumb-item active":
- breadcrumb-item: Styles the item as part of the breadcrumb.
- active: Indicates that this is the current page.
- aria-current="page": An accessibility attribute that provides screen readers with information that this item represents the current page in the navigation hierarchy.
- "Data": The text displayed for this breadcrumb item, indicating it is the current page.