Navbar

The navbar component is a responsive and versatile horizontal navigation bar which contains elements such as brand logo, title, search bar, redirecting links or icons. In mobile view it supports sliding drawer menu with the help of hamburger menu.

Navbar component works on grid layout model. So user can put content in three sections of the navbar, start, middle and end. Adjust window size to check responsiveness.

<nav class="navbar">
  <section class="start">...</section>
  <section class="middle flex-ct-ed"><label for="search">...</section>
  <section class="end flex-ct-ct">... </section>
</nav>