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_691625c81dca8" data-uid="691625c81dca8">
<li id="691625c81dca8-1474161749646041804-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_691625c81dca8-1474161749646041804-0__label" data-uid="691625c81dfa5">
<!-- 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="691625c81e072">
<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="691625c81e0c2">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81e139" data-uid="691625c81e139">
<li id="691625c81e139-3442547783914652205-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_691625c81e139-3442547783914652205-0__label" data-uid="691625c81e251">
<!-- 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="691625c81e2c1">
<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="691625c81e30a">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81e362" data-uid="691625c81e362">
<li id="691625c81e362-874994556440970150-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_691625c81e362-874994556440970150-0__label" data-uid="691625c81e46d">
<!-- 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="691625c81e4d8">
<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="691625c81e51c">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81e362-5589943304907442202-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_691625c81e362-5589943304907442202-1__label" data-uid="691625c81e5e4">
<!-- 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="691625c81e648">
<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="691625c81e6ba">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c81e139-8416343553371627232-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_691625c81e139-8416343553371627232-1__label" data-uid="691625c81e7a6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c81dca8-3181366185984264011-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_691625c81dca8-3181366185984264011-1__label" data-uid="691625c81e856">
<!-- 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="691625c81e8c0">
<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="691625c81e900">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81dca8-573183058352478486-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_691625c81dca8-573183058352478486-2__label" data-uid="691625c81e9c0">
<!-- 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="691625c81ea16">
<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="691625c81ea56">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81dca8-7416743841493697542-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_691625c81dca8-7416743841493697542-3__label" data-uid="691625c81eb20">
<!-- 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="691625c81eb77">
<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="691625c81ebb1">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81ebfe" data-uid="691625c81ebfe">
<li id="691625c81ebfe-2836012020273636744-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_691625c81ebfe-2836012020273636744-0__label" data-uid="691625c81ecab">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c81ebfe-330998093427369032-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_691625c81ebfe-330998093427369032-1__label" data-uid="691625c81ed40">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c81ebfe-1616788143114650311-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_691625c81ebfe-1616788143114650311-2__label" data-uid="691625c81edd1">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c81ebfe-5627432565508945519-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_691625c81ebfe-5627432565508945519-3__label" data-uid="691625c81ee6d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c81dca8-324657059874937624-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_691625c81dca8-324657059874937624-4__label" data-uid="691625c81eefb">
<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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81f31c" data-uid="691625c81f31c">
<li id="691625c81f31c-7280979256585350832-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_691625c81f31c-7280979256585350832-0__label" data-uid="691625c81f3f3">
<!-- 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="691625c81f44c">
<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="691625c81f488">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81f4db" data-uid="691625c81f4db">
<li id="691625c81f4db-8554871443918251471-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_691625c81f4db-8554871443918251471-0__label" data-uid="691625c81f58c">
<!-- 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="691625c81f5e3">
<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="691625c81f623">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81f683" data-uid="691625c81f683">
<li id="691625c81f683-4395018222559957018-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_691625c81f683-4395018222559957018-0__label" data-uid="691625c81f736">
<!-- 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="691625c81f78d">
<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="691625c81f7cb">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81f683-6369468427468561195-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_691625c81f683-6369468427468561195-1__label" data-uid="691625c81f888">
<!-- 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="691625c81f8dc">
<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="691625c81f918">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c81f4db-1867978674912231237-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_691625c81f4db-1867978674912231237-1__label" data-uid="691625c81f9d7">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c81f31c-7555374892656246905-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_691625c81f31c-7555374892656246905-1__label" data-uid="691625c81fa8b">
<!-- 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="691625c81fae1">
<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="691625c81fb1e">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81f31c-3921721958777862702-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_691625c81f31c-3921721958777862702-2__label" data-uid="691625c81fbd4">
<!-- 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="691625c81fc28">
<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="691625c81fc64">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c81f31c-6704684375357676031-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_691625c81f31c-6704684375357676031-3__label" data-uid="691625c81fd1d">
<!-- 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="691625c81fd74">
<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="691625c81fdaf">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c81fe09" data-uid="691625c81fe09">
<li id="691625c81fe09-8475823510309619211-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_691625c81fe09-8475823510309619211-0__label" data-uid="691625c81febf">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c81fe09-7606071254362122512-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_691625c81fe09-7606071254362122512-1__label" data-uid="691625c81ff59">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c81fe09-1683650892089085812-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_691625c81fe09-1683650892089085812-2__label" data-uid="691625c81fff2">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c81fe09-5824625419424092990-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_691625c81fe09-5824625419424092990-3__label" data-uid="691625c820087">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c81f31c-6678694144420944257-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_691625c81f31c-6678694144420944257-4__label" data-uid="691625c8200fc">
<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 c-nav--indent-sublevels" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_691625c8204d7" data-uid="691625c8204d7">
<li id="691625c8204d7-2126114568459567417-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_691625c8204d7-2126114568459567417-0__label" data-uid="691625c8205b0">
<!-- 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="691625c82061a">
<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="691625c820658">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8206aa" data-uid="691625c8206aa">
<li id="691625c8206aa-8147162287352261804-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_691625c8206aa-8147162287352261804-0__label" data-uid="691625c820761">
<!-- 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="691625c8207b6">
<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="691625c8207f2">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c820841" data-uid="691625c820841">
<li id="691625c820841-5408658212668051424-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_691625c820841-5408658212668051424-0__label" data-uid="691625c8208eb">
<!-- 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="691625c82093e">
<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="691625c820979">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c820841-5150143218759385380-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_691625c820841-5150143218759385380-1__label" data-uid="691625c820a3d">
<!-- 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="691625c820a90">
<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="691625c820aca">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c8206aa-1597056030171679942-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_691625c8206aa-1597056030171679942-1__label" data-uid="691625c820b82">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c8204d7-4227449884515994551-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_691625c8204d7-4227449884515994551-1__label" data-uid="691625c820c21">
<!-- 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="691625c820c71">
<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="691625c820cab">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c8204d7-2619515419408869161-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_691625c8204d7-2619515419408869161-2__label" data-uid="691625c820d5c">
<!-- 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="691625c820db8">
<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="691625c820df3">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c8204d7-8760195746501918177-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_691625c8204d7-8760195746501918177-3__label" data-uid="691625c820ea5">
<!-- 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="691625c820ef5">
<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="691625c820f2d">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c820f7a" data-uid="691625c820f7a">
<li id="691625c820f7a-2127961097653625317-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_691625c820f7a-2127961097653625317-0__label" data-uid="691625c821023">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c820f7a-4295147926870230911-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_691625c820f7a-4295147926870230911-1__label" data-uid="691625c8210b6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c820f7a-7443031346622376775-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_691625c820f7a-7443031346622376775-2__label" data-uid="691625c821144">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c820f7a-4417020439420734570-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_691625c820f7a-4417020439420734570-3__label" data-uid="691625c82121a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c8204d7-1327766794252094965-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_691625c8204d7-1327766794252094965-4__label" data-uid="691625c82128a">
<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" data-js-keep-in-viewport-after-resize="1" id="id_691625c821669" data-uid="691625c821669">
<li id="691625c821669-8148545473982137762-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_691625c821669-8148545473982137762-0__label" data-uid="691625c821743">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="691625c821669-6366718126945104199-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_691625c821669-6366718126945104199-1__label" data-uid="691625c8217ff">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="691625c821669-8791336901063718627-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_691625c821669-8791336901063718627-2__label" data-uid="691625c8218b1">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="691625c821669-1826224531057626194-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_691625c821669-1826224531057626194-3__label" data-uid="691625c82196a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="691625c821669-7887759321594538764-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_691625c821669-7887759321594538764-4__label" data-uid="691625c821a16">
<!-- 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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8222a3" data-uid="691625c8222a3">
<li id="691625c8222a3-2141872614089143530-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_691625c8222a3-2141872614089143530-0__label" data-uid="691625c8225f4">
<!-- 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="691625c822717">
<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="691625c8227df">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8229f5" data-uid="691625c8229f5">
<li id="691625c8229f5-8677894576276742247-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_691625c8229f5-8677894576276742247-0__label" data-uid="691625c822b62">
<!-- 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="691625c822bbe">
<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="691625c822bfe">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c822c51" data-uid="691625c822c51">
<li id="691625c822c51-8671069788451903767-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_691625c822c51-8671069788451903767-0__label" data-uid="691625c822d18">
<!-- 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="691625c822d6d">
<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="691625c822da9">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c822c51-4945324129124808606-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_691625c822c51-4945324129124808606-1__label" data-uid="691625c822e6d">
<!-- 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="691625c822ec0">
<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="691625c822ef9">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c8229f5-7781078741561139184-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_691625c8229f5-7781078741561139184-1__label" data-uid="691625c822fb5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c8222a3-967782650699549523-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_691625c8222a3-967782650699549523-1__label" data-uid="691625c823054">
<!-- 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="691625c8230a7">
<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="691625c8230ef">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c8222a3-4404328269094842488-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_691625c8222a3-4404328269094842488-2__label" data-uid="691625c823288">
<!-- 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="691625c8232e5">
<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="691625c823324">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c8222a3-1902889118043989478-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_691625c8222a3-1902889118043989478-3__label" data-uid="691625c8233e4">
<!-- 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="691625c82343c">
<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="691625c823478">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8234d8" data-uid="691625c8234d8">
<li id="691625c8234d8-9039686947138661846-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_691625c8234d8-9039686947138661846-0__label" data-uid="691625c823591">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c8234d8-5255099685015532844-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_691625c8234d8-5255099685015532844-1__label" data-uid="691625c823631">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c8234d8-370274691518817941-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_691625c8234d8-370274691518817941-2__label" data-uid="691625c8236c9">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c8234d8-1409303938581418806-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_691625c8234d8-1409303938581418806-3__label" data-uid="691625c823762">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c8222a3-4303008099701165547-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_691625c8222a3-4303008099701165547-4__label" data-uid="691625c8237d9">
<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_691625c823848" data-uid="691625c823848">
<li id="691625c823848-7786800996445801007-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_691625c823848-7786800996445801007-0__label" data-uid="691625c823912">
<!-- 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="691625c823968">
<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="691625c8239a5">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8239f8" data-uid="691625c8239f8">
<li id="691625c8239f8-940102789136136145-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_691625c8239f8-940102789136136145-0__label" data-uid="691625c823aac">
<!-- 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="691625c823b03">
<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="691625c823b40">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c823b93" data-uid="691625c823b93">
<li id="691625c823b93-409566457036912793-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_691625c823b93-409566457036912793-0__label" data-uid="691625c823c49">
<!-- 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="691625c823cad">
<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="691625c823cec">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c823b93-2530621640830340218-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_691625c823b93-2530621640830340218-1__label" data-uid="691625c823da3">
<!-- 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="691625c823df4">
<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="691625c823e2d">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c8239f8-6914427221470800977-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_691625c8239f8-6914427221470800977-1__label" data-uid="691625c823ee4">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c823848-8717751649112862676-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_691625c823848-8717751649112862676-1__label" data-uid="691625c823f87">
<!-- 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="691625c823fd9">
<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="691625c824012">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c823848-8875070243180372534-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_691625c823848-8875070243180372534-2__label" data-uid="691625c8240d2">
<!-- 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="691625c824126">
<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="691625c82415f">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c823848-6919840568919125109-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_691625c823848-6919840568919125109-3__label" data-uid="691625c82420f">
<!-- 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="691625c82425f">
<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="691625c824297">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8242e4" data-uid="691625c8242e4">
<li id="691625c8242e4-719056288338718403-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_691625c8242e4-719056288338718403-0__label" data-uid="691625c82438d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c8242e4-5182816986246634801-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_691625c8242e4-5182816986246634801-1__label" data-uid="691625c824422">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c8242e4-7999927618376188567-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_691625c8242e4-7999927618376188567-2__label" data-uid="691625c8244c4">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c8242e4-7283205343793221219-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_691625c8242e4-7283205343793221219-3__label" data-uid="691625c824558">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c823848-157870832630127753-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_691625c823848-157870832630127753-4__label" data-uid="691625c8245c6">
<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_691625c82463b" data-uid="691625c82463b">
<li id="691625c82463b-3500200672734585614-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_691625c82463b-3500200672734585614-0__label" data-uid="691625c8246ee">
<!-- 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="691625c82473f">
<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="691625c824779">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c8247c7" data-uid="691625c8247c7">
<li id="691625c8247c7-1856228617083099621-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_691625c8247c7-1856228617083099621-0__label" data-uid="691625c824958">
<!-- 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="691625c8249f2">
<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="691625c824a54">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c824ad6" data-uid="691625c824ad6">
<li id="691625c824ad6-936930270251006241-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_691625c824ad6-936930270251006241-0__label" data-uid="691625c824bf3">
<!-- 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="691625c824c83">
<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="691625c824cde">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c824ad6-8023306752336052301-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_691625c824ad6-8023306752336052301-1__label" data-uid="691625c824dfa">
<!-- 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="691625c824e7a">
<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="691625c824ed2">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="691625c8247c7-2075775141963852426-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_691625c8247c7-2075775141963852426-1__label" data-uid="691625c824ffe">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c82463b-4689829424630612459-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_691625c82463b-4689829424630612459-1__label" data-uid="691625c825108">
<!-- 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="691625c825184">
<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="691625c8251dd">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c82463b-6521034883221477390-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_691625c82463b-6521034883221477390-2__label" data-uid="691625c8252f1">
<!-- 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="691625c82536e">
<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="691625c8253c8">
</span>
</span>
</span> </button> </div>
</li>
<li id="691625c82463b-7565432067806649512-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_691625c82463b-7565432067806649512-3__label" data-uid="691625c8254eb">
<!-- 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="691625c825564">
<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="691625c8255bb">
</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" data-js-keep-in-viewport-after-resize="1" id="id_691625c825630" data-uid="691625c825630">
<li id="691625c825630-3400069727544398045-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_691625c825630-3400069727544398045-0__label" data-uid="691625c825736">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="691625c825630-7245106897251402480-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_691625c825630-7245106897251402480-1__label" data-uid="691625c825822">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="691625c825630-1230427859876442299-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_691625c825630-1230427859876442299-2__label" data-uid="691625c8258fc">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="691625c825630-5804486326122826036-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_691625c825630-5804486326122826036-3__label" data-uid="691625c8259d5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="691625c82463b-3203760088895055409-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_691625c82463b-3203760088895055409-4__label" data-uid="691625c825a7b">
<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. |
| 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. |