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_69c9d5aaa5f4d" data-uid="69c9d5aaa5f4d">
          <li id="69c9d5aaa5f4d-1933153410013271498-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_69c9d5aaa5f4d-1933153410013271498-0__label" data-uid="69c9d5aaa61f2">
        <!-- 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="69c9d5aaa6298">   
     <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="69c9d5aaa62e3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa6967">
        <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_69c9d5aaa635c" data-uid="69c9d5aaa635c">
          <li id="69c9d5aaa635c-3728284977225926833-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_69c9d5aaa635c-3728284977225926833-0__label" data-uid="69c9d5aaa6438">
        <!-- 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="69c9d5aaa6493">   
     <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="69c9d5aaa64d3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa687c">
        <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_69c9d5aaa6526" data-uid="69c9d5aaa6526">
          <li id="69c9d5aaa6526-9123868779950276856-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_69c9d5aaa6526-9123868779950276856-0__label" data-uid="69c9d5aaa65eb">
        <!-- 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="69c9d5aaa6641">   
     <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="69c9d5aaa6689">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa6526-440143768657919096-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_69c9d5aaa6526-440143768657919096-1__label" data-uid="69c9d5aaa675c">
        <!-- 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="69c9d5aaa67b1">   
     <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="69c9d5aaa67ed">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaa5f4d-8600013821673870518-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_69c9d5aaa5f4d-8600013821673870518-1__label" data-uid="69c9d5aaa6a09">
        <!-- 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="69c9d5aaa6a5e">   
     <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="69c9d5aaa6a9b">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa5f4d-2853503519972349949-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_69c9d5aaa5f4d-2853503519972349949-2__label" data-uid="69c9d5aaa6b63">
        <!-- 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="69c9d5aaa6bb7">   
     <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="69c9d5aaa6bf2">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa5f4d-2705966601687890152-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_69c9d5aaa5f4d-2705966601687890152-3__label" data-uid="69c9d5aaa6ca7">
        <!-- 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="69c9d5aaa6cfb">   
     <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="69c9d5aaa6d35">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa7057">
        <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_69c9d5aaa6d85" data-uid="69c9d5aaa6d85">
          <li id="69c9d5aaa6d85-7582482507569490431-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_69c9d5aaa6d85-7582482507569490431-0__label" data-uid="69c9d5aaa6e48">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa6d85-4140023752414027300-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_69c9d5aaa6d85-4140023752414027300-1__label" data-uid="69c9d5aaa6eee">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa6d85-8376123436092211291-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_69c9d5aaa6d85-8376123436092211291-2__label" data-uid="69c9d5aaa6f88">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaa5f4d-4666488021365536474-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_69c9d5aaa5f4d-4666488021365536474-4__label" data-uid="69c9d5aaa70d6">   
     <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_69c9d5aaa7190" data-uid="69c9d5aaa7190">
          <li id="69c9d5aaa7190-5711153132609831826-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_69c9d5aaa7190-5711153132609831826-0__label" data-uid="69c9d5aaa7265">
        <!-- 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="69c9d5aaa72cb">   
     <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="69c9d5aaa730a">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa78de">
        <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_69c9d5aaa735c" data-uid="69c9d5aaa735c">
          <li id="69c9d5aaa735c-1575917449070443511-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_69c9d5aaa735c-1575917449070443511-0__label" data-uid="69c9d5aaa741f">
        <!-- 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="69c9d5aaa7474">   
     <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="69c9d5aaa74b0">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa7806">
        <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_69c9d5aaa7500" data-uid="69c9d5aaa7500">
          <li id="69c9d5aaa7500-1951764166667797130-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_69c9d5aaa7500-1951764166667797130-0__label" data-uid="69c9d5aaa75bf">
        <!-- 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="69c9d5aaa7612">   
     <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="69c9d5aaa764f">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa7500-4016785784233079404-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_69c9d5aaa7500-4016785784233079404-1__label" data-uid="69c9d5aaa771e">
        <!-- 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="69c9d5aaa7771">   
     <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="69c9d5aaa77ac">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaa7190-3357331270990107321-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_69c9d5aaa7190-3357331270990107321-1__label" data-uid="69c9d5aaa797a">
        <!-- 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="69c9d5aaa79ce">   
     <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="69c9d5aaa7a0a">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa7190-1020485780873254877-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_69c9d5aaa7190-1020485780873254877-2__label" data-uid="69c9d5aaa7ad0">
        <!-- 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="69c9d5aaa7b23">   
     <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="69c9d5aaa7b5e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa7190-76986439674153660-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_69c9d5aaa7190-76986439674153660-3__label" data-uid="69c9d5aaa7c14">
        <!-- 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="69c9d5aaa7c66">   
     <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="69c9d5aaa7c9f">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa7fc1">
        <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_69c9d5aaa7ced" data-uid="69c9d5aaa7ced">
          <li id="69c9d5aaa7ced-8195378960256319749-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_69c9d5aaa7ced-8195378960256319749-0__label" data-uid="69c9d5aaa7daf">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa7ced-5062895438258908675-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_69c9d5aaa7ced-5062895438258908675-1__label" data-uid="69c9d5aaa7e4e">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa7ced-8123805011937665762-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_69c9d5aaa7ced-8123805011937665762-2__label" data-uid="69c9d5aaa7ef2">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaa7190-4504966819371976489-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_69c9d5aaa7190-4504966819371976489-4__label" data-uid="69c9d5aaa802e">   
     <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_69c9d5aaa80e2" data-uid="69c9d5aaa80e2">
          <li id="69c9d5aaa80e2-4946186305286032476-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_69c9d5aaa80e2-4946186305286032476-0__label" data-uid="69c9d5aaa81b6">
        <!-- 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="69c9d5aaa820f">   
     <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="69c9d5aaa824d">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa8825">
        <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_69c9d5aaa82ae" data-uid="69c9d5aaa82ae">
          <li id="69c9d5aaa82ae-4469519048808883616-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_69c9d5aaa82ae-4469519048808883616-0__label" data-uid="69c9d5aaa8375">
        <!-- 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="69c9d5aaa83ca">   
     <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="69c9d5aaa8406">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa874f">
        <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_69c9d5aaa8456" data-uid="69c9d5aaa8456">
          <li id="69c9d5aaa8456-4182080518394763516-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_69c9d5aaa8456-4182080518394763516-0__label" data-uid="69c9d5aaa8515">
        <!-- 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="69c9d5aaa8568">   
     <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="69c9d5aaa85a3">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa8456-7397064825042707501-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_69c9d5aaa8456-7397064825042707501-1__label" data-uid="69c9d5aaa8669">
        <!-- 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="69c9d5aaa86bd">   
     <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="69c9d5aaa86f6">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaa80e2-9156571404651181313-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_69c9d5aaa80e2-9156571404651181313-1__label" data-uid="69c9d5aaa88be">
        <!-- 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="69c9d5aaa8912">   
     <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="69c9d5aaa894e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa80e2-1804260873731623034-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_69c9d5aaa80e2-1804260873731623034-2__label" data-uid="69c9d5aaa8a06">
        <!-- 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="69c9d5aaa8a64">   
     <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="69c9d5aaa8a9e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa80e2-7924320773563385434-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_69c9d5aaa80e2-7924320773563385434-3__label" data-uid="69c9d5aaa8b54">
        <!-- 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="69c9d5aaa8ba6">   
     <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="69c9d5aaa8bdf">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa8ef8">
        <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_69c9d5aaa8c2e" data-uid="69c9d5aaa8c2e">
          <li id="69c9d5aaa8c2e-5781896779198539772-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_69c9d5aaa8c2e-5781896779198539772-0__label" data-uid="69c9d5aaa8cef">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa8c2e-8986270635183865197-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_69c9d5aaa8c2e-8986270635183865197-1__label" data-uid="69c9d5aaa8d87">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa8c2e-1439687549589597485-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_69c9d5aaa8c2e-1439687549589597485-2__label" data-uid="69c9d5aaa8e29">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaa80e2-2576764194164018491-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_69c9d5aaa80e2-2576764194164018491-4__label" data-uid="69c9d5aaa8f63">   
     <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_69c9d5aaa9012" data-uid="69c9d5aaa9012">
          <li id="69c9d5aaa9012-7991995244726495303-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_69c9d5aaa9012-7991995244726495303-0__label" data-uid="69c9d5aaa90d8">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

        
                          </li>

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

        
                          </li>

          <li id="69c9d5aaa9012-3151798177284547199-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_69c9d5aaa9012-3151798177284547199-4__label" data-uid="69c9d5aaa9389">
        <!-- 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_69c9d5aaa9414" data-uid="69c9d5aaa9414">
          <li id="69c9d5aaa9414-8967371608221420855-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_69c9d5aaa9414-8967371608221420855-0__label" data-uid="69c9d5aaa94e1">
        <!-- 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="69c9d5aaa9537">   
     <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="69c9d5aaa9573">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa9b37">
        <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_69c9d5aaa95c3" data-uid="69c9d5aaa95c3">
          <li id="69c9d5aaa95c3-7083187831766544090-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_69c9d5aaa95c3-7083187831766544090-0__label" data-uid="69c9d5aaa9693">
        <!-- 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="69c9d5aaa96e6">   
     <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="69c9d5aaa9722">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaa9a61">
        <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_69c9d5aaa9771" data-uid="69c9d5aaa9771">
          <li id="69c9d5aaa9771-19358165955178092-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_69c9d5aaa9771-19358165955178092-0__label" data-uid="69c9d5aaa982a">
        <!-- 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="69c9d5aaa987f">   
     <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="69c9d5aaa98ba">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa9771-8314400519700814626-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_69c9d5aaa9771-8314400519700814626-1__label" data-uid="69c9d5aaa996f">
        <!-- 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="69c9d5aaa99c1">   
     <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="69c9d5aaa9a09">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaa9414-111110390938953515-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_69c9d5aaa9414-111110390938953515-1__label" data-uid="69c9d5aaa9bd3">
        <!-- 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="69c9d5aaa9c26">   
     <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="69c9d5aaa9c63">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa9414-6375278900887792432-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_69c9d5aaa9414-6375278900887792432-2__label" data-uid="69c9d5aaa9d1a">
        <!-- 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="69c9d5aaa9d6c">   
     <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="69c9d5aaa9da6">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaa9414-554257979900086556-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_69c9d5aaa9414-554257979900086556-3__label" data-uid="69c9d5aaa9e67">
        <!-- 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="69c9d5aaa9eba">   
     <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="69c9d5aaa9ef2">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaaa202">
        <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_69c9d5aaa9f40" data-uid="69c9d5aaa9f40">
          <li id="69c9d5aaa9f40-2870791555691591704-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_69c9d5aaa9f40-2870791555691591704-0__label" data-uid="69c9d5aaaa000">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa9f40-6939307584263895456-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_69c9d5aaa9f40-6939307584263895456-1__label" data-uid="69c9d5aaaa099">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaa9f40-6258468594559183767-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_69c9d5aaa9f40-6258468594559183767-2__label" data-uid="69c9d5aaaa12b">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaa9414-1479023386347409699-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_69c9d5aaa9414-1479023386347409699-4__label" data-uid="69c9d5aaaa26f">   
     <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_69c9d5aaaa2df" data-uid="69c9d5aaaa2df">
          <li id="69c9d5aaaa2df-3377030059120120656-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_69c9d5aaaa2df-3377030059120120656-0__label" data-uid="69c9d5aaaa3a8">
        <!-- 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="69c9d5aaaa3fc">   
     <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="69c9d5aaaa43a">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaaaa05">
        <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_69c9d5aaaa48a" data-uid="69c9d5aaaa48a">
          <li id="69c9d5aaaa48a-3733009987318374127-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_69c9d5aaaa48a-3733009987318374127-0__label" data-uid="69c9d5aaaa54a">
        <!-- 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="69c9d5aaaa5ac">   
     <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="69c9d5aaaa5e8">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaaa922">
        <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_69c9d5aaaa638" data-uid="69c9d5aaaa638">
          <li id="69c9d5aaaa638-287532541899132194-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_69c9d5aaaa638-287532541899132194-0__label" data-uid="69c9d5aaaa6f5">
        <!-- 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="69c9d5aaaa749">   
     <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="69c9d5aaaa784">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaaa638-4933377256338606030-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_69c9d5aaaa638-4933377256338606030-1__label" data-uid="69c9d5aaaa83d">
        <!-- 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="69c9d5aaaa890">   
     <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="69c9d5aaaa8ca">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaaa2df-3561273054133886884-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_69c9d5aaaa2df-3561273054133886884-1__label" data-uid="69c9d5aaaaaa0">
        <!-- 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="69c9d5aaaaaf4">   
     <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="69c9d5aaaab2e">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaaa2df-749247513867963276-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_69c9d5aaaa2df-749247513867963276-2__label" data-uid="69c9d5aaaabe4">
        <!-- 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="69c9d5aaaac38">   
     <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="69c9d5aaaac72">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaaa2df-2776366194421520966-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_69c9d5aaaa2df-2776366194421520966-3__label" data-uid="69c9d5aaaad25">
        <!-- 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="69c9d5aaaadb3">   
     <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="69c9d5aaaadf4">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaab102">
        <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_69c9d5aaaae45" data-uid="69c9d5aaaae45">
          <li id="69c9d5aaaae45-8331511217571287592-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_69c9d5aaaae45-8331511217571287592-0__label" data-uid="69c9d5aaaaf07">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaaae45-8543414389733850295-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_69c9d5aaaae45-8543414389733850295-1__label" data-uid="69c9d5aaaaf9f">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaaae45-3665191878699928768-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_69c9d5aaaae45-3665191878699928768-2__label" data-uid="69c9d5aaab036">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaaa2df-7189005779889009299-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_69c9d5aaaa2df-7189005779889009299-4__label" data-uid="69c9d5aaab17b">   
     <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_69c9d5aaab1ed" data-uid="69c9d5aaab1ed">
          <li id="69c9d5aaab1ed-5592114013192821782-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_69c9d5aaab1ed-5592114013192821782-0__label" data-uid="69c9d5aaab2b7">
        <!-- 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="69c9d5aaab30c">   
     <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="69c9d5aaab346">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaab8fe">
        <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_69c9d5aaab396" data-uid="69c9d5aaab396">
          <li id="69c9d5aaab396-4259243732658459269-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_69c9d5aaab396-4259243732658459269-0__label" data-uid="69c9d5aaab456">
        <!-- 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="69c9d5aaab4aa">   
     <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="69c9d5aaab4e5">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaab829">
        <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_69c9d5aaab542" data-uid="69c9d5aaab542">
          <li id="69c9d5aaab542-7484245303475448731-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_69c9d5aaab542-7484245303475448731-0__label" data-uid="69c9d5aaab5ff">
        <!-- 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="69c9d5aaab653">   
     <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="69c9d5aaab68d">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaab542-4955276308183244107-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_69c9d5aaab542-4955276308183244107-1__label" data-uid="69c9d5aaab742">
        <!-- 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="69c9d5aaab794">   
     <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="69c9d5aaab7ce">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

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

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

        
                          </li>

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

          <li id="69c9d5aaab1ed-4892351526655077227-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_69c9d5aaab1ed-4892351526655077227-1__label" data-uid="69c9d5aaab9a8">
        <!-- 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="69c9d5aaab9fb">   
     <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="69c9d5aaaba36">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaab1ed-640696129052691145-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_69c9d5aaab1ed-640696129052691145-2__label" data-uid="69c9d5aaabaec">
        <!-- 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="69c9d5aaabb3e">   
     <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="69c9d5aaabb78">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
                          </li>

          <li id="69c9d5aaab1ed-1225334064709889531-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_69c9d5aaab1ed-1225334064709889531-3__label" data-uid="69c9d5aaabc2f">
        <!-- 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="69c9d5aaabc81">   
     <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="69c9d5aaabcba">
                    </span>
            </span>
        
        
    </span> </button>        </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69c9d5aaabfce">
        <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_69c9d5aaabd16" data-uid="69c9d5aaabd16">
          <li id="69c9d5aaabd16-1580766425686697949-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_69c9d5aaabd16-1580766425686697949-0__label" data-uid="69c9d5aaabdd8">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaabd16-209017921515122186-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_69c9d5aaabd16-209017921515122186-1__label" data-uid="69c9d5aaabe6f">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69c9d5aaabd16-3849142882520919967-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_69c9d5aaabd16-3849142882520919967-2__label" data-uid="69c9d5aaabf02">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

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

        
                          </li>

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

          <li id="69c9d5aaab1ed-2216106783728516747-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_69c9d5aaab1ed-2216106783728516747-4__label" data-uid="69c9d5aaac03d">   
     <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