<section>
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a>
<div class="collapse navbar-collapse me-5 justify-content-end">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#" >Features</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Solutions</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Resources</a></li>
<li class="nav-item"><a class="nav-link" href="#" >Pricing</a></li>
</ul>
</div>
<div class="d-none d-lg-block"><a class="btn btn-primary" href="#" >Try 14 Days Free Trial</a></div>
<div class="d-lg-none">
<button class="btn navbar-burger p-0">
<svg class="text-primary" 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="flaro-assets/logos/flaro-logo-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-8"><a class="nav-link text-dark" href="#" >Features</a></li>
<li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Solutions</a></li>
<li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Resources</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#" >Pricing</a></li>
</ul>
</div>
<div><a class="btn w-100 fw-medium" href="#" >Login</a><a class="btn w-100 btn-primary" href="#" >Sign in</a></div>
</nav>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- About us 5
- Alert 85
- Application 63
- Banners 15
- Blog 93
- Breadcrumbs 4
- Call to action 113
- Careers 16
- Contact 52
- Content 62
- Cookies 53
- Download 5
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 58
- Features 160
- Footers 68
- Graphs 18
- HTTP codes 65
- Hero section 106
- How it works 53
- Logo clouds 89
- Modals 6
- Navbar 68
- Navigation (horizontal) 107
- Navigation (vertical) 6
- Newsletter 58
- Portfolio 39
- Pricing 58
- Projects 14
- Reviews 5
- Rich text 3
- Services 5
- Sign in / Sign up 99
- Stats 89
- Tables 57
- Team 56
- Testimonials 58
- Toasts 6
- 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.
