Bootstrap CSS Breadcrumb With Dropdown Navigation

A simple bootstrap and css based Breadcrumb design which you can use in your web based project to display Navigation of the page with Dropdown feature. you can place multiple links under dropdown with additional links. make changes in css to customize look and feel of Breadcrumb.

Bootstrap CSS Breadcrumb With Dropdown Navigation

Libraries

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

HTML

<div class="grid">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">San Pedro de Atacama</a></li>
            <li class="active relative drop-container">
                <span href="#">Geysers del Tatio (Standard) <span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span></span>
                <div class="drop bg-white">
                    <ul class="list pl0">
                        <li><a href="#">Geysers del Tatio (Superior)</a></li>
                        <li><a href="#">Geysers del Tatio (Lujo)</a></li>
                    </ul>
                </div>
            </li>
        </ol>
    </div>
</div>


CSS

body {
  background-color: #171722;
}
 
.grid {
  display: grid;
  align-items: center;
  height: 100vh;
}
 
.small {
  font-size: 10px;
}
 
.drop-container:hover .drop {
  display: block;
}
.drop-container .drop {
  display: none;
  position: absolute;
  top: 20px;
  left: 8px;
}
.drop-container .drop a {
  display: block;
  padding: 8px 16px;
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by kkhenriquez. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.