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="678b06d77d0bf" data-uid="678b06d77d0bf">
<li id="678b06d77d0bf-1368596590315823966-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="678b06d77d0bf-1368596590315823966-0__label" href="#" target="_top" id="678b06d77d0bf-1368596590315823966-0__label" data-uid="678b06d77d2c7">
<!-- 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="678b06d77d355">
<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="678b06d77d398">
</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="678b06d77d3f0" data-uid="678b06d77d3f0">
<li id="678b06d77d3f0-3432838513818131353-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="678b06d77d3f0-3432838513818131353-0__label" href="#" target="_top" id="678b06d77d3f0-3432838513818131353-0__label" data-uid="678b06d77d493">
<!-- 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="678b06d77d4da">
<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="678b06d77d50f">
</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="678b06d77d553" data-uid="678b06d77d553">
<li id="678b06d77d553-2002675267213482340-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="678b06d77d553-2002675267213482340-0__label" href="#" target="_top" id="678b06d77d553-2002675267213482340-0__label" data-uid="678b06d77d5e2">
<!-- 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="678b06d77d627">
<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="678b06d77d65a">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77d553-6308319104370108164-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="678b06d77d553-6308319104370108164-1__label" href="#" target="_top" id="678b06d77d553-6308319104370108164-1__label" data-uid="678b06d77d6f3">
<!-- 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="678b06d77d73e">
<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="678b06d77d770">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="678b06d77d3f0-3101603324805670470-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="678b06d77d3f0-3101603324805670470-1__label" href="#" target="_top" id="678b06d77d3f0-3101603324805670470-1__label" data-uid="678b06d77d80d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77d0bf-427656055460245424-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="678b06d77d0bf-427656055460245424-1__label" href="#" target="_top" id="678b06d77d0bf-427656055460245424-1__label" data-uid="678b06d77d893">
<!-- 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="678b06d77d8d5">
<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="678b06d77d906">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77d0bf-9126941951316996797-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="678b06d77d0bf-9126941951316996797-2__label" href="#" target="_top" id="678b06d77d0bf-9126941951316996797-2__label" data-uid="678b06d77d99a">
<!-- 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="678b06d77d9dc">
<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="678b06d77da0d">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77d0bf-7821116722267494089-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="678b06d77d0bf-7821116722267494089-3__label" href="#" target="_top" id="678b06d77d0bf-7821116722267494089-3__label" data-uid="678b06d77daa3">
<!-- 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="678b06d77dae5">
<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="678b06d77db1e">
</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="678b06d77db5f" data-uid="678b06d77db5f">
<li id="678b06d77db5f-2426571264326602700-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="678b06d77db5f-2426571264326602700-0__label" href="#" target="_top" id="678b06d77db5f-2426571264326602700-0__label" data-uid="678b06d77dbed">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="678b06d77db5f-550144649651959516-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="678b06d77db5f-550144649651959516-1__label" href="#" target="_top" id="678b06d77db5f-550144649651959516-1__label" data-uid="678b06d77dc7f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="678b06d77db5f-1153984088350132971-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="678b06d77db5f-1153984088350132971-2__label" href="#" target="_top" id="678b06d77db5f-1153984088350132971-2__label" data-uid="678b06d77dcff">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="678b06d77db5f-8954037187455274045-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="678b06d77db5f-8954037187455274045-3__label" href="#" target="_top" id="678b06d77db5f-8954037187455274045-3__label" data-uid="678b06d77dd7f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77d0bf-6927854565763224490-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="678b06d77d0bf - 6927854565763224490-4__label" data-uid="678b06d77ddef">
<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="678b06d77de8d" data-uid="678b06d77de8d">
<li id="678b06d77de8d-5888717471881521940-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="678b06d77de8d-5888717471881521940-0__label" href="#" target="_top" id="678b06d77de8d-5888717471881521940-0__label" data-uid="678b06d77df47">
<!-- 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="678b06d77e018">
<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="678b06d77e058">
</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="678b06d77e0a5" data-uid="678b06d77e0a5">
<li id="678b06d77e0a5-5378444186623521587-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="678b06d77e0a5-5378444186623521587-0__label" href="#" target="_top" id="678b06d77e0a5-5378444186623521587-0__label" data-uid="678b06d77e146">
<!-- 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="678b06d77e190">
<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="678b06d77e1c9">
</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="678b06d77e20f" data-uid="678b06d77e20f">
<li id="678b06d77e20f-5282427838585402772-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="678b06d77e20f-5282427838585402772-0__label" href="#" target="_top" id="678b06d77e20f-5282427838585402772-0__label" data-uid="678b06d77e2a4">
<!-- 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="678b06d77e2f8">
<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="678b06d77e32f">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77e20f-7028707360870302984-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="678b06d77e20f-7028707360870302984-1__label" href="#" target="_top" id="678b06d77e20f-7028707360870302984-1__label" data-uid="678b06d77e3d1">
<!-- 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="678b06d77e418">
<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="678b06d77e44b">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="678b06d77e0a5-2025093629725540416-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="678b06d77e0a5-2025093629725540416-1__label" href="#" target="_top" id="678b06d77e0a5-2025093629725540416-1__label" data-uid="678b06d77e4ee">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77de8d-4910969025072750527-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="678b06d77de8d-4910969025072750527-1__label" href="#" target="_top" id="678b06d77de8d-4910969025072750527-1__label" data-uid="678b06d77e57d">
<!-- 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="678b06d77e5c3">
<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="678b06d77e5f8">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77de8d-4644643828395464428-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="678b06d77de8d-4644643828395464428-2__label" href="#" target="_top" id="678b06d77de8d-4644643828395464428-2__label" data-uid="678b06d77e696">
<!-- 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="678b06d77e6e7">
<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="678b06d77e71c">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77de8d-5169083405705640358-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="678b06d77de8d-5169083405705640358-3__label" href="#" target="_top" id="678b06d77de8d-5169083405705640358-3__label" data-uid="678b06d77e7b8">
<!-- 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="678b06d77e7fe">
<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="678b06d77e831">
</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="678b06d77e875" data-uid="678b06d77e875">
<li id="678b06d77e875-1055589645826746374-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="678b06d77e875-1055589645826746374-0__label" href="#" target="_top" id="678b06d77e875-1055589645826746374-0__label" data-uid="678b06d77e90e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="678b06d77e875-1088549970524710088-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="678b06d77e875-1088549970524710088-1__label" href="#" target="_top" id="678b06d77e875-1088549970524710088-1__label" data-uid="678b06d77e992">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="678b06d77e875-5407126673515640928-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="678b06d77e875-5407126673515640928-2__label" href="#" target="_top" id="678b06d77e875-5407126673515640928-2__label" data-uid="678b06d77ea12">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="678b06d77e875-6092539682448130665-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="678b06d77e875-6092539682448130665-3__label" href="#" target="_top" id="678b06d77e875-6092539682448130665-3__label" data-uid="678b06d77ea91">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77de8d-8971023829807800792-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="678b06d77de8d - 8971023829807800792-4__label" data-uid="678b06d77eafc">
<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'
])
@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="678b06d77eb93" data-uid="678b06d77eb93">
<li id="678b06d77eb93-3287128096738670773-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="678b06d77eb93-3287128096738670773-0__label" href="#" target="_top" id="678b06d77eb93-3287128096738670773-0__label" data-uid="678b06d77ec4c">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="678b06d77eb93-8162249837604132222-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="678b06d77eb93-8162249837604132222-1__label" href="#" target="_top" id="678b06d77eb93-8162249837604132222-1__label" data-uid="678b06d77ece8">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="678b06d77eb93-7569188479204654221-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="678b06d77eb93-7569188479204654221-2__label" href="#" target="_top" id="678b06d77eb93-7569188479204654221-2__label" data-uid="678b06d77ed70">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="678b06d77eb93-4239378988860125799-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="678b06d77eb93-4239378988860125799-3__label" href="#" target="_top" id="678b06d77eb93-4239378988860125799-3__label" data-uid="678b06d77edf5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="678b06d77eb93-7811951019432614115-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="678b06d77eb93-7811951019432614115-4__label" href="#" target="_top" id="678b06d77eb93-7811951019432614115-4__label" data-uid="678b06d77ee8d">
<!-- 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="678b06d77ef12" data-uid="678b06d77ef12">
<li id="678b06d77ef12-7331424370460114011-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="678b06d77ef12-7331424370460114011-0__label" href="#" target="_top" id="678b06d77ef12-7331424370460114011-0__label" data-uid="678b06d77efb5">
<!-- 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="678b06d77effe">
<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="678b06d77f034">
</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="678b06d77f07a" data-uid="678b06d77f07a">
<li id="678b06d77f07a-1603997609905476448-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="678b06d77f07a-1603997609905476448-0__label" href="#" target="_top" id="678b06d77f07a-1603997609905476448-0__label" data-uid="678b06d77f112">
<!-- 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="678b06d77f15a">
<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="678b06d77f18f">
</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="678b06d77f1d5" data-uid="678b06d77f1d5">
<li id="678b06d77f1d5-3525737738429579951-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="678b06d77f1d5-3525737738429579951-0__label" href="#" target="_top" id="678b06d77f1d5-3525737738429579951-0__label" data-uid="678b06d77f26b">
<!-- 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="678b06d77f2bf">
<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="678b06d77f2f4">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77f1d5-6443070629256536140-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="678b06d77f1d5-6443070629256536140-1__label" href="#" target="_top" id="678b06d77f1d5-6443070629256536140-1__label" data-uid="678b06d77f395">
<!-- 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="678b06d77f3db">
<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="678b06d77f40f">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="678b06d77f07a-1737224032825561373-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="678b06d77f07a-1737224032825561373-1__label" href="#" target="_top" id="678b06d77f07a-1737224032825561373-1__label" data-uid="678b06d77f4b1">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77ef12-7234861779213009299-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="678b06d77ef12-7234861779213009299-1__label" href="#" target="_top" id="678b06d77ef12-7234861779213009299-1__label" data-uid="678b06d77f53d">
<!-- 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="678b06d77f583">
<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="678b06d77f5ba">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77ef12-1376499001250521931-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="678b06d77ef12-1376499001250521931-2__label" href="#" target="_top" id="678b06d77ef12-1376499001250521931-2__label" data-uid="678b06d77f656">
<!-- 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="678b06d77f6a5">
<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="678b06d77f6d8">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77ef12-1457800891400416213-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="678b06d77ef12-1457800891400416213-3__label" href="#" target="_top" id="678b06d77ef12-1457800891400416213-3__label" data-uid="678b06d77f77a">
<!-- 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="678b06d77f7be">
<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="678b06d77f7f2">
</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="678b06d77f835" data-uid="678b06d77f835">
<li id="678b06d77f835-4490700519942775127-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="678b06d77f835-4490700519942775127-0__label" href="#" target="_top" id="678b06d77f835-4490700519942775127-0__label" data-uid="678b06d77f8cc">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="678b06d77f835-7453329888448674493-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="678b06d77f835-7453329888448674493-1__label" href="#" target="_top" id="678b06d77f835-7453329888448674493-1__label" data-uid="678b06d77f952">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="678b06d77f835-6599952522240301215-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="678b06d77f835-6599952522240301215-2__label" href="#" target="_top" id="678b06d77f835-6599952522240301215-2__label" data-uid="678b06d77f9d3">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="678b06d77f835-4991683254626168267-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="678b06d77f835-4991683254626168267-3__label" href="#" target="_top" id="678b06d77f835-4991683254626168267-3__label" data-uid="678b06d77fa59">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77ef12-7963437428076342097-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="678b06d77ef12 - 7963437428076342097-4__label" data-uid="678b06d77fab9">
<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="678b06d77fb14" data-uid="678b06d77fb14">
<li id="678b06d77fb14-3465404302197040298-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="678b06d77fb14-3465404302197040298-0__label" href="#" target="_top" id="678b06d77fb14-3465404302197040298-0__label" data-uid="678b06d77fbb3">
<!-- 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="678b06d77fbfa">
<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="678b06d77fc2f">
</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="678b06d77fc74" data-uid="678b06d77fc74">
<li id="678b06d77fc74-8222060590408815197-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="678b06d77fc74-8222060590408815197-0__label" href="#" target="_top" id="678b06d77fc74-8222060590408815197-0__label" data-uid="678b06d77fd13">
<!-- 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="678b06d77fd56">
<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="678b06d77fd88">
</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="678b06d77fdc9" data-uid="678b06d77fdc9">
<li id="678b06d77fdc9-7171239166541191763-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="678b06d77fdc9-7171239166541191763-0__label" href="#" target="_top" id="678b06d77fdc9-7171239166541191763-0__label" data-uid="678b06d77fe5b">
<!-- 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="678b06d77fe9e">
<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="678b06d77fed1">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77fdc9-3307358537050163005-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="678b06d77fdc9-3307358537050163005-1__label" href="#" target="_top" id="678b06d77fdc9-3307358537050163005-1__label" data-uid="678b06d77ff65">
<!-- 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="678b06d77ffa6">
<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="678b06d77ffd6">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="678b06d77fc74-2695329903452543899-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="678b06d77fc74-2695329903452543899-1__label" href="#" target="_top" id="678b06d77fc74-2695329903452543899-1__label" data-uid="678b06d78006e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77fb14-238664686073762864-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="678b06d77fb14-238664686073762864-1__label" href="#" target="_top" id="678b06d77fb14-238664686073762864-1__label" data-uid="678b06d7800f0">
<!-- 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="678b06d780132">
<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="678b06d780163">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77fb14-5400148822146635930-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="678b06d77fb14-5400148822146635930-2__label" href="#" target="_top" id="678b06d77fb14-5400148822146635930-2__label" data-uid="678b06d7801f6">
<!-- 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="678b06d78023f">
<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="678b06d780270">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d77fb14-1827108214599673721-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="678b06d77fb14-1827108214599673721-3__label" href="#" target="_top" id="678b06d77fb14-1827108214599673721-3__label" data-uid="678b06d780302">
<!-- 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="678b06d780345">
<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="678b06d780375">
</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="678b06d7803b5" data-uid="678b06d7803b5">
<li id="678b06d7803b5-1073488202459082758-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="678b06d7803b5-1073488202459082758-0__label" href="#" target="_top" id="678b06d7803b5-1073488202459082758-0__label" data-uid="678b06d780442">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="678b06d7803b5-4960217961985029269-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="678b06d7803b5-4960217961985029269-1__label" href="#" target="_top" id="678b06d7803b5-4960217961985029269-1__label" data-uid="678b06d7804be">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="678b06d7803b5-7741169123611893837-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="678b06d7803b5-7741169123611893837-2__label" href="#" target="_top" id="678b06d7803b5-7741169123611893837-2__label" data-uid="678b06d780536">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="678b06d7803b5-5966282031819131867-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="678b06d7803b5-5966282031819131867-3__label" href="#" target="_top" id="678b06d7803b5-5966282031819131867-3__label" data-uid="678b06d7805ac">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d77fb14-5059123176679575701-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="678b06d77fb14 - 5059123176679575701-4__label" data-uid="678b06d78060e">
<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="678b06d78067b" data-uid="678b06d78067b">
<li id="678b06d78067b-2394577802399927184-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="678b06d78067b-2394577802399927184-0__label" href="#" target="_top" id="678b06d78067b-2394577802399927184-0__label" data-uid="678b06d780719">
<!-- 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="678b06d780760">
<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="678b06d780795">
</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="678b06d7807d9" data-uid="678b06d7807d9">
<li id="678b06d7807d9-2839060840720357927-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="678b06d7807d9-2839060840720357927-0__label" href="#" target="_top" id="678b06d7807d9-2839060840720357927-0__label" data-uid="678b06d78086d">
<!-- 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="678b06d7808b4">
<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="678b06d7808e8">
</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="678b06d780936" data-uid="678b06d780936">
<li id="678b06d780936-7435562044978951246-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="678b06d780936-7435562044978951246-0__label" href="#" target="_top" id="678b06d780936-7435562044978951246-0__label" data-uid="678b06d7809c9">
<!-- 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="678b06d780a1e">
<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="678b06d780a53">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d780936-2870028325803754410-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="678b06d780936-2870028325803754410-1__label" href="#" target="_top" id="678b06d780936-2870028325803754410-1__label" data-uid="678b06d780c8d">
<!-- 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="678b06d780cd4">
<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="678b06d780d09">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="678b06d7807d9-2431497951551153263-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="678b06d7807d9-2431497951551153263-1__label" href="#" target="_top" id="678b06d7807d9-2431497951551153263-1__label" data-uid="678b06d780e63">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d78067b-2709333561624666451-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="678b06d78067b-2709333561624666451-1__label" href="#" target="_top" id="678b06d78067b-2709333561624666451-1__label" data-uid="678b06d780f4e">
<!-- 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="678b06d780fb1">
<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="678b06d780fed">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d78067b-6632519827637602651-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="678b06d78067b-6632519827637602651-2__label" href="#" target="_top" id="678b06d78067b-6632519827637602651-2__label" data-uid="678b06d781098">
<!-- 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="678b06d7810e1">
<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="678b06d781118">
</span>
</span>
</span> </button> </div>
</li>
<li id="678b06d78067b-1950140200386335843-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="678b06d78067b-1950140200386335843-3__label" href="#" target="_top" id="678b06d78067b-1950140200386335843-3__label" data-uid="678b06d7811db">
<!-- 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="678b06d78122a">
<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="678b06d781260">
</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="678b06d7812a9" data-uid="678b06d7812a9">
<li id="678b06d7812a9-66357905126864543-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="678b06d7812a9-66357905126864543-0__label" href="#" target="_top" id="678b06d7812a9-66357905126864543-0__label" data-uid="678b06d781347">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="678b06d7812a9-9118917663831069233-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="678b06d7812a9-9118917663831069233-1__label" href="#" target="_top" id="678b06d7812a9-9118917663831069233-1__label" data-uid="678b06d7813ce">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="678b06d7812a9-6537450480288290012-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="678b06d7812a9-6537450480288290012-2__label" href="#" target="_top" id="678b06d7812a9-6537450480288290012-2__label" data-uid="678b06d781451">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="678b06d7812a9-8307386550165789669-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="678b06d7812a9-8307386550165789669-3__label" href="#" target="_top" id="678b06d7812a9-8307386550165789669-3__label" data-uid="678b06d7814d4">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="678b06d78067b-5978909130431981727-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="678b06d78067b - 5978909130431981727-4__label" data-uid="678b06d781533">
<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. |