Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example
<nav class= "navbar navbar-horizontal navbar-expand-lg navbar-dark bg-default" >
<div class= "container" >
<a class= "navbar-brand" href= "#" > Default Color</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbar-default" aria-controls= "navbar-default" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbar-default" >
<div class= "navbar-collapse-header" >
<div class= "row" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "../../assets/img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<button type= "button" class= "navbar-toggler" data-toggle= "collapse" data-target= "#navbar-default" aria-controls= "navbar-default" aria-expanded= "false" aria-label= "Toggle navigation" >
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class= "navbar-nav ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-favourite-28" ></i>
<span class= "nav-link-inner--text d-lg-none" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "ni ni-notification-70" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link nav-link-icon" href= "#" id= "navbar-default_dropdown_1" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</a>
<div class= "dropdown-menu dropdown-menu-right" aria-labelledby= "navbar-default_dropdown_1" >
<a class= "dropdown-item" href= "#" > Action</a>
<a class= "dropdown-item" href= "#" > Another action</a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Variations