Navbar

Navbar is a layout container that appears in the header of apps and websites.

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.

<header class="navbar">
  <section class="navbar-section">
    <a href="..." class="mr-2">Ayo.css</a>
    <a href="..." class="btn btn-text">Docs</a>
    <a href="..." class="btn btn-text">GitLab</a>
  </section>
<section class="navbar-section">
  <div class="input-group input-inline">
    <input class="form-input" type="text" placeholder="search">
    <button class="btn btn-primary input-group-btn">Search</button>
    </div>
  </section>
</header>

You can use navbar-center class to have a centered section.

<header class="navbar">
  <section class="navbar-section">
    <a href="#" class="btn btn-text">Docs</a>
    <a href="#" class="btn btn-text">Examples</a>
  </section>
  <section class="navbar-center">
    <!-- centered logo or brand -->
  </section>
  <section class="navbar-section">
    <a href="#" class="btn btn-text">Twitter</a>
    <a href="#" class="btn btn-text">GitLab</a>
  </section>
</header>