Navbar
This is a simple navbar that appears in the header of small to medium sized apps and websites.
<header class="ch-navbar">
<div class="ch-container">
<div class="ch-row">
<div class="xs:ch-col--12 sm:ch-col--3">
<a href="/" class="ch-navbar__title">
Chassis <span class="ch-text--normal">3.2.1</span>
</a>
<button class="ch-navbar__mobile" data-id="ch-navbar-toggle">
Menu
</button>
</div>
<div class="xs:ch-col--12 sm:ch-col--9">
<ul class="ch-navbar__nav" data-id="ch-navbar-menu">
<li>
<a href="/">Find a car</a>
<ul>
<li>
<a href="/">New cars</a>
</li>
<li>
<a href="/">Used cars</a>
</li>
</ul>
</li>
<li>
<a href="/">Servicing</a>
</li>
<li>
<a href="/">Rental</a>
</li>
</ul>
</div>
</div>
</div>
</header>
Modifiers
Class | Purpose |
---|---|
.ch-navbar--branded
|
Adds yellow underline to navbar, similar to arnoldclark.com |
.ch-navbar__nav__item--last
|
Aligns the dropdown to the right as it could be near the edge of the display. |
Sample JavaScript for toggling on mobile
var navbarToggle = document.querySelector('[data-id="ch-navbar-toggle"]');
var navbarMenu = document.querySelector('[data-id="ch-navbar-menu"]');
navbarToggle.addEventListener("click", function () {
navbarMenu.classList.toggle("ch-navbar__nav--open");
});