<nav id="nav-main" class="nav-primary" aria-label="Main Menu">
    <ul class="nav-primary__list">
        <li>
            <div class="nav-primary__search-mobile">
                <form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-mobile">
                    <label>
                        <span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
                        <input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
                    </label>
                    <input type="submit" class="nav-primary__search-submit" value="Search">
                </form>
            </div>
        </li>
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link nav-primary__link--current-page" href="#">Parent Item</a>
            <button class="nav-primary__toggle" aria-label="toggle"></button>
            <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link nav-primary__link--current-page" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
            </ul>
        </li>
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link" href="#">Parent Item</a>
            <button class="nav-primary__toggle" aria-label="toggle"></button>
            <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
            </ul>
        </li>
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link" href="#">Parent Item</a>
            <button class="nav-primary__toggle" aria-label="toggle"></button>
            <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
            </ul>
        </li>
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link" href="#">Parent Item</a>
            <button class="nav-primary__toggle" aria-label="toggle"></button>
            <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
            </ul>
        </li>
        <li class="nav-primary__item ">
            <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link" href="#">Parent Item</a>
            <button class="nav-primary__toggle" aria-label="toggle"></button>
            <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
                <li class="nav-primary__item">
                    <a class="nav-primary__link" href="#">Nav Item</a>
                </li>
            </ul>
        </li>
        <li>
            <div class="nav-primary__search-desktop">
                <button id="search-button" class="nav-primary__search-desktop-button">
                    <svg role="img" aria-label="Search Icon" class="nav-primary__search-icon" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Search Icon</title>
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(-15.000000, -15.000000)">
                                <g id="Nav-Item">
                                    <g transform="translate(12.000000, 12.000000)">
                                        <polygon class="Path-polygon" points="0 0 24 0 24 24 0 24"></polygon>
                                        <path d="M15.5,14 L14.71,14 L14.43,13.73 C15.41,12.59 16,11.11 16,9.5 C16,5.91 13.09,3 9.5,3 C5.91,3 3,5.91 3,9.5 C3,13.09 5.91,16 9.5,16 C11.11,16 12.59,15.41 13.73,14.43 L14,14.71 L14,15.5 L19,20.49 L20.49,19 L15.5,14 Z M9.5,14 C7.01,14 5,11.99 5,9.5 C5,7.01 7.01,5 9.5,5 C11.99,5 14,7.01 14,9.5 C14,11.99 11.99,14 9.5,14 Z" fill="#00598C" fill-rule="evenodd"></path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>

                <div class="nav-primary__search-block-form search-mobile" data-drupal-selector="search-block-form" id="block-search" role="search">

                    <form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-desktop">
                        <label>
                            <span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
                            <input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
                        </label>
                        <input type="submit" class="nav-primary__search-submit" value="Search">
                    </form>
                </div>
            </div>
        </li>
    </ul>
</nav>
<nav id="nav-main" class="nav-primary" aria-label="Main Menu">
  <ul class="nav-primary__list">
    <li>
      <div class="nav-primary__search-mobile">
        <form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-mobile">
          <label>
            <span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
            <input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
          </label>
          <input type="submit" class="nav-primary__search-submit" value="Search">
        </form>
      </div>
    </li>
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link nav-primary__link--current-page" href="#">Parent Item</a>
      <button class="nav-primary__toggle" aria-label="toggle"></button>
      <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link nav-primary__link--current-page" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
      </ul>
    </li>
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link" href="#">Parent Item</a>
      <button class="nav-primary__toggle" aria-label="toggle"></button>
      <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
      </ul>
    </li>
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link" href="#">Parent Item</a>
      <button class="nav-primary__toggle" aria-label="toggle"></button>
      <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
      </ul>
    </li>
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link" href="#">Parent Item</a>
      <button class="nav-primary__toggle" aria-label="toggle"></button>
      <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
      </ul>
    </li>
    <li class="nav-primary__item ">
      <a class="nav-primary__link" href="#">Nav Item</a>
    </li>
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link" href="#">Parent Item</a>
      <button class="nav-primary__toggle" aria-label="toggle"></button>
      <ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
        <li class="nav-primary__item">
          <a class="nav-primary__link" href="#">Nav Item</a>
        </li>
      </ul>
    </li>
    <li>
      <div class="nav-primary__search-desktop">
        <button id="search-button" class="nav-primary__search-desktop-button">
          <svg role="img" aria-label="Search Icon" class="nav-primary__search-icon" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Search Icon</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-15.000000, -15.000000)"><g id="Nav-Item"><g transform="translate(12.000000, 12.000000)"><polygon class="Path-polygon" points="0 0 24 0 24 24 0 24"></polygon><path d="M15.5,14 L14.71,14 L14.43,13.73 C15.41,12.59 16,11.11 16,9.5 C16,5.91 13.09,3 9.5,3 C5.91,3 3,5.91 3,9.5 C3,13.09 5.91,16 9.5,16 C11.11,16 12.59,15.41 13.73,14.43 L14,14.71 L14,15.5 L19,20.49 L20.49,19 L15.5,14 Z M9.5,14 C7.01,14 5,11.99 5,9.5 C5,7.01 7.01,5 9.5,5 C11.99,5 14,7.01 14,9.5 C14,11.99 11.99,14 9.5,14 Z" fill="#00598C" fill-rule="evenodd"></path></g></g></g></g></svg>
        </button>

        <div class="nav-primary__search-block-form search-mobile" data-drupal-selector="search-block-form" id="block-search" role="search">

          <form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-desktop">
            <label>
              <span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
              <input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
            </label>
            <input type="submit" class="nav-primary__search-submit" value="Search">
          </form>
        </div>
      </div>
    </li>
  </ul>
</nav>
{
  "order": 2
}
  • Handle: @navigation--primary
  • Preview:
  • Filesystem Path: src/components/03-components/11-navigation/01-navigation--primary.hbs

No notes defined.