<section>
<nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-3 px-5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt="">
</a>
<div class="collapse navbar-collapse me-5 justify-content-end">
<ul class="navbar-nav">
<li class="nav-item p-5">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Features</h3>
</a>
</li>
<li class="nav-item p-5">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Solutions</h3>
</a>
</li>
<li class="nav-item p-5">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Features</h3>
</a>
</li>
<li class="nav-item p-5">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Pricing</h3>
</a>
</li>
</ul>
</div>
<div class="d-none d-lg-block">
<div class="rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
<button class="btn btn-light px-4 py-3 rounded-1" type="button">
<h4 class="fs-17 fw-medium text-secondary mb-0">Start Free Trial</h4>
</button>
</div>
</div>
<div class="d-lg-none">
<button class="btn navbar-burger p-0">
<svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="currentColor"></rect>
<path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</nav>
<div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
<div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
<nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto">
<div class="d-flex align-items-center">
<a class="me-auto h4 mb-0 text-decoration-none" href="#">
<img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt="">
</a>
<a class="navbar-close" href="#">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
<div class="py-16">
<ul class="nav flex-column">
<li class="nav-item mb-12">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Features</h3>
</a>
</li>
<li class="nav-item mb-12">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Solutions</h3>
</a>
</li>
<li class="nav-item mb-12">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Resources</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-block p-0" href="#">
<h3 class="fs-17 fw-medium text-secondary mb-0">Pricing</h3>
</a>
</li>
</ul>
</div>
<div>
<button class="btn btn-light px-4 py-3 w-100 mb-5 rounded-1" type="button">
<h4 class="fs-17 fw-medium text-secondary mb-0">Login</h4>
</button>
<div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
<button class="btn btn-light px-4 py-3 w-100 rounded-1" type="button">
<h4 class="fs-17 fw-medium text-secondary mb-0">Start Free Trial</h4>
</button>
</div>
</div>
</nav>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 58
- Banners 15
- Blog 84
- Call to action 99
- Careers 8
- Contact 42
- Content 62
- Cookies 48
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 49
- Features 140
- Footers 58
- Graphs 18
- HTTP codes 55
- Hero section 96
- How it works 46
- Logo clouds 80
- Modals 6
- Navbar 68
- Navigation (horizontal) 97
- Navigation (vertical) 6
- Newsletter 49
- Portfolio 39
- Pricing 47
- Projects 9
- Reviews 5
- Rich text 3
- Sign in / Sign up 81
- Stats 84
- Tables 57
- Team 46
- Testimonials 46
- Users 25
Component #9
Component #10
A well-designed navigation component determines how easily users navigate your site. This will affect both the conversion of the page and its position in SEO.
Browse the Bootstrap navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Bootstrap navigation components and the code underneath them in Shuffle Editor.
