<nav id="nav-main" class="nav-primary" aria-label="Main Menu">
    <ul class="nav-primary__list">
        <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link nav-primary__link--current-page" href="#">Nav 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="#">Nav 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="#">Nav 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="#">Nav 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 nav-primary__link--has-children" aria-haspopup="true">
            <a class="nav-primary__link" href="#">Nav 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="#">Nav 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>
    </ul>
</nav>
<nav id="nav-main" class="nav-primary" aria-label="Main Menu">
  <ul class="nav-primary__list">
    <li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link nav-primary__link--current-page" href="#">Nav 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="#">Nav 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="#">Nav 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="#">Nav 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 nav-primary__link--has-children" aria-haspopup="true">
      <a class="nav-primary__link" href="#">Nav 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="#">Nav 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>
  </ul>
</nav>
{
  "order": 5
}
  • Handle: @navigation--primary-without-search-with-children
  • Preview:
  • Filesystem Path: src/components/03-components/11-navigation/02-navigation--primary-without-search-with-children.hbs

No notes defined.