Responsive Standard Navigation

This is a simple responsive navigation pattern, which switches from a collapsible vertical menu, triggered by a toggle button, to a standard horizontal menu when the browser passes a certain breakpoint.

Modules: Toggle
Components: Toggle c-button Menu
Macros: ToggleButton MenuHeader MenuLink

Usage

The example below switches patterns when the browser window width passes 480px (xs breakpoint).

Note You can set it to any of the breakpoints except xxs by setting repsonsive class, eg: c-nav-responsive[@xs|@sm|@md|@lg|@xl|@xxl].

<nav class="c-nav-responsive c-nav-responsive@xs">
  <button class="c-toggle-button" data-module="Toggle" data-options='{"target":"parent"}'>
    <div class="c-toggle-button__init">
      <span class="o-icon o-icon--navicon c-toggle-button-icon--init"><svg viewBox="0 0 1 1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#navicon"></use></svg></span>
      <span class="c-toggle-button__text">c-menu</span>
    </div>
    <div class="c-toggle-button__close">
      <span class="o-icon o-icon--close c-toggle-button-icon--close"><svg viewBox="0 0 1 1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#close"></use></svg></span>
      <span class="c-toggle-button__text">Close</span>
    </div>
  </button>
  <ul class="c-menu c-menu--vertical">
    <li class="c-menu__item c-menu__item--left c-menu__item--flush"><span class="c-menu__header"><a href="index.html">Atomic</a></span></li>
    <li class="c-menu__item nav__item "><a href="index.html" class="c-menu__link">Home</a></li>
    <li class="c-menu__item nav__item "><a href="features.html" class="c-menu__link">Features</a></li>
    <li class="c-menu__item nav__item "><a href="docs/" class="c-menu__link">Docs</a></li>
    <li class="c-menu__item nav__item "><a href="https://github.com/jaywing/atomic" class="c-menu__link">Github</a></li>
  </ul>
</nav>

{% from 'macros/toggle-button.njk' import ToggleButton %}
{% from 'macros/menu.njk' import menuLink, menuHeader %}
{% set items = [
  { id: 'home', title: 'Home', url: 'index.html', null },
  { id: 'features', title: 'Features', url: 'features.html', null },
  { id: 'docs', title: 'Docs', url: 'docs/', null },
  { id: 'repo', title: 'Github', url: 'https://github.com/jaywing/atomic', null }
]
%}
<nav class="c-nav-responsive c-nav-responsive@xs">
  {{ ToggleButton("parent", "c-toggle-button--hideText") }}
  <ul class="c-menu c-menu--vertical">
    {{ menuHeader('Atomic', 'index.html', 'c-menu__item--left c-menu__item--flush') }}
    {% for item in items %}
      {{ menuLink(item.id, item.title, item.url, itemId) }}
    {% endfor %}
  </ul>
</nav>