Bootstrap Navbar
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.
Copy
< nav
class = " navbar navbar-expand-lg top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent " >
< div class = " container" >
< a class = " navbar-brand text-white " href = " " rel = " tooltip" title = " Designed and Coded by Creative Tim" data-placement = " bottom" target = " _blank" >
Soft UI Design System
</ a>
< button class = " navbar-toggler" type = " button" data-toggle = " collapse" data-target = " #navigation" aria-controls = " navigation" aria-expanded = " false" aria-label = " Toggle navigation" >
< span class = " navbar-toggler-icon" > </ span>
</ button>
< div class = " collapse navbar-collapse" id = " navigation" >
< ul class = " navbar-nav navbar-nav-hover mx-auto" >
< li class = " nav-item px-3" >
< a class = " nav-link" >
Pages
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Utilities
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Blocks
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Docs
</ a>
</ li>
</ ul>
< ul class = " navbar-nav ms-auto" >
< button class = " btn btn-white mb-0" > Buy Now</ button>
</ ul>
</ div>
</ div>
</ nav>
Examples
Copy
< nav
class = " navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3" >
< div class = " container" >
< a class = " navbar-brand text-white" href = " " rel = " tooltip" title = " Designed and Coded by Creative Tim" data-placement = " bottom" target = " _blank" >
Soft UI Design System
</ a>
< button class = " navbar-toggler" type = " button" data-toggle = " collapse" data-target = " #navigation" aria-controls = " navigation" aria-expanded = " false" aria-label = " Toggle navigation" >
< span class = " navbar-toggler-icon" > </ span>
</ button>
< div class = " collapse navbar-collapse" id = " navigation" >
< ul class = " navbar-nav navbar-nav-hover mx-auto" >
< li class = " nav-item px-3" >
< a class = " nav-link text-white opacity-8" >
Pages
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link text-white opacity-8" >
Utilities
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link text-white opacity-8" >
Blocks
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link text-white opacity-8" >
Docs
</ a>
</ li>
</ ul>
< ul class = " navbar-nav ms-auto" >
< button class = " btn bg-gradient-primary mb-0" > Buy Now</ button>
</ ul>
</ div>
</ div>
</ nav>
< nav
class = " navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3" >
< div class = " container" >
< a class = " navbar-brand" href = " " rel = " tooltip" title = " Designed and Coded by Creative Tim" data-placement = " bottom" target = " _blank" >
Soft UI Design System
</ a>
< button class = " navbar-toggler" type = " button" data-toggle = " collapse" data-target = " #navigation" aria-controls = " navigation" aria-expanded = " false" aria-label = " Toggle navigation" >
< span class = " navbar-toggler-icon" > </ span>
</ button>
< div class = " collapse navbar-collapse" id = " navigation" >
< ul class = " navbar-nav navbar-nav-hover mx-auto" >
< li class = " nav-item px-3" >
< a class = " nav-link" >
Pages
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Utilities
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Blocks
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link " >
Docs
</ a>
</ li>
</ ul>
< ul class = " navbar-nav ms-auto" >
< button class = " btn bg-gradient-primary mb-0" > Buy Now</ button>
</ ul>
</ div>
</ div>
</ nav>
< nav class = " navbar navbar-expand-lg blur blur-rounded top-0 border-bottom z-index-3 shadow w-100 mt-4 d-none d-lg-block my-3 py-2" >
< div class = " container-fluid" >
< a class = " navbar-brand font-weight-bolder ms-3" href = " " rel = " tooltip" title = " Designed and Coded by Creative Tim" data-placement = " bottom" target = " _blank" >
Soft UI Design System
</ a>
< button class = " navbar-toggler" type = " button" data-toggle = " collapse" data-target = " #navigation" aria-controls = " navigation" aria-expanded = " false" aria-label = " Toggle navigation" >
< span class = " navbar-toggler-icon" > </ span>
</ button>
< div class = " collapse navbar-collapse" id = " navigation" >
< ul class = " navbar-nav navbar-nav-hover mx-auto" >
< li class = " nav-item px-3" >
< a class = " nav-link" >
Pages
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Utilities
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Blocks
</ a>
</ li>
< li class = " nav-item px-3" >
< a class = " nav-link" >
Docs
</ a>
</ li>
</ ul>
< ul class = " navbar-nav" >
< button class = " btn btn-sm bg-gradient-dark btn-round mb-0 me-1" > Buy Now</ button>
</ ul>
</ div>
</ div>
</ nav>
</ div>