Nav

Vertical navigation

<!-- 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_69e4844e8c307" data-uid="69e4844e8c307">
          <li id="69e4844e8c307-897841358553575479-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_69e4844e8c307-897841358553575479-0__label" data-uid="69e4844e8c5fc">
        <!-- 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="69e4844e8c6a7">   
     <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="69e4844e8c6f2">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8cd76">
        <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_69e4844e8c75e" data-uid="69e4844e8c75e">
          <li id="69e4844e8c75e-3552223505151399701-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_69e4844e8c75e-3552223505151399701-0__label" data-uid="69e4844e8c83d">
        <!-- 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="69e4844e8c891">   
     <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="69e4844e8c8d5">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8cc84">
        <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_69e4844e8c93a" data-uid="69e4844e8c93a">
          <li id="69e4844e8c93a-1384322294421873160-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_69e4844e8c93a-1384322294421873160-0__label" data-uid="69e4844e8ca0f">
        <!-- 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="69e4844e8ca65">   
     <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="69e4844e8caa8">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8c93a-3557899167558734911-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_69e4844e8c93a-3557899167558734911-1__label" data-uid="69e4844e8cb63">
        <!-- 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="69e4844e8cbb7">   
     <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="69e4844e8cbf3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e8c75e-7209268199664906022-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_69e4844e8c75e-7209268199664906022-1__label" data-uid="69e4844e8cd35">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8c307-7132724722110992363-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_69e4844e8c307-7132724722110992363-1__label" data-uid="69e4844e8ce23">
        <!-- 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="69e4844e8ce73">   
     <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="69e4844e8ceac">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8c307-4840904032533861598-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_69e4844e8c307-4840904032533861598-2__label" data-uid="69e4844e8cf59">
        <!-- 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="69e4844e8cfa9">   
     <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="69e4844e8cfe0">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8c307-2647173942228578879-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_69e4844e8c307-2647173942228578879-3__label" data-uid="69e4844e8d089">
        <!-- 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="69e4844e8d0de">   
     <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="69e4844e8d114">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8d3ed">
        <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_69e4844e8d15f" data-uid="69e4844e8d15f">
          <li id="69e4844e8d15f-1296826095440326524-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_69e4844e8d15f-1296826095440326524-0__label" data-uid="69e4844e8d214">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8d15f-424795682495695698-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_69e4844e8d15f-424795682495695698-1__label" data-uid="69e4844e8d2a2">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8d15f-6673238416588910657-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_69e4844e8d15f-6673238416588910657-2__label" data-uid="69e4844e8d32f">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8d15f-4613913869531382576-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_69e4844e8d15f-4613913869531382576-3__label" data-uid="69e4844e8d3b7">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8c307-5720830805377779285-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_69e4844e8c307-5720830805377779285-4__label" data-uid="69e4844e8d465">   
     <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' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true
])
@endnav

Vertical navigation (with border)

<!-- 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_69e4844e8d51e" data-uid="69e4844e8d51e">
          <li id="69e4844e8d51e-7002567938107330503-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_69e4844e8d51e-7002567938107330503-0__label" data-uid="69e4844e8d5e6">
        <!-- 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="69e4844e8d638">   
     <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="69e4844e8d673">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8dcab">
        <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_69e4844e8d6be" data-uid="69e4844e8d6be">
          <li id="69e4844e8d6be-8154811802416722601-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_69e4844e8d6be-8154811802416722601-0__label" data-uid="69e4844e8d774">
        <!-- 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="69e4844e8d7c3">   
     <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="69e4844e8d7fb">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8dbe3">
        <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_69e4844e8d846" data-uid="69e4844e8d846">
          <li id="69e4844e8d846-837899289797284594-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_69e4844e8d846-837899289797284594-0__label" data-uid="69e4844e8d9c2">
        <!-- 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="69e4844e8da18">   
     <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="69e4844e8da52">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8d846-6546655724810665172-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_69e4844e8d846-6546655724810665172-1__label" data-uid="69e4844e8db05">
        <!-- 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="69e4844e8db52">   
     <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="69e4844e8db92">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e8d6be-6464218341788887104-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_69e4844e8d6be-6464218341788887104-1__label" data-uid="69e4844e8dc6c">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8d51e-276482601510097216-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_69e4844e8d51e-276482601510097216-1__label" data-uid="69e4844e8dd4e">
        <!-- 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="69e4844e8dd9b">   
     <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="69e4844e8ddd2">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8d51e-1550635798886774252-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_69e4844e8d51e-1550635798886774252-2__label" data-uid="69e4844e8de7d">
        <!-- 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="69e4844e8decc">   
     <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="69e4844e8df02">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8d51e-3184694525386596482-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_69e4844e8d51e-3184694525386596482-3__label" data-uid="69e4844e8dfab">
        <!-- 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="69e4844e8dff7">   
     <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="69e4844e8e02d">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8e328">
        <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_69e4844e8e081" data-uid="69e4844e8e081">
          <li id="69e4844e8e081-6891515602370631409-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_69e4844e8e081-6891515602370631409-0__label" data-uid="69e4844e8e147">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8e081-2308720565859368702-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_69e4844e8e081-2308720565859368702-1__label" data-uid="69e4844e8e1d5">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8e081-8513888895202798554-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_69e4844e8e081-8513888895202798554-2__label" data-uid="69e4844e8e261">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8e081-8397070369697528918-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_69e4844e8e081-8397070369697528918-3__label" data-uid="69e4844e8e2f4">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8d51e-6495646767190063076-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_69e4844e8d51e-6495646767190063076-4__label" data-uid="69e4844e8e388">   
     <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' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true,
    'height' => 'sm'
])
@endnav

Vertical navigation (with border and indented)

<!-- 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_69e4844e8e42a" data-uid="69e4844e8e42a">
          <li id="69e4844e8e42a-5160773056959289543-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_69e4844e8e42a-5160773056959289543-0__label" data-uid="69e4844e8e4fd">
        <!-- 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="69e4844e8e54a">   
     <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="69e4844e8e57e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8ea99">
        <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_69e4844e8e5c6" data-uid="69e4844e8e5c6">
          <li id="69e4844e8e5c6-2825262317752402723-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_69e4844e8e5c6-2825262317752402723-0__label" data-uid="69e4844e8e66f">
        <!-- 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="69e4844e8e6b8">   
     <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="69e4844e8e6eb">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8e9c7">
        <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_69e4844e8e731" data-uid="69e4844e8e731">
          <li id="69e4844e8e731-4902617227932006842-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_69e4844e8e731-4902617227932006842-0__label" data-uid="69e4844e8e7d6">
        <!-- 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="69e4844e8e81f">   
     <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="69e4844e8e85d">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8e731-3403595640305471561-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_69e4844e8e731-3403595640305471561-1__label" data-uid="69e4844e8e8fe">
        <!-- 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="69e4844e8e945">   
     <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="69e4844e8e978">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e8e5c6-7481360450164101046-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_69e4844e8e5c6-7481360450164101046-1__label" data-uid="69e4844e8ea61">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8e42a-6720220267167823219-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_69e4844e8e42a-6720220267167823219-1__label" data-uid="69e4844e8eb2f">
        <!-- 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="69e4844e8eb78">   
     <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="69e4844e8ebbe">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8e42a-6224941270944303471-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_69e4844e8e42a-6224941270944303471-2__label" data-uid="69e4844e8ec6e">
        <!-- 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="69e4844e8ecbb">   
     <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="69e4844e8ecf1">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8e42a-8859451199821982808-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_69e4844e8e42a-8859451199821982808-3__label" data-uid="69e4844e8ed99">
        <!-- 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="69e4844e8ede5">   
     <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="69e4844e8ee1b">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8f135">
        <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_69e4844e8ee63" data-uid="69e4844e8ee63">
          <li id="69e4844e8ee63-4312262624682138188-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_69e4844e8ee63-4312262624682138188-0__label" data-uid="69e4844e8ef16">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8ee63-3526617636500155075-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_69e4844e8ee63-3526617636500155075-1__label" data-uid="69e4844e8efa3">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8ee63-3243383839433902137-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_69e4844e8ee63-3243383839433902137-2__label" data-uid="69e4844e8f070">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8ee63-6721647281000707305-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_69e4844e8ee63-6721647281000707305-3__label" data-uid="69e4844e8f0ff">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8e42a-2915845513990015560-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_69e4844e8e42a-2915845513990015560-4__label" data-uid="69e4844e8f19d">   
     <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' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true,
    'height' => 'sm',
    'indentSubLevels' => true,
])
@endnav

Horizontal navigation

<!-- 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_69e4844e8f245" data-uid="69e4844e8f245">
          <li id="69e4844e8f245-6931085470658913007-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_69e4844e8f245-6931085470658913007-0__label" data-uid="69e4844e8f2ff">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

          <li id="69e4844e8f245-9208789376074332018-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_69e4844e8f245-9208789376074332018-2__label" data-uid="69e4844e8f449">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8f245-6755671060712979043-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_69e4844e8f245-6755671060712979043-3__label" data-uid="69e4844e8f4e2">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e8f245-2039112162111185623-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_69e4844e8f245-2039112162111185623-4__label" data-uid="69e4844e8f57b">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Omsorg och stöd
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

Horizontal navigation (with dropdown)

<div class="u-color__bg--lighter">
        <!-- 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_69e4844e8f600" data-uid="69e4844e8f600">
          <li id="69e4844e8f600-5802883297485666959-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_69e4844e8f600-5802883297485666959-0__label" data-uid="69e4844e8f6db">
        <!-- 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="69e4844e8f733">   
     <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="69e4844e8f76f">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8fd3f">
        <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_69e4844e8f7bf" data-uid="69e4844e8f7bf">
          <li id="69e4844e8f7bf-7110552027221737681-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_69e4844e8f7bf-7110552027221737681-0__label" data-uid="69e4844e8f88a">
        <!-- 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="69e4844e8f8dd">   
     <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="69e4844e8f918">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e8fc78">
        <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_69e4844e8f967" data-uid="69e4844e8f967">
          <li id="69e4844e8f967-5319768926504398337-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_69e4844e8f967-5319768926504398337-0__label" data-uid="69e4844e8fa24">
        <!-- 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="69e4844e8fa77">   
     <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="69e4844e8fab1">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8f967-6615322983736019455-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_69e4844e8f967-6615322983736019455-1__label" data-uid="69e4844e8fb74">
        <!-- 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="69e4844e8fbdc">   
     <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="69e4844e8fc16">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e8f7bf-1462664211503202134-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_69e4844e8f7bf-1462664211503202134-1__label" data-uid="69e4844e8fd07">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8f600-7799277810604277354-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_69e4844e8f600-7799277810604277354-1__label" data-uid="69e4844e8fdd1">
        <!-- 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="69e4844e8fe1f">   
     <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="69e4844e8fe55">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8f600-6437265013112313269-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_69e4844e8f600-6437265013112313269-2__label" data-uid="69e4844e8ff00">
        <!-- 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="69e4844e8ff4c">   
     <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="69e4844e8ff81">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e8f600-721262180709430769-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_69e4844e8f600-721262180709430769-3__label" data-uid="69e4844e90032">
        <!-- 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="69e4844e9007f">   
     <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="69e4844e900b3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e90382">
        <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_69e4844e900fd" data-uid="69e4844e900fd">
          <li id="69e4844e900fd-8821505546957042220-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_69e4844e900fd-8821505546957042220-0__label" data-uid="69e4844e901af">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e900fd-1544063518061411094-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_69e4844e900fd-1544063518061411094-1__label" data-uid="69e4844e9023b">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e900fd-3311456339097935841-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_69e4844e900fd-3311456339097935841-2__label" data-uid="69e4844e902c6">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e900fd-610229781939796826-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_69e4844e900fd-610229781939796826-3__label" data-uid="69e4844e9034c">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e8f600-6462660605673624016-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_69e4844e8f600-6462660605673624016-4__label" data-uid="69e4844e9042a">   
     <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>
<div style="height: 100px;"></div><!-- Padder -->

<div class="u-color__bg--lighter">
        <!-- 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_69e4844e90496" data-uid="69e4844e90496">
          <li id="69e4844e90496-4044428468279555488-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_69e4844e90496-4044428468279555488-0__label" data-uid="69e4844e90553">
        <!-- 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="69e4844e905a1">   
     <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="69e4844e905d9">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e90b2a">
        <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_69e4844e90623" data-uid="69e4844e90623">
          <li id="69e4844e90623-6806422337165405707-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_69e4844e90623-6806422337165405707-0__label" data-uid="69e4844e906d7">
        <!-- 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="69e4844e90725">   
     <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="69e4844e9075c">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e90a62">
        <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_69e4844e907af" data-uid="69e4844e907af">
          <li id="69e4844e907af-7660287914785783308-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_69e4844e907af-7660287914785783308-0__label" data-uid="69e4844e9085e">
        <!-- 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="69e4844e908ac">   
     <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="69e4844e908e3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e907af-2309810402170485465-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_69e4844e907af-2309810402170485465-1__label" data-uid="69e4844e9098d">
        <!-- 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="69e4844e909da">   
     <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="69e4844e90a0f">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e90623-6004613949204642360-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_69e4844e90623-6004613949204642360-1__label" data-uid="69e4844e90af1">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e90496-3781684964515375805-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_69e4844e90496-3781684964515375805-1__label" data-uid="69e4844e90be0">
        <!-- 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="69e4844e90c34">   
     <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="69e4844e90c6e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e90496-8452039554411436264-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_69e4844e90496-8452039554411436264-2__label" data-uid="69e4844e90d29">
        <!-- 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="69e4844e90d76">   
     <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="69e4844e90dab">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e90496-3569069643800386-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_69e4844e90496-3569069643800386-3__label" data-uid="69e4844e90e52">
        <!-- 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="69e4844e90e9f">   
     <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="69e4844e90ed4">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e911da">
        <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_69e4844e90f30" data-uid="69e4844e90f30">
          <li id="69e4844e90f30-2503295195828430401-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_69e4844e90f30-2503295195828430401-0__label" data-uid="69e4844e91009">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e90f30-8930692533669394223-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_69e4844e90f30-8930692533669394223-1__label" data-uid="69e4844e91095">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e90f30-1605493077679463901-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_69e4844e90f30-1605493077679463901-2__label" data-uid="69e4844e9111d">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e90f30-376738917565883310-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_69e4844e90f30-376738917565883310-3__label" data-uid="69e4844e911a4">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e90496-5854914828629277762-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_69e4844e90496-5854914828629277762-4__label" data-uid="69e4844e9123e">   
     <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>
<div style="height: 100px;"></div><!-- Padder -->

<div class="u-color__bg--lighter">
        <!-- 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_69e4844e912a8" data-uid="69e4844e912a8">
          <li id="69e4844e912a8-6457842081010563799-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_69e4844e912a8-6457842081010563799-0__label" data-uid="69e4844e91398">
        <!-- 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="69e4844e913ea">   
     <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="69e4844e91422">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e91956">
        <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_69e4844e9146e" data-uid="69e4844e9146e">
          <li id="69e4844e9146e-6359877558677618086-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_69e4844e9146e-6359877558677618086-0__label" data-uid="69e4844e91523">
        <!-- 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="69e4844e91572">   
     <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="69e4844e915a9">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e9189c">
        <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_69e4844e915f5" data-uid="69e4844e915f5">
          <li id="69e4844e915f5-2644595355539163890-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_69e4844e915f5-2644595355539163890-0__label" data-uid="69e4844e916ad">
        <!-- 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="69e4844e916f6">   
     <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="69e4844e91731">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e915f5-2619351725963666286-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_69e4844e915f5-2619351725963666286-1__label" data-uid="69e4844e917d3">
        <!-- 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="69e4844e9181b">   
     <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="69e4844e9184e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

          <li id="69e4844e9146e-2041969202426233021-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_69e4844e9146e-2041969202426233021-1__label" data-uid="69e4844e91921">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e912a8-802281563100070295-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_69e4844e912a8-802281563100070295-1__label" data-uid="69e4844e919df">
        <!-- 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="69e4844e91a28">   
     <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="69e4844e91a5c">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e912a8-7219971073493746847-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_69e4844e912a8-7219971073493746847-2__label" data-uid="69e4844e91b01">
        <!-- 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="69e4844e91b4a">   
     <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="69e4844e91b7d">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69e4844e912a8-7724209539091290172-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_69e4844e912a8-7724209539091290172-3__label" data-uid="69e4844e91c1c">
        <!-- 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="69e4844e91c64">   
     <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="69e4844e91c96">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69e4844e91fb9">
        <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_69e4844e91cfa" data-uid="69e4844e91cfa">
          <li id="69e4844e91cfa-3667456397071873361-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_69e4844e91cfa-3667456397071873361-0__label" data-uid="69e4844e91dd0">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e91cfa-5182368559442395163-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_69e4844e91cfa-5182368559442395163-1__label" data-uid="69e4844e91e65">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e91cfa-6017612107886242398-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_69e4844e91cfa-6017612107886242398-2__label" data-uid="69e4844e91f03">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69e4844e91cfa-2715969001083334441-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_69e4844e91cfa-2715969001083334441-3__label" data-uid="69e4844e91f86">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

          <li id="69e4844e912a8-6935801252763069327-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_69e4844e912a8-6935801252763069327-4__label" data-uid="69e4844e92019">   
     <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>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
    @nav([
        'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
        'classList' => ['u-position--relative'],
        'childItemsUrl' => '/',
        'direction' => 'horizontal',
        'includeToggle' => true,
        'allowStyle' => true,
        'height' => 'sm'
    ])
    @endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->

<div class="u-color__bg--lighter">
    @nav([
        'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
        'classList' => ['u-position--relative'],
        'childItemsUrl' => '/',
        'direction' => 'horizontal',
        'includeToggle' => true,
        'allowStyle' => true,
        'height' => 'md'
    ])
    @endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->

<div class="u-color__bg--lighter">
    @nav([
        'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
        'classList' => ['u-position--relative'],
        'childItemsUrl' => '/',
        'direction' => 'horizontal',
        'includeToggle' => true,
        'allowStyle' => true,
        'height' => 'lg'
    ])
    @endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->

Blade component parameters

Key Default value Type Available values Description
items [] array - An nested array of items containing: id, label, active, ancestor, children(bool = async loading, or array), href, style, class, and color (which overrides the color settings). Attribute list may also contain 'data-fetch-url' to enable asyncrounous fetching.
direction vertical string - Modifier for basic direction. Accept values: 'vertical', 'horizontal.'
includeToggle false boolean - Tells wheter to include toggle button to expand childs or not. Accept values: true, false.
isExtendedDropdown false boolean - If true, the nav will be presented as an extended dropdown menu. Should only be used for top level horizontal navs.
allowStyle true boolean - Allow the use of style parameter in this menu (item.style = 'button')
buttonStyle filled string - If the nav is presenting buttons, what style they should be in.
buttonColor primary string - If the nav is presenting buttons, what color they should be in.
expandLabel Expand string - Prefix for labels on expand arrow. Will result in Expand: Link label, or if label is missing, just Expand.
height string - The default height of the menu (only supports horizontal navigation). Values: sm, md, lg.
compressed false boolean - Makes the spacing between items smaller and the overall navigation more compressed.
expandIcon expand_more string - The icon to use for the expand button. Accepts any icon name from the icon library or svg.
indentSubLevels false boolean - If true, sublevels will be indented.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Nav/nav.json