Navbar « Collections ⟸ Documentation

Navbar

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis dui nec imperdiet tincidunt. Quisque luctus enim nunc, congue venenatis felis auctor in. Ut ut rutrum ipsum. Sed tempor, dolor id dignissim rhoncus, elit purus vestibulum mi, semper vehicula ante ipsum non lectus.

<header class="navbar">
  <a href="..." id="brand">...</a>

  <nav>
    <ul class="knobs">
      <li class="active"><a href="">...</a></li>
      <li><a href="">...</a></li>
      <li><a href="">...</a></li>
    </ul>
  </nav>

  <div class="spacer"></div>

  <div class="suggestions">
    <form class="group">
      <svg class="icon"></svg>
      <input type="search" class="prepend-icon" placeholder="Search...">
    </form>
    <div class="panel">...</div>
  </div>

  <nav>
    <ul>
      <li><a href="...">...</a></li>
    </ul>
  </nav>
</header>

Branding

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, numquam doloremque perspiciatis. Quia, placeat, sunt! Earum repudiandae tenetur recusandae adipisci quos alias ut repellendus perspiciatis, dolorem suscipit possimus aliquid vero.

<header class="navbar">
  <a href="..." id="brand">...</a>

  <a href="..." id="brand">
    <svg></svg>
  </a>

  <a href="..." id="brand" class="ball">...</a>

  <a href="..." id="brand" class="ball">
    <svg></svg>
  </a>
</header>

<header class="navbar">
  <nav>
    <ul class="knobs">
      <li class="active">
        <a href="">
          <svg class="icon"></svg>
          ...
        </a>
      </li>
      <li>
        <a href="">
          <svg class="icon"></svg>
          ...
        </a>
      </li>
      <li class="dropdown">
        <a tabindex="">
          ...
          <svg class="icon"></svg>
        </a>
        <nav class="panel arrow"></nav>
      </li>
    </ul>
  </nav>
</header>

Search

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aut voluptas officiis incidunt laborum, illo explicabo recusandae. Velit, unde error minus explicabo ipsa nulla! Accusantium repudiandae at accusamus quia iste.

<header class="navbar">
  <form class="group">
    <svg class="icon"></svg>
    <input type="search" class="prepend-icon" placeholder="Search...">
  </form>

  <div class="suggestions">
    <form class="group">
      <input type="search" placeholder="Search with suggestions">
      <button class="primary">
        <svg class="icon"></svg>
      </button>
    </form>
    <div class="panel">...</div>
  </div>
</header>

Links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit iusto mollitia eos, blanditiis consectetur ipsum nam ex recusandae dicta error porro quas aliquam odio, aperiam inventore veniam autem maxime illum?

<header class="navbar">
  <nav>
    <ul>
      <li><a href="...">...</a></li>
    </ul>
  </nav>
</header>

Spacer

<header class="navbar">
  <div class="spacer"></div>
</header>