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.
Menu
<!-- Navbar Transparent -->
<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>
<!-- End Navbar -->
Examples
<!-- Navbar Dark -->
<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>
<!-- End Navbar -->
<!-- Navbar Light -->
<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>
<!-- End Navbar -->
<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>