Nav

<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54ded249" data-component=
"nav">
  <li id="6aaec54ded249-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded249-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54ded831"
      data-component="nav">
        <li id="6aaec54ded831-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
        "Arbete - Child 1 with a long name">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded831-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long name</span></a>
            <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name" aria-pressed=
            "false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </div><!-- nav.blade.php -->
          <div class="c-element c-nav__child-container" data-component="element">
            <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
            "id_6aaec54dedc3b" data-component="nav">
              <li id="6aaec54dedc3b-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dedc3b-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                </div>
              </li>
              <li id="6aaec54dedc3b-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dedc3b-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li id="6aaec54ded831-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded831-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54ded249-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded249-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54ded249-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded249-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54ded249-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54ded249-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54dee78d"
      data-component="nav">
        <li id="6aaec54dee78d-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dee78d-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
          </div>
        </li>
        <li id="6aaec54dee78d-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dee78d-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
          </div>
        </li>
        <li id="6aaec54dee78d-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dee78d-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
          </div>
        </li>
        <li id="6aaec54dee78d-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54dee78d-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54ded249-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54ded249-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true
])
@endnav

<ul class="c-nav u-position--relative c-nav--bordered c-nav--height-sm c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
"id_6aaec54deeff6" data-component="nav">
  <li id="6aaec54deeff6-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54deeff6-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54def404"
      data-component="nav">
        <li id="6aaec54def404-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
        "Arbete - Child 1 with a long name">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54def404-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long name</span></a>
            <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name" aria-pressed=
            "false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </div><!-- nav.blade.php -->
          <div class="c-element c-nav__child-container" data-component="element">
            <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
            "id_6aaec54def7f3" data-component="nav">
              <li id="6aaec54def7f3-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54def7f3-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                </div>
              </li>
              <li id="6aaec54def7f3-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54def7f3-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li id="6aaec54def404-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54def404-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54deeff6-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54deeff6-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54deeff6-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54deeff6-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54deeff6-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54deeff6-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df02f2"
      data-component="nav">
        <li id="6aaec54df02f2-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df02f2-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
          </div>
        </li>
        <li id="6aaec54df02f2-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df02f2-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
          </div>
        </li>
        <li id="6aaec54df02f2-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df02f2-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
          </div>
        </li>
        <li id="6aaec54df02f2-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df02f2-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54deeff6-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--sm" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54deeff6-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true,
    'height' => 'sm'
])
@endnav

<ul class="c-nav u-position--relative c-nav--bordered c-nav--height-sm c-nav--depth-1 unlist c-nav--vertical c-nav--indent-sublevels" aria-orientation="vertical" role="menu"
data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df0b19" data-component="nav">
  <li id="6aaec54df0b19-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0b19-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df0f40"
      data-component="nav">
        <li id="6aaec54df0f40-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
        "Arbete - Child 1 with a long name">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0f40-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long name</span></a>
            <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name" aria-pressed=
            "false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
             </span></span></button>
          </div><!-- nav.blade.php -->
          <div class="c-element c-nav__child-container" data-component="element">
            <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
            "id_6aaec54df1330" data-component="nav">
              <li id="6aaec54df1330-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1330-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                </div>
              </li>
              <li id="6aaec54df1330-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1330-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li id="6aaec54df0f40-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0f40-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54df0b19-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0b19-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54df0b19-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0b19-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54df0b19-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df0b19-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df1df0"
      data-component="nav">
        <li id="6aaec54df1df0-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1df0-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
          </div>
        </li>
        <li id="6aaec54df1df0-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1df0-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
          </div>
        </li>
        <li id="6aaec54df1df0-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1df0-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
          </div>
        </li>
        <li id="6aaec54df1df0-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df1df0-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54df0b19-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--sm" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54df0b19-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true,
    'height' => 'sm',
    'indentSubLevels' => true,
])
@endnav

<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df25e1"
data-component="nav">
  <li id="6aaec54df25e1-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df25e1-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a>
    </div>
  </li>
  <li id="6aaec54df25e1-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df25e1-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54df25e1-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df25e1-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54df25e1-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df25e1-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a>
    </div>
  </li>
  <li id="6aaec54df25e1-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df25e1-1-4__label" data-component="link"><span class="c-nav__text" style="">Omsorg och stöd</span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/', //Currently unsupported in horizontal mode
    'direction' => 'horizontal',
    'includeToggle' => false //Currently unsupported in horizontal mode
])
@endnav

<ul class="c-nav u-position--relative c-nav--height-sm c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id=
"id_6aaec54df2d6c" data-component="nav">
  <li id="6aaec54df2d6c-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete"
  data-js-popover-relative="popover_6aaec54df2d6c-1-0__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df2d6c-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" popovertarget=
      "popover_6aaec54df2d6c-1-0__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54df2d6c-1-0__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df31a1"
        data-component="nav">
          <li id="6aaec54df31a1-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
          "Arbete - Child 1 with a long name">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df31a1-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long
              name</span></a> <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name"
              aria-pressed="false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
               </span></span></button>
            </div><!-- nav.blade.php -->
            <div class="c-element c-nav__child-container" data-component="element">
              <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
              "id_6aaec54df35c5" data-component="nav">
                <li id="6aaec54df35c5-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df35c5-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                  </div>
                </li>
                <li id="6aaec54df35c5-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df35c5-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li id="6aaec54df31a1-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df31a1-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54df2d6c-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df2d6c-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54df2d6c-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df2d6c-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54df2d6c-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik"
  data-js-popover-relative="popover_6aaec54df2d6c-1-3__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df2d6c-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" popovertarget=
      "popover_6aaec54df2d6c-1-3__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54df2d6c-1-3__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54df41ee"
        data-component="nav">
          <li id="6aaec54df41ee-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df41ee-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
            </div>
          </li>
          <li id="6aaec54df41ee-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df41ee-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
            </div>
          </li>
          <li id="6aaec54df41ee-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df41ee-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
            </div>
          </li>
          <li id="6aaec54df41ee-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54df41ee-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54df2d6c-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--sm" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54df2d6c-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>
<div style="height: 100px;"></div><!-- Padder -->
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--height-md c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id=
"id_6aaec54e00856" data-component="nav">
  <li id="6aaec54e00856-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete"
  data-js-popover-relative="popover_6aaec54e00856-1-0__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00856-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" popovertarget=
      "popover_6aaec54e00856-1-0__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54e00856-1-0__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e00c63"
        data-component="nav">
          <li id="6aaec54e00c63-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
          "Arbete - Child 1 with a long name">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00c63-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long
              name</span></a> <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name"
              aria-pressed="false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
               </span></span></button>
            </div><!-- nav.blade.php -->
            <div class="c-element c-nav__child-container" data-component="element">
              <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
              "id_6aaec54e01054" data-component="nav">
                <li id="6aaec54e01054-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01054-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                  </div>
                </li>
                <li id="6aaec54e01054-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01054-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li id="6aaec54e00c63-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00c63-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54e00856-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00856-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54e00856-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00856-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54e00856-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik"
  data-js-popover-relative="popover_6aaec54e00856-1-3__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e00856-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" popovertarget=
      "popover_6aaec54e00856-1-3__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54e00856-1-3__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e01bdd"
        data-component="nav">
          <li id="6aaec54e01bdd-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01bdd-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
            </div>
          </li>
          <li id="6aaec54e01bdd-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01bdd-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
            </div>
          </li>
          <li id="6aaec54e01bdd-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01bdd-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
            </div>
          </li>
          <li id="6aaec54e01bdd-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e01bdd-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54e00856-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54e00856-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>
<div style="height: 100px;"></div><!-- Padder -->
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--height-lg c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id=
"id_6aaec54e08b6d" data-component="nav">
  <li id="6aaec54e08b6d-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete"
  data-js-popover-relative="popover_6aaec54e08b6d-1-0__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08b6d-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" popovertarget=
      "popover_6aaec54e08b6d-1-0__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54e08b6d-1-0__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e08f8c"
        data-component="nav">
          <li id="6aaec54e08f8c-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
          "Arbete - Child 1 with a long name">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08f8c-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long
              name</span></a> <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Child 1 with a long name"
              aria-pressed="false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
               </span></span></button>
            </div><!-- nav.blade.php -->
            <div class="c-element c-nav__child-container" data-component="element">
              <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
              "id_6aaec54e09379" data-component="nav">
                <li id="6aaec54e09379-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09379-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                  </div>
                </li>
                <li id="6aaec54e09379-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                  <div class="c-nav__item-wrapper">
                    <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09379-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li id="6aaec54e08f8c-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08f8c-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54e08b6d-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08b6d-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54e08b6d-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08b6d-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54e08b6d-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik"
  data-js-popover-relative="popover_6aaec54e08b6d-1-3__children-popover">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e08b6d-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" popovertarget=
      "popover_6aaec54e08b6d-1-3__children-popover" popovertargetaction="toggle" aria-haspopup="menu" type="button" data-component="button"><span class="c-button__label"><span class=
      "c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__popover c-popover" popover="auto" data-js-popover-relative="true" data-js-popover-horizontal-placement="left" data-js-popover-vertical-placement="bottom" id=
    "popover_6aaec54e08b6d-1-3__children-popover" data-component="element">
      <!-- nav.blade.php -->
      <div class="c-element c-nav__child-container" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e09ef3"
        data-component="nav">
          <li id="6aaec54e09ef3-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09ef3-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
            </div>
          </li>
          <li id="6aaec54e09ef3-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09ef3-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
            </div>
          </li>
          <li id="6aaec54e09ef3-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09ef3-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
            </div>
          </li>
          <li id="6aaec54e09ef3-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
            <div class="c-nav__item-wrapper">
              <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e09ef3-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li id="6aaec54e08b6d-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54e08b6d-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>
<div style="height: 100px;"></div><!-- Padder -->

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'horizontal',
    'includeToggle' => true,
    'allowStyle' => true,
    'height' => 'sm'
])
@endnav

<div style="height: 100px;"></div><!-- Padder -->

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'horizontal',
    'includeToggle' => true,
    'allowStyle' => true,
    'height' => 'md'
])
@endnav

<div style="height: 100px;"></div><!-- Padder -->

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'horizontal',
    'includeToggle' => true,
    'allowStyle' => true,
    'height' => 'lg'
])
@endnav

<div style="height: 100px;"></div><!-- Padder -->

<ul class="c-nav u-position--relative c-nav--height-md c-nav--depth-1 unlist c-nav--horizontal c-nav--extended-dropdown" aria-orientation="horizontal" role="menu"
data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0a7b4" data-component="nav">
  <li id="6aaec54e0a7b4-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0a7b4-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__extended-dropdown-container" data-component="element">
      <div class="c-element c-nav__extended-dropdown-content-area" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-nav__extended-dropdown-title c-typography__variant--h2" data-js-extended-dropdown-title="1" data-component="typography">
            Arbete
          </h2><!-- nav.blade.php -->
          <div class="c-element c-nav__child-container" data-component="element">
            <ul class="c-nav c-nav--bordered c-nav__extended-child-menu c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" data-js-extended-dropdown-child-menu="1" aria-orientation="vertical"
            role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0ace1" data-component="nav">
              <li id="6aaec54e0ace1-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched has-children has-toggle" role="menuitem" data-depth="2" aria-label=
              "Arbete - Child 1 with a long name">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0ace1-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 1 with a long
                  name</span></a> <button class="c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label=
                  "Expand: Arbete - Child 1 with a long name" aria-pressed="false" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon">
                  <!-- icon.blade.php -->
                   </span></span></button>
                </div><!-- nav.blade.php -->
                <div class="c-element c-nav__child-container" data-component="element">
                  <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id=
                  "id_6aaec54e0b0fd" data-component="nav">
                    <li id="6aaec54e0b0fd-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
                      <div class="c-nav__item-wrapper">
                        <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0b0fd-1-0__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 1</span></a>
                      </div>
                    </li>
                    <li id="6aaec54e0b0fd-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
                      <div class="c-nav__item-wrapper">
                        <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0b0fd-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Granchild 2</span></a>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li id="6aaec54e0ace1-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0ace1-1-1__label" data-component="link"><span class="c-nav__text" style="">Arbete - Child 2</span></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li id="6aaec54e0a7b4-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0a7b4-1-1__label" data-component="link"><span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
    </div>
  </li>
  <li id="6aaec54e0a7b4-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0a7b4-1-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54e0a7b4-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched has-children has-toggle" role="menuitem" data-depth="1" aria-label="Kommun och politik">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0a7b4-1-3__label" data-component="link"><span class="c-nav__text" style="">Kommun och politik</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Kommun och politik" aria-pressed="false" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div>
    <div class="c-element c-nav__extended-dropdown-container" data-component="element">
      <div class="c-element c-nav__extended-dropdown-content-area" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-nav__extended-dropdown-title c-typography__variant--h2" data-js-extended-dropdown-title="1" data-component="typography">
            Kommun och politik
          </h2><!-- nav.blade.php -->
          <div class="c-element c-nav__child-container" data-component="element">
            <ul class="c-nav c-nav--bordered c-nav__extended-child-menu c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" data-js-extended-dropdown-child-menu="1" aria-orientation="vertical"
            role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0bdc4" data-component="nav">
              <li id="6aaec54e0bdc4-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0bdc4-1-0__label" data-component="link"><span class="c-nav__text" style="">About</span></a>
                </div>
              </li>
              <li id="6aaec54e0bdc4-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0bdc4-1-1__label" data-component="link"><span class="c-nav__text" style="">Contact</span></a>
                </div>
              </li>
              <li id="6aaec54e0bdc4-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0bdc4-1-2__label" data-component="link"><span class="c-nav__text" style="">Links</span></a>
                </div>
              </li>
              <li id="6aaec54e0bdc4-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
                <div class="c-nav__item-wrapper">
                  <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0bdc4-1-3__label" data-component="link"><span class="c-nav__text" style="">More info</span></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li id="6aaec54e0a7b4-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_6aaec54e0a7b4-1-4__label" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Omsorg och stöd</span></span></a>
    </div>
  </li>
</ul>
<div style="height: 300px;"></div><!-- Padder -->

@nav([
    'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'direction' => 'horizontal',
    'includeToggle' => true,
    'isExtendedDropdown' => true,
    'height' => 'md',
])
@endnav
<div style="height: 300px;"></div><!-- Padder -->

<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0c717"
data-component="nav">
  <li id="6aaec54e0c717-3702119154919586409-0__item" class="c-nav__item c-nav__item--tiles c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link c-paper u-margin__bottom--1" href="#" target="_top" id="id_6aaec54e0c717-3702119154919586409-0__label" data-component="link"><!-- icon.blade.php -->
       <span class="c-nav__text">Arbete</span></a>
    </div>
  </li>
  <li id="6aaec54e0c717-7454920728265457001-1__item" class="c-nav__item c-nav__item--tiles c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo och bygga">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link c-paper u-margin__bottom--1" href="#" target="_top" id="id_6aaec54e0c717-7454920728265457001-1__label" data-component="link"><!-- icon.blade.php -->
       <span class="c-nav__text">Bo och bygga</span></a>
    </div>
  </li>
  <li id="6aaec54e0c717-6969306831091159029-2__item" class="c-nav__item c-nav__item--tiles c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link c-paper u-margin__bottom--1" href="#" target="_top" id="id_6aaec54e0c717-6969306831091159029-2__label" data-component="link"><!-- icon.blade.php -->
       <span class="c-nav__text">Förskola och utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54e0c717-617658964585774343-3__item" class="c-nav__item c-nav__item--tiles c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link c-paper u-margin__bottom--1" href="#" target="_top" id="id_6aaec54e0c717-617658964585774343-3__label" data-component="link"><!-- icon.blade.php -->
       <span class="c-nav__text">Omsorg och stöd</span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => [
        [
            'href' => '#',
            'label' => 'Arbete',
            'style' => 'tiles',
            'icon' => ['icon' => 'work'],
            'xfn' => false,
        ],
        [
            'href' => '#',
            'label' => 'Bo och bygga',
            'style' => 'tiles',
            'icon' => ['icon' => 'home'],
            'xfn' => false,
        ],
        [
            'href' => '#',
            'label' => 'Förskola och utbildning',
            'style' => 'tiles',
            'icon' => ['icon' => 'school'],
            'xfn' => false,
        ],
        [
            'href' => '#',
            'label' => 'Omsorg och stöd',
            'style' => 'tiles',
            'icon' => ['icon' => 'favorite'],
            'xfn' => false,
        ],
    ],
    'classList' => ['u-position--relative'],
    'direction' => 'horizontal',
    'allowStyle' => true,
])
@endnav

<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0d08e"
data-component="nav">
  <li id="6aaec54e0d08e-4350139776566179746-0__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Logga in">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Logga in" href="#" target="_top" id="id_6aaec54e0d08e-4350139776566179746-0__label"
      data-component="button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Logga in</span></span></a>
    </div>
  </li>
  <li id="6aaec54e0d08e-6852097162403316176-1__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kontakta oss">
    <div class="c-nav__item-wrapper">
      <a class="c-button c-nav__button c-button__outlined c-button__outlined--primary c-button--md" aria-label="Kontakta oss" href="#" target="_top" id="id_6aaec54e0d08e-6852097162403316176-1__label"
      data-component="button"><span class="c-button__label"><span class="c-button__label-text c-button__label-text--reverse">Kontakta oss</span></span></a>
    </div>
  </li>
  <li id="6aaec54e0d08e-7383637661129532762-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Om kommunen">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0d08e-7383637661129532762-2__label" data-component="link"><span class="c-nav__text" style="">Om kommunen</span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => [
        [
            'href' => '#',
            'label' => 'Logga in',
            'style' => 'button',
        ],
        [
            'href' => '#',
            'label' => 'Kontakta oss',
            'style' => 'button',
            'buttonStyle' => 'outlined',
            'buttonColor' => 'primary',
        ],
        [
            'href' => '#',
            'label' => 'Om kommunen',
            'style' => 'default',
        ],
    ],
    'classList' => ['u-position--relative'],
    'direction' => 'horizontal',
    'allowStyle' => true,
    'buttonStyle' => 'filled',
    'buttonColor' => 'primary',
])
@endnav

<ul class="c-nav u-position--relative c-nav--bordered c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0d6dc"
data-component="nav">
  <li id="6aaec54e0d6dc-7803113071838006797-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 is-ancestor is-open has-fetched has-children has-toggle" role="menuitem" data-depth=
  "1" aria-label="Arbete">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0d6dc-7803113071838006797-0__label" data-component="link"><span class="c-nav__text" style="">Arbete</span></a> <button class=
      "c-button c-nav__toggle c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete" aria-pressed="true" type="button" data-component=
      "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
       </span></span></button>
    </div><!-- nav.blade.php -->
    <div class="c-element c-nav__child-container" data-component="element">
      <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6aaec54e0dad7"
      data-component="nav">
        <li id="6aaec54e0dad7-2365811150955610302-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 is-current is-open" role="menuitem" data-depth="2" aria-label="Platsbanken">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0dad7-2365811150955610302-0__label" data-component="link"><span class="c-nav__text" style="">Platsbanken</span></a>
          </div>
        </li>
        <li id="6aaec54e0dad7-1916292108923171112-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Starta företag">
          <div class="c-nav__item-wrapper">
            <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0dad7-1916292108923171112-1__label" data-component="link"><span class="c-nav__text" style="">Starta företag</span></a>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li id="6aaec54e0d6dc-8198352635024784803-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo och bygga">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0d6dc-8198352635024784803-1__label" data-component="link"><span class="c-nav__text" style="">Bo och bygga</span></a>
    </div>
  </li>
  <li id="6aaec54e0d6dc-5468210132317463112-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0d6dc-5468210132317463112-2__label" data-component="link"><span class="c-nav__text" style="">Förskola och
      utbildning</span></a>
    </div>
  </li>
  <li id="6aaec54e0d6dc-3353317677903223752-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
    <div class="c-nav__item-wrapper">
      <a class="c-link c-nav__link" href="#" target="_top" id="id_6aaec54e0d6dc-3353317677903223752-3__label" data-component="link"><span class="c-nav__text" style="">Omsorg och stöd</span></a>
    </div>
  </li>
</ul>

@nav([
    'items' => [
        [
            'href' => '#',
            'label' => 'Arbete',
            'ancestor' => true,
            'children' => [
                [
                    'href' => '#',
                    'label' => 'Platsbanken',
                    'active' => true,
                    'children' => false,
                ],
                [
                    'href' => '#',
                    'label' => 'Starta företag',
                    'children' => false,
                ],
            ],
        ],
        [
            'href' => '#',
            'label' => 'Bo och bygga',
            'children' => false,
        ],
        [
            'href' => '#',
            'label' => 'Förskola och utbildning',
            'children' => false,
        ],
        [
            'href' => '#',
            'label' => 'Omsorg och stöd',
            'children' => false,
        ],
    ],
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'direction' => 'vertical',
    'includeToggle' => true,
])
@endnav