Navbar
Use navbar as wrapper for nav.
<nav class="navbar">
<div class="navbar-section">
<a class="nav-brand" href="">Navbar</a>
</div>
<form class="nav-form">
<input class="form-field" type="search" name="nav-search" placeholder="search...">
</form>
<div class="navbar-section">
<ul class="nav-list">
<li class="nav-list-item active">
<a href="" class="nav-link">
Services
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
About
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
Contact us
</a>
</li>
</ul>
</div>
</nav>
Primary Navbar
Use navbar as wrapper for nav and use
navbar-primary to get a primary color.
<nav class="navbar navbar-primary">
<div class="navbar-section">
<a class="nav-brand" href="">Navbar</a>
</div>
<div class="navbar-section">
<ul class="nav-list">
<li class="nav-list-item active">
<a href="" class="nav-link">
Services
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
About
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
Contact us
</a>
</li>
</ul>
</div>
</nav>
Dark Navbar
Use navbar as wrapper for nav and use
navbar-dark to get a dark color.
<nav class="navbar navbar-dark">
<div class="navbar-section">
<a class="nav-brand" href="">Navbar</a>
</div>
<div class="navbar-section">
<ul class="nav-list">
<li class="nav-list-item active">
<a href="" class="nav-link">
Services
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
About
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
Contact us
</a>
</li>
</ul>
<form class="nav-form">
<input class="form-field" type="search" name="nav-search" placeholder="search...">
</form>
</div>
</nav>
Light Navbar
Use navbar as wrapper for nav and use
navbar-light to get a light color.
<nav class="navbar navbar-light">
<div class="navbar-section">
<a class="nav-brand" href="">Navbar</a>
</div>
<form class="nav-form">
<input class="form-field" type="search" name="nav-search" placeholder="search...">
</form>
<div class="navbar-section">
<ul class="nav-list">
<li class="nav-list-item active">
<a href="" class="nav-link">
Services
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
About
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
Contact us
</a>
</li>
</ul>
</div>
</nav>
Hamburger/Drawer Navbar
This navbar will collapse on small screens and hamburger will be displayed. This hamburger will open a drawer when clicked on it.
<nav class="navbar">
<div class="navbar-section">
<a class="nav-brand" href="">Navbar</a>
</div>
<button class="btn btn-icon navbar-toggler">
<i class="fas fa-bars"></i>
</button>
<div class="collapse-section">
<div class="navbar-section">
<div class="nav-section-header">
<span class="text-md fw-semi-bold">Menu</span>
<button class="btn btn-icon collapse-close-btn">
<i class="fas fa-times"></i>
</button>
</div>
<form class="nav-form">
<input class="form-field" type="search" name="nav-search" placeholder="search...">
</form>
<ul class="nav-list">
<li class="nav-list-item active">
<a href="" class="nav-link">
Services
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
About
</a>
</li>
<li class="nav-list-item">
<a href="" class="nav-link">
Contact us
</a>
</li>
</ul>
</div>
</div>
</nav>
const navbarTogglerBtn = document.querySelector(".navbar-toggler")
const collapseSection = document.querySelector(".collapse-section")
const collapseCloseBtn = document.querySelector(".collapse-close-btn")
navbarTogglerBtn.addEventListener("click", () => {
collapseSection.classList.add("show-collapse-section")
})
collapseCloseBtn.addEventListener('click', () => {
collapseSection.classList.remove("show-collapse-section")
})