Nav

<!-- nav.blade.php -->
 
          <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_69f0d15b0b886" data-uid="69f0d15b0b886" data-component="nav">
          <li id="69f0d15b0b886-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_69f0d15b0b886-1-0__label" data-uid="69f0d15b0bb1f" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0bbb8" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0bc00" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0c1fd" 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_69f0d15b0bc63" data-uid="69f0d15b0bc63" data-component="nav">
          <li id="69f0d15b0bc63-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_69f0d15b0bc63-1-0__label" data-uid="69f0d15b0bd2e" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0bd90" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0bdcb" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0c11c" 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_69f0d15b0be1a" data-uid="69f0d15b0be1a" data-component="nav">
          <li id="69f0d15b0be1a-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0be1a-1-0__label" data-uid="69f0d15b0bed4" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b0bf25" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0bf5e" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0be1a-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0be1a-1-1__label" data-uid="69f0d15b0c011" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b0c05f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0c097" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0bc63-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_69f0d15b0bc63-1-1__label" data-uid="69f0d15b0c1c0" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0b886-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0b886-1-1__label" data-uid="69f0d15b0c296" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b0c2e6" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0c31f" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0b886-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0b886-1-2__label" data-uid="69f0d15b0c3cd" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b0c41c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0c454" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0b886-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_69f0d15b0b886-1-3__label" data-uid="69f0d15b0c51b" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0c581" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0c5bd" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0c8d1" 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_69f0d15b0c61e" data-uid="69f0d15b0c61e" data-component="nav">
          <li id="69f0d15b0c61e-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_69f0d15b0c61e-1-0__label" data-uid="69f0d15b0c6da" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0c61e-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_69f0d15b0c61e-1-1__label" data-uid="69f0d15b0c76a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0c61e-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_69f0d15b0c61e-1-2__label" data-uid="69f0d15b0c7f6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0c61e-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_69f0d15b0c61e-1-3__label" data-uid="69f0d15b0c895" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0b886-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0b886-1-4__label" data-uid="69f0d15b0c95b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- nav.blade.php -->
 
          <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_69f0d15b0cdc2" data-uid="69f0d15b0cdc2" data-component="nav">
          <li id="69f0d15b0cdc2-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_69f0d15b0cdc2-1-0__label" data-uid="69f0d15b0ced1" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0cf2c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0cf69" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0d4fb" 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_69f0d15b0cfba" data-uid="69f0d15b0cfba" data-component="nav">
          <li id="69f0d15b0cfba-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_69f0d15b0cfba-1-0__label" data-uid="69f0d15b0d076" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0d0c7" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d10d" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0d426" 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_69f0d15b0d15b" data-uid="69f0d15b0d15b" data-component="nav">
          <li id="69f0d15b0d15b-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0d15b-1-0__label" data-uid="69f0d15b0d211" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b0d262" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d29b" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0d15b-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0d15b-1-1__label" data-uid="69f0d15b0d34a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b0d399" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d3d0" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0cfba-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_69f0d15b0cfba-1-1__label" data-uid="69f0d15b0d4b9" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0cdc2-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0cdc2-1-1__label" data-uid="69f0d15b0d59a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b0d5e4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d618" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0cdc2-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0cdc2-1-2__label" data-uid="69f0d15b0d6db" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b0d738" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d76f" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0cdc2-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_69f0d15b0cdc2-1-3__label" data-uid="69f0d15b0d81a" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0d87e" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0d8c0" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0dbee" 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_69f0d15b0d911" data-uid="69f0d15b0d911" data-component="nav">
          <li id="69f0d15b0d911-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_69f0d15b0d911-1-0__label" data-uid="69f0d15b0d9d2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0d911-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_69f0d15b0d911-1-1__label" data-uid="69f0d15b0da6b" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0d911-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_69f0d15b0d911-1-2__label" data-uid="69f0d15b0db1d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0d911-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_69f0d15b0d911-1-3__label" data-uid="69f0d15b0dbb2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0cdc2-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0cdc2-1-4__label" data-uid="69f0d15b0dc5e" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- nav.blade.php -->
 
          <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_69f0d15b0e041" data-uid="69f0d15b0e041" data-component="nav">
          <li id="69f0d15b0e041-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_69f0d15b0e041-1-0__label" data-uid="69f0d15b0e151" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0e1aa" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e1e5" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0e793" 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_69f0d15b0e24b" data-uid="69f0d15b0e24b" data-component="nav">
          <li id="69f0d15b0e24b-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_69f0d15b0e24b-1-0__label" data-uid="69f0d15b0e31c" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0e36d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e3a7" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0e6c6" 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_69f0d15b0e3f4" data-uid="69f0d15b0e3f4" data-component="nav">
          <li id="69f0d15b0e3f4-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0e3f4-1-0__label" data-uid="69f0d15b0e4b2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b0e502" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e53b" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0e3f4-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0e3f4-1-1__label" data-uid="69f0d15b0e5ea" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b0e63a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e671" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0e24b-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_69f0d15b0e24b-1-1__label" data-uid="69f0d15b0e759" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0e041-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0e041-1-1__label" data-uid="69f0d15b0e829" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b0e882" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e8ba" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0e041-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0e041-1-2__label" data-uid="69f0d15b0e96a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b0e9b7" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0e9ef" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0e041-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_69f0d15b0e041-1-3__label" data-uid="69f0d15b0ea9a" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0eae8" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0eb1f" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b0ee98" 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_69f0d15b0eb6a" data-uid="69f0d15b0eb6a" data-component="nav">
          <li id="69f0d15b0eb6a-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_69f0d15b0eb6a-1-0__label" data-uid="69f0d15b0ec1f" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0eb6a-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_69f0d15b0eb6a-1-1__label" data-uid="69f0d15b0ed31" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0eb6a-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_69f0d15b0eb6a-1-2__label" data-uid="69f0d15b0edc6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0eb6a-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_69f0d15b0eb6a-1-3__label" data-uid="69f0d15b0ee5d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0e041-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0e041-1-4__label" data-uid="69f0d15b0ef05" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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

<!-- nav.blade.php -->
 
          <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_69f0d15b0f2d5" data-uid="69f0d15b0f2d5" data-component="nav">
          <li id="69f0d15b0f2d5-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_69f0d15b0f2d5-1-0__label" data-uid="69f0d15b0f3c7" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0f2d5-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_69f0d15b0f2d5-1-1__label" data-uid="69f0d15b0f495" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0f2d5-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_69f0d15b0f2d5-1-2__label" data-uid="69f0d15b0f53a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0f2d5-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_69f0d15b0f2d5-1-3__label" data-uid="69f0d15b0f5db" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b0f2d5-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_69f0d15b0f2d5-1-4__label" data-uid="69f0d15b0f677" data-component="link">
        <!-- icon.blade.php -->
        <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

<!-- nav.blade.php -->
 
          <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_69f0d15b0fa6b" data-uid="69f0d15b0fa6b" data-component="nav">
          <li id="69f0d15b0fa6b-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_69f0d15b0fa6b-1-0__label" data-uid="69f0d15b0fb49" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0fb9d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0fbde" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b10117" 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_69f0d15b0fc2a" data-uid="69f0d15b0fc2a" data-component="nav">
          <li id="69f0d15b0fc2a-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_69f0d15b0fc2a-1-0__label" data-uid="69f0d15b0fcdc" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b0fd29" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0fd5e" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b10056" 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_69f0d15b0fda6" data-uid="69f0d15b0fda6" data-component="nav">
          <li id="69f0d15b0fda6-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0fda6-1-0__label" data-uid="69f0d15b0fe51" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b0fe9c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b0fed1" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0fda6-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b0fda6-1-1__label" data-uid="69f0d15b0ff78" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b0ffd0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10006" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0fc2a-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_69f0d15b0fc2a-1-1__label" data-uid="69f0d15b100e1" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0fa6b-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0fa6b-1-1__label" data-uid="69f0d15b101a2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b101ed" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10221" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0fa6b-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0fa6b-1-2__label" data-uid="69f0d15b102c7" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b10310" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10343" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b0fa6b-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_69f0d15b0fa6b-1-3__label" data-uid="69f0d15b103ef" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b10438" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b1046a" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b10752" 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_69f0d15b104b1" data-uid="69f0d15b104b1" data-component="nav">
          <li id="69f0d15b104b1-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_69f0d15b104b1-1-0__label" data-uid="69f0d15b1056e" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b104b1-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_69f0d15b104b1-1-1__label" data-uid="69f0d15b105fc" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b104b1-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_69f0d15b104b1-1-2__label" data-uid="69f0d15b1068a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b104b1-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_69f0d15b104b1-1-3__label" data-uid="69f0d15b1071d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b0fa6b-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b0fa6b-1-4__label" data-uid="69f0d15b107ba" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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_69f0d15b1084c" data-uid="69f0d15b1084c" data-component="nav">
          <li id="69f0d15b1084c-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_69f0d15b1084c-1-0__label" data-uid="69f0d15b10907" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b10953" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10988" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b10e72" 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_69f0d15b109d0" data-uid="69f0d15b109d0" data-component="nav">
          <li id="69f0d15b109d0-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_69f0d15b109d0-1-0__label" data-uid="69f0d15b10a7d" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b10ac6" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10afc" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b10dc8" 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_69f0d15b10b4e" data-uid="69f0d15b10b4e" data-component="nav">
          <li id="69f0d15b10b4e-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b10b4e-1-0__label" data-uid="69f0d15b10c0d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b10c50" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10c80" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b10b4e-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b10b4e-1-1__label" data-uid="69f0d15b10d12" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b10d53" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10d81" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b109d0-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_69f0d15b109d0-1-1__label" data-uid="69f0d15b10e42" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b1084c-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1084c-1-1__label" data-uid="69f0d15b10f0b" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b10f54" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b10f90" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b1084c-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1084c-1-2__label" data-uid="69f0d15b11034" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b1107d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b110b0" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b1084c-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_69f0d15b1084c-1-3__label" data-uid="69f0d15b11150" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b11198" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b111dd" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b114ae" 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_69f0d15b11227" data-uid="69f0d15b11227" data-component="nav">
          <li id="69f0d15b11227-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_69f0d15b11227-1-0__label" data-uid="69f0d15b112e8" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b11227-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_69f0d15b11227-1-1__label" data-uid="69f0d15b11376" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b11227-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_69f0d15b11227-1-2__label" data-uid="69f0d15b113f9" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b11227-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_69f0d15b11227-1-3__label" data-uid="69f0d15b1147b" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b1084c-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1084c-1-4__label" data-uid="69f0d15b1150d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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_69f0d15b1159e" data-uid="69f0d15b1159e" data-component="nav">
          <li id="69f0d15b1159e-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_69f0d15b1159e-1-0__label" data-uid="69f0d15b11659" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b116a5" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b116da" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b11cc2" 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_69f0d15b11722" data-uid="69f0d15b11722" data-component="nav">
          <li id="69f0d15b11722-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_69f0d15b11722-1-0__label" data-uid="69f0d15b117d9" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b11839" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b11872" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b11be2" 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_69f0d15b118be" data-uid="69f0d15b118be" data-component="nav">
          <li id="69f0d15b118be-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b118be-1-0__label" data-uid="69f0d15b11971" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b119bf" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b11a0c" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b118be-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b118be-1-1__label" data-uid="69f0d15b11ac3" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b11b31" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b11b81" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b11722-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_69f0d15b11722-1-1__label" data-uid="69f0d15b11c82" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b1159e-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1159e-1-1__label" data-uid="69f0d15b11d60" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b11db4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b11df1" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b1159e-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1159e-1-2__label" data-uid="69f0d15b11ea8" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b11efb" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b11f41" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b1159e-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_69f0d15b1159e-1-3__label" data-uid="69f0d15b11ff7" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b12049" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b12083" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b1238a" 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_69f0d15b120d5" data-uid="69f0d15b120d5" data-component="nav">
          <li id="69f0d15b120d5-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_69f0d15b120d5-1-0__label" data-uid="69f0d15b1219d" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b120d5-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_69f0d15b120d5-1-1__label" data-uid="69f0d15b1222c" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b120d5-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_69f0d15b120d5-1-2__label" data-uid="69f0d15b122b6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b120d5-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_69f0d15b120d5-1-3__label" data-uid="69f0d15b12349" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b1159e-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b1159e-1-4__label" data-uid="69f0d15b123e8" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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 -->

<!-- nav.blade.php -->
 
          <ul class="c-nav u-position--relative c-nav--compressed c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d15b12791" data-uid="69f0d15b12791" data-component="nav">
          <li id="69f0d15b12791-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_69f0d15b12791-1-0__label" data-uid="69f0d15b12879" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b128d0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b12916" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b12ede" 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_69f0d15b12977" data-uid="69f0d15b12977" data-component="nav">
          <li id="69f0d15b12977-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_69f0d15b12977-1-0__label" data-uid="69f0d15b12a33" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b12a86" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b12ac9" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b12de3" 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_69f0d15b12b18" data-uid="69f0d15b12b18" data-component="nav">
          <li id="69f0d15b12b18-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b12b18-1-0__label" data-uid="69f0d15b12bcf" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b12c1f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b12c59" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b12b18-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b12b18-1-1__label" data-uid="69f0d15b12d08" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b12d57" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b12d8e" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b12977-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_69f0d15b12977-1-1__label" data-uid="69f0d15b12e79" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b12791-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b12791-1-1__label" data-uid="69f0d15b12f7a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b12fcb" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b13004" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b12791-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b12791-1-2__label" data-uid="69f0d15b130b1" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b130ff" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b13136" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b12791-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_69f0d15b12791-1-3__label" data-uid="69f0d15b131fa" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b13254" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b21e31" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b222a6" 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_69f0d15b21f2a" data-uid="69f0d15b21f2a" data-component="nav">
          <li id="69f0d15b21f2a-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_69f0d15b21f2a-1-0__label" data-uid="69f0d15b22043" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b21f2a-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_69f0d15b21f2a-1-1__label" data-uid="69f0d15b22124" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b21f2a-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_69f0d15b21f2a-1-2__label" data-uid="69f0d15b221cd" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b21f2a-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_69f0d15b21f2a-1-3__label" data-uid="69f0d15b22266" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b12791-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b12791-1-4__label" data-uid="69f0d15b22321" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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'],
    'direction' => 'vertical',
    'includeToggle' => true,
    'compressed' => true,
])
@endnav

<!-- nav.blade.php -->
 
          <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_69f0d15b22739" data-uid="69f0d15b22739" data-component="nav">
          <li id="69f0d15b22739-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_69f0d15b22739-1-0__label" data-uid="69f0d15b22843" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b228b1" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b228f4" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                    <div class="c-element c-nav__extended-dropdown-container" data-uid="69f0d15b23312" data-component="element">
        <div class="c-element c-nav__extended-dropdown-content-area" data-uid="69f0d15b232e6" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-uid="69f0d15b232b6" 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-uid="69f0d15b22c69" data-component="typography">
    Arbete
</h2>                                        <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b23282" 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_69f0d15b22cb8" data-uid="69f0d15b22cb8" data-component="nav">
          <li id="69f0d15b22cb8-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_69f0d15b22cb8-1-0__label" data-uid="69f0d15b22d9e" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b22dfb" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b22e3c" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b231a4" 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_69f0d15b22e93" data-uid="69f0d15b22e93" data-component="nav">
          <li id="69f0d15b22e93-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b22e93-1-0__label" data-uid="69f0d15b22f59" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="69f0d15b22fb0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b22fee" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69f0d15b22e93-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3 has-children has-toggle" 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_69f0d15b22e93-1-1__label" data-uid="69f0d15b230b6" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="69f0d15b2310a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b23146" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b22cb8-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_69f0d15b22cb8-1-1__label" data-uid="69f0d15b23244" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
    </div>
    </div>
    </div>
      </li>

          <li id="69f0d15b22739-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b22739-1-1__label" data-uid="69f0d15b233ab" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="69f0d15b23402" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b2343e" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                    <div class="c-element c-nav__extended-dropdown-container" data-uid="69f0d15b2353a" data-component="element">
        <div class="c-element c-nav__extended-dropdown-content-area" data-uid="69f0d15b2350f" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-uid="69f0d15b234e2" 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-uid="69f0d15b234ad" data-component="typography">
    Bo, bygga och miljö
</h2>                                    <div data-js-async-children="true"></div>
    </div>
    </div>
    </div>
      </li>

          <li id="69f0d15b22739-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b22739-1-2__label" data-uid="69f0d15b235d1" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
          <button class="c-button c-nav__toggle js-async-children c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="Expand: Förskola och utbildning" type="button" data-uid="69f0d15b23626" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b23661" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                    <div class="c-element c-nav__extended-dropdown-container" data-uid="69f0d15b23746" data-component="element">
        <div class="c-element c-nav__extended-dropdown-content-area" data-uid="69f0d15b2371c" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-uid="69f0d15b236ef" 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-uid="69f0d15b236bc" data-component="typography">
    Förskola och utbildning
</h2>                                    <div data-js-async-children="true"></div>
    </div>
    </div>
    </div>
      </li>

          <li id="69f0d15b22739-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_69f0d15b22739-1-3__label" data-uid="69f0d15b237dc" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b23830" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b23874" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                    <div class="c-element c-nav__extended-dropdown-container" data-uid="69f0d15b23c57" data-component="element">
        <div class="c-element c-nav__extended-dropdown-content-area" data-uid="69f0d15b23c23" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-uid="69f0d15b23bf6" 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-uid="69f0d15b238cf" data-component="typography">
    Kommun och politik
</h2>                                        <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b23bc4" 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_69f0d15b23901" data-uid="69f0d15b23901" data-component="nav">
          <li id="69f0d15b23901-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_69f0d15b23901-1-0__label" data-uid="69f0d15b239c8" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b23901-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_69f0d15b23901-1-1__label" data-uid="69f0d15b23a62" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b23901-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_69f0d15b23901-1-2__label" data-uid="69f0d15b23af7" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b23901-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_69f0d15b23901-1-3__label" data-uid="69f0d15b23b8a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
    </div>
    </div>
    </div>
      </li>

          <li id="69f0d15b22739-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1 has-children has-toggle" 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_69f0d15b22739-1-4__label" data-uid="69f0d15b23cc1" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Omsorg och stöd
            </span>
        
    </span> </a>          
          
                  </div>

        
                    <div class="c-element c-nav__extended-dropdown-container" data-uid="69f0d15b23db7" data-component="element">
        <div class="c-element c-nav__extended-dropdown-content-area" data-uid="69f0d15b23d8d" data-component="element">
        <div class="c-element c-nav__extended-content" data-js-extended-dropdown-content="1" data-uid="69f0d15b23d61" 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-uid="69f0d15b23d2e" data-component="typography">
    Omsorg och stöd
</h2>                                    <div data-js-async-children="true"></div>
    </div>
    </div>
    </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 -->

<!-- nav.blade.php -->
 
          <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_69f0d15b251e1" data-uid="69f0d15b251e1" data-component="nav">
          <li id="69f0d15b251e1-3264665622389954592-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_69f0d15b251e1-3264665622389954592-0__label" data-uid="69f0d15b25b08" data-component="link">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--work c-icon--material c-icon--material-work material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="work" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15b25aba" data-component="icon">
                    </span>
    <span class="c-nav__text">Arbete</span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b251e1-555553304490966588-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_69f0d15b251e1-555553304490966588-1__label" data-uid="69f0d15b25bb5" data-component="link">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15b25b7a" data-component="icon">
                    </span>
    <span class="c-nav__text">Bo och bygga</span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b251e1-4591286648784562430-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_69f0d15b251e1-4591286648784562430-2__label" data-uid="69f0d15b25c50" data-component="link">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--school c-icon--material c-icon--material-school material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="school" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15b25c18" data-component="icon">
                    </span>
    <span class="c-nav__text">Förskola och utbildning</span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b251e1-3809785934534876136-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_69f0d15b251e1-3809785934534876136-3__label" data-uid="69f0d15b25ce4" data-component="link">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d15b25cae" data-component="icon">
                    </span>
    <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

<!-- nav.blade.php -->
 
          <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_69f0d15b26067" data-uid="69f0d15b26067" data-component="nav">
          <li id="69f0d15b26067-2741550357503157277-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_69f0d15b26067-2741550357503157277-0__label" data-uid="69f0d15b2611c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Logga in
            </span>
        
    </span> </a>          
          
                  </div>

        
                          </li>

          <li id="69f0d15b26067-2127296115399993190-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_69f0d15b26067-2127296115399993190-1__label" data-uid="69f0d15b2619a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Kontakta oss
            </span>
        
    </span> </a>          
          
                  </div>

        
                          </li>

          <li id="69f0d15b26067-7091685815774685124-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_69f0d15b26067-7091685815774685124-2__label" data-uid="69f0d15b2624d" data-component="link">
        <!-- icon.blade.php -->
        <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

<!-- nav.blade.php -->
 
          <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_69f0d15b265cc" data-uid="69f0d15b265cc" data-component="nav">
          <li id="69f0d15b265cc-3287929611225109797-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_69f0d15b265cc-3287929611225109797-0__label" data-uid="69f0d15b266be" data-component="link">
        <!-- icon.blade.php -->
        <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" type="button" data-uid="69f0d15b2671d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d15b26768" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d15b26967" 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_69f0d15b267c0" data-uid="69f0d15b267c0" data-component="nav">
          <li id="69f0d15b267c0-8234382899383088599-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_69f0d15b267c0-8234382899383088599-0__label" data-uid="69f0d15b26888" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Platsbanken
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b267c0-5460063952127374582-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_69f0d15b267c0-5460063952127374582-1__label" data-uid="69f0d15b26928" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Starta företag
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d15b265cc-380876514635117411-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_69f0d15b265cc-380876514635117411-1__label" data-uid="69f0d15b26a05" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo och bygga
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b265cc-5134610417556072853-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_69f0d15b265cc-5134610417556072853-2__label" data-uid="69f0d15b26aa8" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d15b265cc-3738179543091515731-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_69f0d15b265cc-3738179543091515731-3__label" data-uid="69f0d15b26b3d" data-component="link">
        <!-- icon.blade.php -->
        <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