Nav

<nav class="nav" aria-labelledby="menu-primary-label">
    <button class="button button--borderless menu-toggle" aria-expanded="false">
        <svg class="icon icon--open" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/menu.svg#menu" />
        </svg>
        <svg class="icon icon--close" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/close.svg#close" />
        </svg>
        <span id="menu-primary-label" class="menu-toggle__label">Menu</span>
    </button>
    <ul class="menu">
        <li class="menu__submenu-wrapper">
            <a class="menu__item" href="#explore">Explore</a>
            <ul class="menu__submenu">
                <li><a aria-current="page" class="menu__item" href="#browse-all">Browse all</a></li>
                <li><a class="menu__item" href="#topics">Topics</a></li>
                <li><a class="menu__item" href="#goals">Goals</a></li>
                <li><a class="menu__item" href="#formats">Formats</a></li>
                <li><a class="menu__item" href="#sectors">Sectors</a></li>
            </ul>
        </li>
        <li class="menu__submenu-wrapper">
            <a class="menu__item" href="#getting-started">Getting Started</a>
            <ul class="menu__submenu">
                <li><a class="menu__item" href="#how-to">How to use your library</a></li>
                <li><a class="menu__item" href="#glossary">Glossary</a></li>
            </ul>
        </li>
        <li class="menu__submenu-wrapper">
            <a class="menu__item" href="#my-resources">My Resources</a>
            <ul class="menu__submenu">
                <li><a class="menu__item" href="#favorites">Favorites</a></li>
                <li><a class="menu__item" href="#saved-searches">Saved searches</a></li>
            </ul>
        </li>
        <li>
            <a class="menu__item" aria-current="page" href="#about">About</a>
        </li>
        <li class="menu__submenu-wrapper">
            <a class="menu__item" href="#settings">Settings</a>
            <ul class="menu__submenu">
                <li><a class="menu__item" href="#language">Language</a></li>
                <li><a class="menu__item" href="#privacy">Privacy</a></li>
            </ul>
        </li>
        <li class="menu-item menu-item--languages menu__submenu-wrapper">
            <a class="menu__item" href="/en/settings/language/">
                <span class="menu__label">Language</span>
                <svg class="icon icon--language icon--lg" aria-hidden="true" viewBox="0 0 30 30" focusable="false">
                    <use href="/images/language.svg#language" />
                </svg>
            </a>
            <ul class="menu__submenu">
                <li class="menu-item"><a aria-current="true" href="/en/" class="menu__item">English</a></li>
                <li class="menu-item"><a href="/pt/" class="menu__item">Português</a></li>
                <li class="menu-item"><a href="/sv/" class="menu__item">Svenska</a></li>
                <li class="menu-item"><a href="/it/" class="menu__item">Italiano</a></li>
                <li class="menu-item"><a href="/es/" class="menu__item">Español</a></li>
                <li class="menu-item"><a href="/fr/" class="menu__item">Français</a></li>
                <li class="menu-item"><a href="/de/" class="menu__item">Deutsch</a></li>
            </ul>
        </li>
    </ul>
</nav>
<nav class="nav" aria-labelledby="menu-primary-label">
	<button class="button button--borderless menu-toggle" aria-expanded="false">
		{% render '@svg', {svg:'menu', class:'icon icon--open'}, true %}
		{% render '@svg', {svg:'close'}, true %}
		<span id="menu-primary-label" class="menu-toggle__label">{{ menuTitle }}</span>
	</button>
	<ul class="menu{% if modifier %} menu--{{ modifier }}{% endif %}">
		{% for id, menuItem in menuItems %}
		<li{% if menuItem.submenuItems %} class="menu__submenu-wrapper{% if menuItem.current %} current_page_ancestor current-menu-ancestor{% endif %}"{% endif %}>
			<a class="menu__item" {% if menuItem.current %}aria-current="page" {% endif %}href="#{{ id }}">{{ menuItem.label }}</a>
			{% if menuItem.submenuItems %}
			<ul class="menu__submenu">
				{% for id, submenuItem in menuItem.submenuItems %}
				<li><a {% if submenuItem.current %}aria-current="page"{% endif %}class="menu__item" href="#{{ id }}">{{ submenuItem.label }}</a></li>
				{% endfor %}
			</ul>
			{% endif %}
		</li>
		{% endfor %}
		<li class="menu-item menu-item--languages menu__submenu-wrapper">
			<a class="menu__item" href="/en/settings/language/">
				<span class="menu__label">Language</span>
				{% render '@svg', {svg:'language', class:'icon icon--language icon--lg', viewBox: '0 0 30 30'}, true %}
			</a>
			<ul class="menu__submenu">
				<li class="menu-item"><a aria-current="true" href="/en/" class="menu__item">English</a></li>
				<li class="menu-item"><a href="/pt/" class="menu__item">Português</a></li>
				<li class="menu-item"><a href="/sv/" class="menu__item">Svenska</a></li>
				<li class="menu-item"><a href="/it/" class="menu__item">Italiano</a></li>
				<li class="menu-item"><a href="/es/" class="menu__item">Español</a></li>
				<li class="menu-item"><a href="/fr/" class="menu__item">Français</a></li>
				<li class="menu-item"><a href="/de/" class="menu__item">Deutsch</a></li>
			</ul>
		</li>
	</ul>
</nav>
{
  "inBanner": true,
  "menuTitle": "Menu",
  "menuItems": {
    "explore": {
      "label": "Explore",
      "submenuItems": {
        "browse-all": {
          "label": "Browse all",
          "current": true
        },
        "topics": {
          "label": "Topics"
        },
        "goals": {
          "label": "Goals"
        },
        "formats": {
          "label": "Formats"
        },
        "sectors": {
          "label": "Sectors"
        }
      }
    },
    "getting-started": {
      "label": "Getting Started",
      "submenuItems": {
        "how-to": {
          "label": "How to use your library"
        },
        "glossary": {
          "label": "Glossary"
        }
      }
    },
    "my-resources": {
      "label": "My Resources",
      "submenuItems": {
        "favorites": {
          "label": "Favorites"
        },
        "saved-searches": {
          "label": "Saved searches"
        }
      }
    },
    "about": {
      "label": "About",
      "current": true
    },
    "settings": {
      "label": "Settings",
      "submenuItems": {
        "language": {
          "label": "Language"
        },
        "privacy": {
          "label": "Privacy"
        }
      }
    }
  }
}

There are no notes for this item.