Skip to main content

Chassis v5.4.0

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");
});