header-nav.html

<header id="navigation" class="p-navigation">
  <div class="p-navigation__banner">
    <div class="p-navigation__logo">
      <a class="p-navigation__link" href="https://maas.io/">
        <img class="p-navigation__image" src="https://assets.ubuntu.com/v1/4fac1d52-MAAS-Logo.svg" alt="MAAS documentation logo" />

      </a>
    </div>
    <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
    <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
  </div>
  <nav class="p-navigation__nav" role="menubar">

    <form id="search" class="p-search-box" action="https://docs.ubuntu.com/search">
      <input type="search" class="p-search-box__input" name="q" placeholder="Search MAAS docs" required="">

        <input type="hidden" name="domain" value="docs.maas.io" />

      <button type="reset" class="p-search-box__reset u-no-margin--right" alt="reset"><i class="p-icon--close"></i></button>
      <button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search"></i></button>
    </form>


    <ul class="p-navigation__links" role="menu">

      <li class="p-navigation__link" role="menuitem">
        <a href="https://maas.io/install">Install</a>
      </li>

      <li class="p-navigation__link" role="menuitem">
        <a href="https://maas.io/how-it-works">Architecture</a>
      </li>

      <li class="p-navigation__link" role="menuitem">
        <a href="https://maas.io/tour">Tour</a>
      </li>

      <li class="p-navigation__link is-selected" role="menuitem">
        <a href="/">Docs</a>
      </li>

      <li class="p-navigation__link" role="menuitem">
        <a href="https://maas.io/contact-us">Contact us</a>
      </li>

    </ul>

    <span class="u-off-screen">
      <a href="#main-content">Jump to main content</a>
    </span>
  </nav>
</header>