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" js-keep-in-viewport-after-resize="1" id="688e125480a25" data-uid="688e125480a25">
<li id="688e125480a25-3672819408909498098-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" id="688e125480a25-3672819408909498098-0__label" href="#" target="_top" id="688e125480a25-3672819408909498098-0__label" data-uid="688e125480c3e">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e125480ccf">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125480d17">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125480d7a" data-uid="688e125480d7a">
<li id="688e125480d7a-4094405411482845253-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" id="688e125480d7a-4094405411482845253-0__label" href="#" target="_top" id="688e125480d7a-4094405411482845253-0__label" data-uid="688e125480e30">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e125480e83">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125480ec0">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125480f0f" data-uid="688e125480f0f">
<li id="688e125480f0f-2306780067670918799-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" id="688e125480f0f-2306780067670918799-0__label" href="#" target="_top" id="688e125480f0f-2306780067670918799-0__label" data-uid="688e125480fbd">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e12548100d">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481057">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125480f0f-476378516063719096-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" id="688e125480f0f-476378516063719096-1__label" href="#" target="_top" id="688e125480f0f-476378516063719096-1__label" data-uid="688e125481108">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e125481156">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481190">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e125480d7a-2065661677373083478-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" id="688e125480d7a-2065661677373083478-1__label" href="#" target="_top" id="688e125480d7a-2065661677373083478-1__label" data-uid="688e125481245">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125480a25-124442831108272313-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" id="688e125480a25-124442831108272313-1__label" href="#" target="_top" id="688e125480a25-124442831108272313-1__label" data-uid="688e1254812e0">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e12548132e">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481366">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125480a25-955382631578473135-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" id="688e125480a25-955382631578473135-2__label" href="#" target="_top" id="688e125480a25-955382631578473135-2__label" data-uid="688e12548143b">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e125481487">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254814bf">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125480a25-363059188297135801-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" id="688e125480a25-363059188297135801-3__label" href="#" target="_top" id="688e125480a25-363059188297135801-3__label" data-uid="688e125481569">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e1254815b5">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254815ed">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125481639" data-uid="688e125481639">
<li id="688e125481639-830004082999690333-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" id="688e125481639-830004082999690333-0__label" href="#" target="_top" id="688e125481639-830004082999690333-0__label" data-uid="688e1254816da">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e125481639-7196794583940177338-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" id="688e125481639-7196794583940177338-1__label" href="#" target="_top" id="688e125481639-7196794583940177338-1__label" data-uid="688e12548176a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e125481639-8710323715474952480-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" id="688e125481639-8710323715474952480-2__label" href="#" target="_top" id="688e125481639-8710323715474952480-2__label" data-uid="688e1254817fe">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e125481639-4139293073364353869-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" id="688e125481639-4139293073364353869-3__label" href="#" target="_top" id="688e125481639-4139293073364353869-3__label" data-uid="688e125481889">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125480a25-2765885520474069842-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e125480a25 - 2765885520474069842-4__label" data-uid="688e125481901">
<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
])
@endnavVertical 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" js-keep-in-viewport-after-resize="1" id="688e1254819ac" data-uid="688e1254819ac">
<li id="688e1254819ac-5738820105497373919-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" id="688e1254819ac-5738820105497373919-0__label" href="#" target="_top" id="688e1254819ac-5738820105497373919-0__label" data-uid="688e125481a5d">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e125481aac">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481ae6">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125481b33" data-uid="688e125481b33">
<li id="688e125481b33-7516953897390522104-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" id="688e125481b33-7516953897390522104-0__label" href="#" target="_top" id="688e125481b33-7516953897390522104-0__label" data-uid="688e125481be8">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e125481c31">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481c67">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125481cb2" data-uid="688e125481cb2">
<li id="688e125481cb2-8242987417698536190-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" id="688e125481cb2-8242987417698536190-0__label" href="#" target="_top" id="688e125481cb2-8242987417698536190-0__label" data-uid="688e125481d49">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e125481d92">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481dc7">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125481cb2-2501406329548282503-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" id="688e125481cb2-2501406329548282503-1__label" href="#" target="_top" id="688e125481cb2-2501406329548282503-1__label" data-uid="688e125481e69">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e125481eb0">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125481ee5">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e125481b33-8374709635261079827-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" id="688e125481b33-8374709635261079827-1__label" href="#" target="_top" id="688e125481b33-8374709635261079827-1__label" data-uid="688e125481f91">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e1254819ac-6477280201865978254-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" id="688e1254819ac-6477280201865978254-1__label" href="#" target="_top" id="688e1254819ac-6477280201865978254-1__label" data-uid="688e125482021">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e125482069">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e12548209e">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e1254819ac-7058656967632396602-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" id="688e1254819ac-7058656967632396602-2__label" href="#" target="_top" id="688e1254819ac-7058656967632396602-2__label" data-uid="688e12548213f">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e125482186">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254821bb">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e1254819ac-6816161272582027205-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" id="688e1254819ac-6816161272582027205-3__label" href="#" target="_top" id="688e1254819ac-6816161272582027205-3__label" data-uid="688e125482259">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e1254822a0">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254822e7">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e12548235d" data-uid="688e12548235d">
<li id="688e12548235d-5529031103771541775-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" id="688e12548235d-5529031103771541775-0__label" href="#" target="_top" id="688e12548235d-5529031103771541775-0__label" data-uid="688e125482408">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e12548235d-8905239159185811297-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" id="688e12548235d-8905239159185811297-1__label" href="#" target="_top" id="688e12548235d-8905239159185811297-1__label" data-uid="688e12548248f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e12548235d-3281377591350916349-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" id="688e12548235d-3281377591350916349-2__label" href="#" target="_top" id="688e12548235d-3281377591350916349-2__label" data-uid="688e125482511">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e12548235d-5909890338359878595-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" id="688e12548235d-5909890338359878595-3__label" href="#" target="_top" id="688e12548235d-5909890338359878595-3__label" data-uid="688e125482593">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e1254819ac-5043623415161431938-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e1254819ac - 5043623415161431938-4__label" data-uid="688e1254825f3">
<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'
])
@endnavVertical 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" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e12548268b" data-uid="688e12548268b">
<li id="688e12548268b-2699835667564465089-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" id="688e12548268b-2699835667564465089-0__label" href="#" target="_top" id="688e12548268b-2699835667564465089-0__label" data-uid="688e125482759">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e1254827a3">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254827da">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125482822" data-uid="688e125482822">
<li id="688e125482822-2823502787006886191-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" id="688e125482822-2823502787006886191-0__label" href="#" target="_top" id="688e125482822-2823502787006886191-0__label" data-uid="688e1254828b9">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e125482902">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482937">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e12548297e" data-uid="688e12548297e">
<li id="688e12548297e-5923761982395514100-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" id="688e12548297e-5923761982395514100-0__label" href="#" target="_top" id="688e12548297e-5923761982395514100-0__label" data-uid="688e125482a12">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e125482a5a">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482a8f">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e12548297e-4580517496666227709-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" id="688e12548297e-4580517496666227709-1__label" href="#" target="_top" id="688e12548297e-4580517496666227709-1__label" data-uid="688e125482b37">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e125482b7f">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482bb3">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e125482822-5720499983216576920-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" id="688e125482822-5720499983216576920-1__label" href="#" target="_top" id="688e125482822-5720499983216576920-1__label" data-uid="688e125482c58">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e12548268b-2204747999175374325-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" id="688e12548268b-2204747999175374325-1__label" href="#" target="_top" id="688e12548268b-2204747999175374325-1__label" data-uid="688e125482ce5">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e125482d2d">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482d62">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e12548268b-690862952312769083-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" id="688e12548268b-690862952312769083-2__label" href="#" target="_top" id="688e12548268b-690862952312769083-2__label" data-uid="688e125482e02">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e125482e49">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482e7e">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e12548268b-4809840164901684805-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" id="688e12548268b-4809840164901684805-3__label" href="#" target="_top" id="688e12548268b-4809840164901684805-3__label" data-uid="688e125482f25">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e125482f6c">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125482fa0">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125482fe6" data-uid="688e125482fe6">
<li id="688e125482fe6-5504417584515731680-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" id="688e125482fe6-5504417584515731680-0__label" href="#" target="_top" id="688e125482fe6-5504417584515731680-0__label" data-uid="688e12548307d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e125482fe6-1320757874565847615-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" id="688e125482fe6-1320757874565847615-1__label" href="#" target="_top" id="688e125482fe6-1320757874565847615-1__label" data-uid="688e125483103">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e125482fe6-9207279184887027205-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" id="688e125482fe6-9207279184887027205-2__label" href="#" target="_top" id="688e125482fe6-9207279184887027205-2__label" data-uid="688e125483186">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e125482fe6-7866352404567790556-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" id="688e125482fe6-7866352404567790556-3__label" href="#" target="_top" id="688e125482fe6-7866352404567790556-3__label" data-uid="688e125483206">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e12548268b-487442781017635278-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e12548268b - 487442781017635278-4__label" data-uid="688e125483265">
<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,
])
@endnavHorizontal navigation
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" js-keep-in-viewport-after-resize="1" id="688e12548330c" data-uid="688e12548330c">
<li id="688e12548330c-1940794464491351036-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" id="688e12548330c-1940794464491351036-0__label" href="#" target="_top" id="688e12548330c-1940794464491351036-0__label" data-uid="688e1254833ab">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="688e12548330c-5049673512164978506-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" id="688e12548330c-5049673512164978506-1__label" href="#" target="_top" id="688e12548330c-5049673512164978506-1__label" data-uid="688e125483443">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="688e12548330c-183684842318338564-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" id="688e12548330c-183684842318338564-2__label" href="#" target="_top" id="688e12548330c-183684842318338564-2__label" data-uid="688e1254834d6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="688e12548330c-1793998606030769056-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" id="688e12548330c-1793998606030769056-3__label" href="#" target="_top" id="688e12548330c-1793998606030769056-3__label" data-uid="688e125483566">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="688e12548330c-573847366379387748-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" id="688e12548330c-573847366379387748-4__label" href="#" target="_top" id="688e12548330c-573847366379387748-4__label" data-uid="688e1254835f5">
<!-- 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
])
@endnavHorizontal 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" js-keep-in-viewport-after-resize="1" id="688e12548366c" data-uid="688e12548366c">
<li id="688e12548366c-1436668282162988595-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" id="688e12548366c-1436668282162988595-0__label" href="#" target="_top" id="688e12548366c-1436668282162988595-0__label" data-uid="688e125483714">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e12548375f">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483795">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e1254837dd" data-uid="688e1254837dd">
<li id="688e1254837dd-7930372419780724103-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" id="688e1254837dd-7930372419780724103-0__label" href="#" target="_top" id="688e1254837dd-7930372419780724103-0__label" data-uid="688e12548387c">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e1254838d5">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e12548390c">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125483953" data-uid="688e125483953">
<li id="688e125483953-87913516916638477-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" id="688e125483953-87913516916638477-0__label" href="#" target="_top" id="688e125483953-87913516916638477-0__label" data-uid="688e1254839e8">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e125483a30">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483a65">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125483953-6089713498132780486-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" id="688e125483953-6089713498132780486-1__label" href="#" target="_top" id="688e125483953-6089713498132780486-1__label" data-uid="688e125483b0f">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e125483b58">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483b8b">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e1254837dd-1558600894037525613-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" id="688e1254837dd-1558600894037525613-1__label" href="#" target="_top" id="688e1254837dd-1558600894037525613-1__label" data-uid="688e125483c2f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e12548366c-9018212594269386666-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" id="688e12548366c-9018212594269386666-1__label" href="#" target="_top" id="688e12548366c-9018212594269386666-1__label" data-uid="688e125483cc1">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e125483d09">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483d3d">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e12548366c-128626088609213190-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" id="688e12548366c-128626088609213190-2__label" href="#" target="_top" id="688e12548366c-128626088609213190-2__label" data-uid="688e125483ddd">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e125483e25">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483e59">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e12548366c-3874173920748333014-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" id="688e12548366c-3874173920748333014-3__label" href="#" target="_top" id="688e12548366c-3874173920748333014-3__label" data-uid="688e125483f22">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e125483f6e">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125483fa6">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125483ff2" data-uid="688e125483ff2">
<li id="688e125483ff2-3169394887307693768-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" id="688e125483ff2-3169394887307693768-0__label" href="#" target="_top" id="688e125483ff2-3169394887307693768-0__label" data-uid="688e125484093">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e125483ff2-1049302887046021974-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" id="688e125483ff2-1049302887046021974-1__label" href="#" target="_top" id="688e125483ff2-1049302887046021974-1__label" data-uid="688e125484122">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e125483ff2-9193112497914136837-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" id="688e125483ff2-9193112497914136837-2__label" href="#" target="_top" id="688e125483ff2-9193112497914136837-2__label" data-uid="688e1254841ac">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e125483ff2-1550597622463005324-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" id="688e125483ff2-1550597622463005324-3__label" href="#" target="_top" id="688e125483ff2-1550597622463005324-3__label" data-uid="688e125484236">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e12548366c-6859583192010668250-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e12548366c - 6859583192010668250-4__label" data-uid="688e1254842a3">
<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" js-keep-in-viewport-after-resize="1" id="688e125484306" data-uid="688e125484306">
<li id="688e125484306-6067825624685312610-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" id="688e125484306-6067825624685312610-0__label" href="#" target="_top" id="688e125484306-6067825624685312610-0__label" data-uid="688e1254843b5">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e1254843ff">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125484435">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e12548447c" data-uid="688e12548447c">
<li id="688e12548447c-4742011227791738036-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" id="688e12548447c-4742011227791738036-0__label" href="#" target="_top" id="688e12548447c-4742011227791738036-0__label" data-uid="688e125484513">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e12548455b">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125484590">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e1254845d6" data-uid="688e1254845d6">
<li id="688e1254845d6-7090805806346010747-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" id="688e1254845d6-7090805806346010747-0__label" href="#" target="_top" id="688e1254845d6-7090805806346010747-0__label" data-uid="688e125484671">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e1254846ba">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254846ef">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e1254845d6-8854395439914333184-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" id="688e1254845d6-8854395439914333184-1__label" href="#" target="_top" id="688e1254845d6-8854395439914333184-1__label" data-uid="688e1254847b2">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e1254847f2">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125484821">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e12548447c-8385356976025289528-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" id="688e12548447c-8385356976025289528-1__label" href="#" target="_top" id="688e12548447c-8385356976025289528-1__label" data-uid="688e1254848b5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125484306-7916596388182581250-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" id="688e125484306-7916596388182581250-1__label" href="#" target="_top" id="688e125484306-7916596388182581250-1__label" data-uid="688e125484934">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e12548498e">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254849c2">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125484306-7926385013126486880-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" id="688e125484306-7926385013126486880-2__label" href="#" target="_top" id="688e125484306-7926385013126486880-2__label" data-uid="688e125484a83">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e125484afb">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125484b3e">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125484306-4613430673983893130-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" id="688e125484306-4613430673983893130-3__label" href="#" target="_top" id="688e125484306-4613430673983893130-3__label" data-uid="688e125484be4">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e125484c2d">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125484c61">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125484ca7" data-uid="688e125484ca7">
<li id="688e125484ca7-4359822678628136692-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" id="688e125484ca7-4359822678628136692-0__label" href="#" target="_top" id="688e125484ca7-4359822678628136692-0__label" data-uid="688e125484d3f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e125484ca7-7745151129527452842-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" id="688e125484ca7-7745151129527452842-1__label" href="#" target="_top" id="688e125484ca7-7745151129527452842-1__label" data-uid="688e125484dc6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e125484ca7-2146353137499834830-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" id="688e125484ca7-2146353137499834830-2__label" href="#" target="_top" id="688e125484ca7-2146353137499834830-2__label" data-uid="688e125484e4f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e125484ca7-4166170115247762469-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" id="688e125484ca7-4166170115247762469-3__label" href="#" target="_top" id="688e125484ca7-4166170115247762469-3__label" data-uid="688e125484ed2">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125484306-5921723478456810516-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e125484306 - 5921723478456810516-4__label" data-uid="688e125484f33">
<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" js-keep-in-viewport-after-resize="1" id="688e125484f93" data-uid="688e125484f93">
<li id="688e125484f93-6185856857620950680-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" id="688e125484f93-6185856857620950680-0__label" href="#" target="_top" id="688e125484f93-6185856857620950680-0__label" data-uid="688e125485033">
<!-- 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" target="_top" aria-label="Expand: Arbete" type="button" data-uid="688e12548507b">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254850b1">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e1254850f8" data-uid="688e1254850f8">
<li id="688e1254850f8-6006583877655500322-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" id="688e1254850f8-6006583877655500322-0__label" href="#" target="_top" id="688e1254850f8-6006583877655500322-0__label" data-uid="688e12548518f">
<!-- 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" target="_top" aria-label="Expand: Arbete - Child 1 with a long name" type="button" data-uid="688e1254851d7">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e12548520d">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125485287" data-uid="688e125485287">
<li id="688e125485287-1451689999030542810-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" id="688e125485287-1451689999030542810-0__label" href="#" target="_top" id="688e125485287-1451689999030542810-0__label" data-uid="688e12548533c">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 1" type="button" data-uid="688e12548538a">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254853c3">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125485287-4330145111415055306-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" id="688e125485287-4330145111415055306-1__label" href="#" target="_top" id="688e125485287-4330145111415055306-1__label" data-uid="688e12548546d">
<!-- 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" target="_top" aria-label="Expand: Arbete - Granchild 2" type="button" data-uid="688e1254854bf">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254854f7">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="688e1254850f8-7522012871859881711-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" id="688e1254850f8-7522012871859881711-1__label" href="#" target="_top" id="688e1254850f8-7522012871859881711-1__label" data-uid="688e1254855ab">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125484f93-3371643212425506729-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" id="688e125484f93-3371643212425506729-1__label" href="#" target="_top" id="688e125484f93-3371643212425506729-1__label" data-uid="688e125485664">
<!-- 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" target="_top" aria-label="Expand: Bo, bygga och miljö" type="button" data-uid="688e1254856c1">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e1254856f9">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125484f93-3377552165693629353-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" id="688e125484f93-3377552165693629353-2__label" href="#" target="_top" id="688e125484f93-3377552165693629353-2__label" data-uid="688e1254857ab">
<!-- 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" target="_top" aria-label="Expand: Förskola och utbildning" type="button" data-uid="688e1254857f1">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e125485825">
</span>
</span>
</span> </button> </div>
</li>
<li id="688e125484f93-1302642051000089134-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" id="688e125484f93-1302642051000089134-3__label" href="#" target="_top" id="688e125484f93-1302642051000089134-3__label" data-uid="688e1254858c3">
<!-- 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" target="_top" aria-label="Expand: Kommun och politik" type="button" data-uid="688e12548590b">
<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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="688e12548593e">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<ul class="c-nav c-nav--bordered c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="688e125485984" data-uid="688e125485984">
<li id="688e125485984-4797012743621861644-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" id="688e125485984-4797012743621861644-0__label" href="#" target="_top" id="688e125485984-4797012743621861644-0__label" data-uid="688e125485a22">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="688e125485984-2877821348164933226-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" id="688e125485984-2877821348164933226-1__label" href="#" target="_top" id="688e125485984-2877821348164933226-1__label" data-uid="688e125485ab1">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="688e125485984-2557892904972713952-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" id="688e125485984-2557892904972713952-2__label" href="#" target="_top" id="688e125485984-2557892904972713952-2__label" data-uid="688e125485b24">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="688e125485984-6107324795430916445-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" id="688e125485984-6107324795430916445-3__label" href="#" target="_top" id="688e125485984-6107324795430916445-3__label" data-uid="688e125485b96">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="688e125484f93-2071327430217582263-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" target="_top" aria-label="Omsorg och stöd" type="button" href="#" id="688e125484f93 - 2071327430217582263-4__label" data-uid="688e125485bea">
<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. |
| 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. |
| 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. |