<section>
<nav class="navbar navbar-dark navbar-expand-lg bg-secondary-dark">
<div class="container-fluid position-relative">
<a class="navbar-brand h4 mb-0 text-decoration-none" href="#">
<img src="zospace-assets/logos/zospace-logo.svg" alt="" style="height: 30px;" width="auto">
</a>
<div class="d-lg-none">
<button class="btn p-0 btn-sm navbar-burger">
<svg width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" transform="matrix(-1 0 0 1 39 0)" fill="#C4C4C4"></rect><rect width="20" height="2" rx="1" transform="matrix(-1 0 0 1 20 11)" fill="#C4C4C4"></rect></svg>
</button>
</div>
<div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
<ul class="navbar-nav mx-auto">
<li class="nav-item position-relative">
<a class="nav-link" href="#">Product</a>
<div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#">Story</a>
<div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#">Features</a>
<div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
<div class="d-none d-lg-block"><a class="btn btn-outline-light" href="#">Sign Up</a></div>
</div>
</nav>
<div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" 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 py-8 px-8 bg-white overflow-auto">
<div class="d-flex align-items-center mb-32">
<a class="me-auto h4 mb-0 text-decoration-none" href="#">
<img src="zospace-assets/logos/zospace-dark-logo.svg" alt="" style="height: 28px;" width="auto">
</a>
<button class="navbar-close btn-close" type="button" aria-label="Close"></button>
</div>
<div>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link text-dark py-5 ps-8 bg-primary-light rounded" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Story</a></li>
<li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Contact</a></li>
</ul>
</div>
<div class="mt-auto">
<div class="py-6"><a class="w-100 mb-2 btn btn-outline-light text-dark" href="#">Sign In</a><a class="w-100 btn btn-primary" href="#">Sign Up</a></div>
<p class="mb-4 small text-center text-muted">
<span>© 2022. All rights reserved.</span>
</p>
</div>
</nav>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 43
- Applications 5
- Banner 15
- Blog 53
- Call to action 86
- Contact 28
- Contacts 5
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 39
- Features 118
- Footers 48
- Graphs 18
- HTTP codes 43
- Headers 86
- How it works 39
- Logo clouds 68
- Modals 3
- Navbar 68
- Navigation (horizontal) 80
- Navigation (vertical) 6
- Navigations 4
- Newsletter 41
- Portfolio 39
- Pricing 35
- Projects 9
- Reviews 5
- Sign in / Sign up 65
- Stats 71
- Tables 52
- Tables 5
- Team 35
- Testimonials 35
- 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.
