A Bootstrap Navbar is a navigation header that is placed at the top
of the page. It can extend or collapse, depending on the screen
size. A standard navigation bar is created with
<nav class="navbar navbar-default">
.
Check this 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.
<base-nav class= "navbar-main" type= "default" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Default Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "javascript:voidd(0)" >
<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= "javascript:voidd(0)" >
<i class= "ni ni-notification-70" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<base-dropdown class= "nav-item" >
<a role= "button" slot= "title" href= "#" class= "nav-link" data-toggle= "dropdown" >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</a>
<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>
</base-dropdown>
</ul>
</base-nav>
Examples
<!-- Navbar primary -->
<base-nav class= "navbar-main" type= "primary" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Primary Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "javascript:voidd(0)" >
<span class= "nav-link-inner--text" > Discover</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "javascript:voidd(0)" >
<span class= "nav-link-inner--text" > Profile</span>
</a>
</li>
<base-dropdown class= "nav-item" >
<a role= "button" slot= "title" href= "#" class= "nav-link" data-toggle= "dropdown" >
<span class= "nav-link-inner--text" > Settings</span>
</a>
<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>
</base-dropdown>
</ul>
</base-nav>
<!-- Navbar success -->
<base-nav class= "navbar-main mt-8" type= "success" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Success Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "javascript:voidd(0)" >
<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= "javascript:voidd(0)" >
<i class= "ni ni-planet" ></i>
<span class= "nav-link-inner--text d-lg-none" > Profile</span>
</a>
</li>
<base-dropdown class= "nav-item" >
<a role= "button" slot= "title" href= "#" class= "nav-link" data-toggle= "dropdown" >
<i class= "ni ni-settings-gear-65" ></i>
<span class= "nav-link-inner--text d-lg-none" > Settings</span>
</a>
<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>
</base-dropdown>
</ul>
</base-nav>
<!-- Navbar danger -->
<base-nav class= "navbar-main" type= "danger" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Danger Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-google-plus" ></i>
<span class= "nav-link-inner--text d-lg-none" > Google +</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-instagram" ></i>
<span class= "nav-link-inner--text d-lg-none" > Instagram</span>
</a>
</li>
</ul>
</base-nav>
<!-- Navbar warning -->
<base-nav class= "navbar-main" type= "warning" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Warning Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-facebook-square" ></i>
<span class= "nav-link-inner--text d-lg-none" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-twitter" ></i>
<span class= "nav-link-inner--text d-lg-none" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-pinterest" ></i>
<span class= "nav-link-inner--text d-lg-none" > Pin</span>
</a>
</li>
</ul>
</base-nav>
<!-- Navbar info -->
<base-nav class= "navbar-main" type= "info" effect= "dark" expand >
<a class= "navbar-brand" href= "#" > Info Color</a>
<div class= "row" slot= "content-header" slot-scope= "{closeMenu}" >
<div class= "col-6 collapse-brand" >
<a href= "javascript:void(0)" >
<img src= "img/brand/blue.png" >
</a>
</div>
<div class= "col-6 collapse-close" >
<close-button @ click= "closeMenu" ></close-button>
</div>
</div>
<ul class= "navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto" >
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-facebook-square" ></i>
<span class= "nav-link-inner--text" > Facebook</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-twitter" ></i>
<span class= "nav-link-inner--text" > Twitter</span>
</a>
</li>
<li class= "nav-item" >
<a class= "nav-link nav-link-icon" href= "#" >
<i class= "fa fa-instagram" ></i>
<span class= "nav-link-inner--text" > Instagram</span>
</a>
</li>
</ul>
</base-nav>