Drawer

Top position.

Download on GitHub

Currently: v3.2.2

Markup

<body class="drawer drawer--top">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>

.drawer position modifier [ top | left | right ]

<body class="drawer drawer--top">...</body>

<body class="drawer drawer--left">...</body>

<body class="drawer drawer--right">...</body>

More example on GitHub Repo