Pinecone

Menu: Default 

<nav class="global-nav" aria-labelledby="global-nav-label">
    <span id="global-nav-label" class="screen-reader-text">global navigation</span>
    <ul class="global-nav__list">
        <li class="global-nav__list-item global-nav__list-item--first">
            <a class="global-nav__link" rel="external" href="https://platform.coop"><svg class="icon icon--pcc" aria-hidden="true" viewBox="0 0 32 32" focusable="false">
                    <use href="/images/pcc.svg#pcc" />
                </svg>
                Platform Cooperativism Consortium</a>
        </li>
        <li class="global-nav__list-item">
            <a class="global-nav__link" aria-current="true" rel="home" href="https://resources.platform.coop/">Resource Library</a>
        </li>
    </ul>
</nav>
<a href="/" class="link link--brand">
    <svg class="icon icon--pcc" aria-hidden="true" viewBox="0 0 32 32" focusable="false">
        <use href="/images/pcc.svg#pcc" />
    </svg>
    <span class="brand__title screen-reader-text">Platform Cooperativism Consortium</span>
</a>
<div class="inner">
    <button class="button button--borderless search-toggle" aria-expanded="false"><span class="screen-reader-text">Search </span><svg class="icon icon--search" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/search.svg#search" />
        </svg>
    </button>
    <form role="search" method="get" class="search-form" action="/">
        <label>
            <span class="screen-reader-text">search</span>
            <input id="s" name="s" type="search" />
        </label>
        <button type="submit" class="button button--search"><span class="screen-reader-text">submit search</span><svg class="icon icon--search" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
                <use href="/images/search.svg#search" />
            </svg>
        </button>
    </form>
    <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>
</div>
 
{% render '@global-nav' %}
{% render '@brand' %}
<div class="inner">
	{% if modifier !== 'home' %}
	{% render '@search-button' %}
	{% render '@search-form', {standAlone: true}, true %}
	{% endif %}
	{% render '@nav' %}
</div>
 
{
  "inBanner": true
}

Menu

The Menu component belongs within the .container inside the page header:

<header role="banner">
  <div class="container">
    <!-- Brand image/link -->
    <div class="inner">
      <!-- Search toggle button -->
      <!-- Search form -->
      <!-- Nav landmark -->
    </div>
  </div>