<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 53
- Banners 15
- Blog 56
- Call to action 95
- Careers 4
- Contact 38
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 43
- Features 132
- Footers 53
- Graphs 18
- HTTP codes 48
- Hero section 91
- How it works 43
- Logo clouds 72
- Modals 3
- Navbar 68
- Navigation (horizontal) 92
- Navigation (vertical) 6
- Newsletter 45
- Portfolio 39
- Pricing 43
- Projects 9
- Reviews 5
- Sign in / Sign up 71
- Stats 76
- Tables 57
- Team 41
- Testimonials 41
- Users 25
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.
