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