<section>
<nav class="navbar navbar-light navbar-expand-lg">
<div class="container">
<a class="navbar-brand h4 text-decoration-none" href="#">
<img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
</a>
<div class="d-lg-none">
<button class="btn btn-sm navbar-burger">
<svg class="d-block" width="16" height="16" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Mobile menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto me-4">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
</ul>
<div class="d-none d-lg-block"><a class="btn btn-danger" href="#">Contact Us</a></div>
</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-6 px-6 bg-white overflow-auto">
<div class="d-flex align-items-center mb-10">
<a class="me-auto h4 mb-0 text-decoration-none" href="#">
<img src="zeus-assets/logo/logo-zeus-red.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 mb-4"><a class="nav-link" href="#">About</a></li>
<li class="nav-item mb-4"><a class="nav-link" href="#">Company</a></li>
<li class="nav-item mb-4"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item mb-4"><a class="nav-link" href="#">Testimonials</a></li>
</ul>
</div>
<div class="mt-auto">
<div class="py-6"><a class="w-100 btn btn-primary" href="#">Contact Us</a></div>
<p class="mb-4 small text-center text-muted">
<span>© 2021 All rights reserved.</span>
</p>
</div>
</nav>
</div>
</section>Framework
Bootstrap
UI Library
Zeus
Navigation (horizontal) Components by Shuffle
Choose from 16 variations of Bootstrap Navigation (horizontal) components. Presented here are variants available in Zeus library.
Get access to all Bootstrap Navigation (horizontal) components, code and our visual editor. Try the demo for free!
