Responsive Navbar

Github Page

A complex, responsive navbar that includes site utilites, a primary navigation and a secondary navigation that sits at the bottom of the screen for small screen devices.

The following should occur:

At wide screen size, the full top bar should be displayed, with all items present.
At medium screen size, the current organisation name should be hidden within the top nav bar.
At small screen size, all primary items and the current organisation should be hidden within the top nav bar, and a new nav bar should be displayed, fixed to the bottom of the page.

Example - non-admins (no dropdown to change organisation)

Example - admins (includes static version of dropdown)

Code

Markup

<nav class="navbar" role="navigation">
  <div class="navbar__inner">
    <div class="navbar__logo">
      <span class="hidden">Site Name</span>
    </div>
    <ul class="primary-nav">
      <li>
        <a class="navbar__current" aria-current="page" href="#">
          Dashboard
          <span class="hidden">Current page</span>
        </a>
      </li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <ul class="management-nav">
      <li>
        <div class="dropdown open">
          <button
            class="management-nav__dropdown"
            type="button"
            aria-haspopup="true"
            aria-expanded="false"
            aria-label="Current company: Weyland Industries. Use the dropdown menu to switch companies"
          >
            <span class="navbar-icon navbar-icon--dropdown" aria-hidden="true" role="presentation"></span>
            <span class="hidden">Current Organisation:</span>
            <span class="hidden-medium">Weyland Industries</span>
          </button>
          <ul class="dropdown-menu" aria-label="Switch Companies">
            <li><a href="#"><b><span class="hidden">Current organisation: </span>Weyland Industries</a></b></li>
            <li><a href="#">Stark Industries</a></li>
            <li><a href="#">Cyberdyne Systems</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a
          class="management-nav__manage-user"
          href="#"
          aria-label="Manage My Profile"
        >
          <span class="navbar-icon navbar-icon--manage-user" aria-hidden="true" role="presentation"></span>
        </a>
      </li>
      <li>
        <a
          class="management-nav__manage-org navbar__current"
          href="#"
          aria-current="page"
          aria-label="Manage Current Organisation"
        >
          <span class="navbar-icon navbar-icon--manage-org" aria-hidden="true" role="presentation"></span>
        </a>
      </li>
      <li>
        <a
          class="management-nav__logout"
          href="#"
          aria-label="Logout"
        >
          <span class="navbar-icon navbar-icon--logout" aria-hidden="true" role="presentation"></span>
        </a>
      </li>
    </ul>
  </div>
</nav>

Github Page