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_6991da5d4e9bc" data-uid="6991da5d4e9bc">
<li id="6991da5d4e9bc-5783338151253258907-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_6991da5d4e9bc-5783338151253258907-0__label" data-uid="6991da5d4ec54">
<!-- 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="6991da5d4ecf1">
<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="6991da5d4ed36">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d4f346">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d4ed99" data-uid="6991da5d4ed99">
<li id="6991da5d4ed99-2553657774083672917-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_6991da5d4ed99-2553657774083672917-0__label" data-uid="6991da5d4ee70">
<!-- 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="6991da5d4eec4">
<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="6991da5d4eeff">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d4f268">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d4ef4c" data-uid="6991da5d4ef4c">
<li id="6991da5d4ef4c-6662507716394515612-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_6991da5d4ef4c-6662507716394515612-0__label" data-uid="6991da5d4f005">
<!-- 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="6991da5d4f056">
<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="6991da5d4f099">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4ef4c-4037543939213436768-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_6991da5d4ef4c-4037543939213436768-1__label" data-uid="6991da5d4f149">
<!-- 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="6991da5d4f197">
<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="6991da5d4f1d8">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4ed99-7427094261579603413-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_6991da5d4ed99-7427094261579603413-1__label" data-uid="6991da5d4f30a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4e9bc-7007967841378161536-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_6991da5d4e9bc-7007967841378161536-1__label" data-uid="6991da5d4f3dc">
<!-- 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="6991da5d4f42a">
<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="6991da5d4f461">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4e9bc-7331062832162749907-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_6991da5d4e9bc-7331062832162749907-2__label" data-uid="6991da5d4f50d">
<!-- 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="6991da5d4f55a">
<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="6991da5d4f591">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4e9bc-9123832796060487763-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_6991da5d4e9bc-9123832796060487763-3__label" data-uid="6991da5d4f642">
<!-- 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="6991da5d4f692">
<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="6991da5d4f6c9">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d4f9ac">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d4f712" data-uid="6991da5d4f712">
<li id="6991da5d4f712-3604259090152197971-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_6991da5d4f712-3604259090152197971-0__label" data-uid="6991da5d4f7c6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d4f712-4727596939558181477-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_6991da5d4f712-4727596939558181477-1__label" data-uid="6991da5d4f852">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d4f712-198195300830931656-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_6991da5d4f712-198195300830931656-2__label" data-uid="6991da5d4f8db">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d4f712-474364153494402987-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_6991da5d4f712-474364153494402987-3__label" data-uid="6991da5d4f961">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4e9bc-6428265996712909596-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_6991da5d4e9bc-6428265996712909596-4__label" data-uid="6991da5d4fa24">
<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_6991da5d4faef" data-uid="6991da5d4faef">
<li id="6991da5d4faef-3016409180678593771-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_6991da5d4faef-3016409180678593771-0__label" data-uid="6991da5d4fbc3">
<!-- 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="6991da5d4fc21">
<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="6991da5d4fc59">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d50218">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d4fca4" data-uid="6991da5d4fca4">
<li id="6991da5d4fca4-7687208005132627535-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_6991da5d4fca4-7687208005132627535-0__label" data-uid="6991da5d4fd58">
<!-- 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="6991da5d4fdc8">
<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="6991da5d4fe04">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d50137">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d4fe6f" data-uid="6991da5d4fe6f">
<li id="6991da5d4fe6f-5002527843053044499-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_6991da5d4fe6f-5002527843053044499-0__label" data-uid="6991da5d4ff33">
<!-- 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="6991da5d4ff81">
<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="6991da5d4ffb8">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4fe6f-2831225663618515306-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_6991da5d4fe6f-2831225663618515306-1__label" data-uid="6991da5d50062">
<!-- 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="6991da5d500ae">
<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="6991da5d500e4">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4fca4-603797715403857219-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_6991da5d4fca4-603797715403857219-1__label" data-uid="6991da5d501ce">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4faef-584413405486555065-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_6991da5d4faef-584413405486555065-1__label" data-uid="6991da5d502b8">
<!-- 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="6991da5d50306">
<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="6991da5d5033c">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4faef-5393203033527018037-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_6991da5d4faef-5393203033527018037-2__label" data-uid="6991da5d503e6">
<!-- 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="6991da5d50435">
<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="6991da5d5046b">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d4faef-7518369534160744558-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_6991da5d4faef-7518369534160744558-3__label" data-uid="6991da5d5052f">
<!-- 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="6991da5d5058a">
<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="6991da5d505c4">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d508c6">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d50612" data-uid="6991da5d50612">
<li id="6991da5d50612-6409076596489762624-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_6991da5d50612-6409076596489762624-0__label" data-uid="6991da5d506d1">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d50612-9167600087040435907-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_6991da5d50612-9167600087040435907-1__label" data-uid="6991da5d50767">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d50612-6750221357258632153-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_6991da5d50612-6750221357258632153-2__label" data-uid="6991da5d507f9">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d50612-8151211492882730783-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_6991da5d50612-8151211492882730783-3__label" data-uid="6991da5d5088c">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d4faef-6373034680852806272-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_6991da5d4faef-6373034680852806272-4__label" data-uid="6991da5d50939">
<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_6991da5d509e9" data-uid="6991da5d509e9">
<li id="6991da5d509e9-522277540310242848-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_6991da5d509e9-522277540310242848-0__label" data-uid="6991da5d50aad">
<!-- 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="6991da5d50afc">
<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="6991da5d50b34">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d5105f">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d50b82" data-uid="6991da5d50b82">
<li id="6991da5d50b82-6083754976157511091-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_6991da5d50b82-6083754976157511091-0__label" data-uid="6991da5d50c36">
<!-- 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="6991da5d50c84">
<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="6991da5d50cba">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d50fa2">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d50d12" data-uid="6991da5d50d12">
<li id="6991da5d50d12-3648418968025812281-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_6991da5d50d12-3648418968025812281-0__label" data-uid="6991da5d50db9">
<!-- 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="6991da5d50e02">
<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="6991da5d50e36">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d50d12-5502651718058727531-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_6991da5d50d12-5502651718058727531-1__label" data-uid="6991da5d50ed6">
<!-- 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="6991da5d50f20">
<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="6991da5d50f53">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d50b82-6587679602052537375-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_6991da5d50b82-6587679602052537375-1__label" data-uid="6991da5d51029">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d509e9-6310162630606053816-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_6991da5d509e9-6310162630606053816-1__label" data-uid="6991da5d510e7">
<!-- 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="6991da5d51138">
<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="6991da5d5116c">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d509e9-7251538615157229087-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_6991da5d509e9-7251538615157229087-2__label" data-uid="6991da5d5120c">
<!-- 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="6991da5d51254">
<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="6991da5d51289">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d509e9-5367992693583478338-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_6991da5d509e9-5367992693583478338-3__label" data-uid="6991da5d51326">
<!-- 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="6991da5d5136d">
<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="6991da5d5139f">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d51655">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d513ea" data-uid="6991da5d513ea">
<li id="6991da5d513ea-7113967610749936528-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_6991da5d513ea-7113967610749936528-0__label" data-uid="6991da5d51492">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d513ea-4224462932692659479-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_6991da5d513ea-4224462932692659479-1__label" data-uid="6991da5d51520">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d513ea-6119827605717126455-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_6991da5d513ea-6119827605717126455-2__label" data-uid="6991da5d515a0">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d513ea-7476617256383683722-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_6991da5d513ea-7476617256383683722-3__label" data-uid="6991da5d51621">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d509e9-5543034950788311890-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_6991da5d509e9-5543034950788311890-4__label" data-uid="6991da5d516b4">
<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_6991da5d5174f" data-uid="6991da5d5174f">
<li id="6991da5d5174f-8940005249575394642-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_6991da5d5174f-8940005249575394642-0__label" data-uid="6991da5d517ff">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="6991da5d5174f-4591912814226839942-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_6991da5d5174f-4591912814226839942-1__label" data-uid="6991da5d51895">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="6991da5d5174f-5549311655819601013-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_6991da5d5174f-5549311655819601013-2__label" data-uid="6991da5d51937">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="6991da5d5174f-3221978920658099884-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_6991da5d5174f-3221978920658099884-3__label" data-uid="6991da5d519c6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="6991da5d5174f-6961695468266182670-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_6991da5d5174f-6961695468266182670-4__label" data-uid="6991da5d51a54">
<!-- 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_6991da5d51acd" data-uid="6991da5d51acd">
<li id="6991da5d51acd-4046640448490345407-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_6991da5d51acd-4046640448490345407-0__label" data-uid="6991da5d51ba2">
<!-- 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="6991da5d51bf0">
<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="6991da5d51c25">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d52178">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d51c6b" data-uid="6991da5d51c6b">
<li id="6991da5d51c6b-1181321710836710861-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_6991da5d51c6b-1181321710836710861-0__label" data-uid="6991da5d51d65">
<!-- 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="6991da5d51daf">
<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="6991da5d51de3">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d520bc">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d51e28" data-uid="6991da5d51e28">
<li id="6991da5d51e28-6072330696090570703-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_6991da5d51e28-6072330696090570703-0__label" data-uid="6991da5d51ece">
<!-- 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="6991da5d51f16">
<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="6991da5d51f4a">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d51e28-6278259189056586507-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_6991da5d51e28-6278259189056586507-1__label" data-uid="6991da5d51fea">
<!-- 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="6991da5d52031">
<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="6991da5d52064">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d51c6b-8329811004083503518-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_6991da5d51c6b-8329811004083503518-1__label" data-uid="6991da5d52143">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d51acd-3307180693699693589-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_6991da5d51acd-3307180693699693589-1__label" data-uid="6991da5d52201">
<!-- 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="6991da5d5224a">
<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="6991da5d5227e">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d51acd-4021385763147035349-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_6991da5d51acd-4021385763147035349-2__label" data-uid="6991da5d5232e">
<!-- 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="6991da5d5237a">
<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="6991da5d523b0">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d51acd-7142629507937015444-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_6991da5d51acd-7142629507937015444-3__label" data-uid="6991da5d52457">
<!-- 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="6991da5d524ac">
<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="6991da5d524e2">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d5279c">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d5252a" data-uid="6991da5d5252a">
<li id="6991da5d5252a-4661282895872315985-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_6991da5d5252a-4661282895872315985-0__label" data-uid="6991da5d525e7">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d5252a-64851437890560731-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_6991da5d5252a-64851437890560731-1__label" data-uid="6991da5d5266b">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d5252a-3329886965009345582-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_6991da5d5252a-3329886965009345582-2__label" data-uid="6991da5d526eb">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d5252a-8972529227923869843-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_6991da5d5252a-8972529227923869843-3__label" data-uid="6991da5d52769">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d51acd-1247770638009525166-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_6991da5d51acd-1247770638009525166-4__label" data-uid="6991da5d527f9">
<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_6991da5d5285b" data-uid="6991da5d5285b">
<li id="6991da5d5285b-3019099128671277281-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_6991da5d5285b-3019099128671277281-0__label" data-uid="6991da5d52913">
<!-- 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="6991da5d5295b">
<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="6991da5d5298f">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d52eba">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d529d5" data-uid="6991da5d529d5">
<li id="6991da5d529d5-2802728608565622995-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_6991da5d529d5-2802728608565622995-0__label" data-uid="6991da5d52a7b">
<!-- 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="6991da5d52ac4">
<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="6991da5d52af8">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d52df5">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d52b3d" data-uid="6991da5d52b3d">
<li id="6991da5d52b3d-5886504382365440581-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_6991da5d52b3d-5886504382365440581-0__label" data-uid="6991da5d52be1">
<!-- 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="6991da5d52c29">
<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="6991da5d52c64">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d52b3d-6411402470961665134-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_6991da5d52b3d-6411402470961665134-1__label" data-uid="6991da5d52d1e">
<!-- 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="6991da5d52d6a">
<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="6991da5d52da0">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d529d5-902546989841138624-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_6991da5d529d5-902546989841138624-1__label" data-uid="6991da5d52e83">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d5285b-8864296156169305130-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_6991da5d5285b-8864296156169305130-1__label" data-uid="6991da5d52f4a">
<!-- 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="6991da5d52f98">
<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="6991da5d52fcf">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d5285b-2866559939439465410-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_6991da5d5285b-2866559939439465410-2__label" data-uid="6991da5d5309c">
<!-- 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="6991da5d530f8">
<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="6991da5d53139">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d5285b-6578077540636116785-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_6991da5d5285b-6578077540636116785-3__label" data-uid="6991da5d531d7">
<!-- 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="6991da5d5321f">
<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="6991da5d53251">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d534fe">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d5329a" data-uid="6991da5d5329a">
<li id="6991da5d5329a-2379461102128792904-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_6991da5d5329a-2379461102128792904-0__label" data-uid="6991da5d53342">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d5329a-3115757280498681723-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_6991da5d5329a-3115757280498681723-1__label" data-uid="6991da5d533c5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d5329a-1850948713267760259-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_6991da5d5329a-1850948713267760259-2__label" data-uid="6991da5d5344d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d5329a-1856453139430722167-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_6991da5d5329a-1856453139430722167-3__label" data-uid="6991da5d534cc">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d5285b-958284200420454021-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_6991da5d5285b-958284200420454021-4__label" data-uid="6991da5d5355d">
<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_6991da5d535c0" data-uid="6991da5d535c0">
<li id="6991da5d535c0-4945815603507554966-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_6991da5d535c0-4945815603507554966-0__label" data-uid="6991da5d53670">
<!-- 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="6991da5d536b9">
<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="6991da5d536ee">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d53c68">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d53734" data-uid="6991da5d53734">
<li id="6991da5d53734-2631934720298928528-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_6991da5d53734-2631934720298928528-0__label" data-uid="6991da5d537da">
<!-- 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="6991da5d53851">
<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="6991da5d53887">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d53b79">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d538ce" data-uid="6991da5d538ce">
<li id="6991da5d538ce-7033501875300407617-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_6991da5d538ce-7033501875300407617-0__label" data-uid="6991da5d53974">
<!-- 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="6991da5d539bd">
<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="6991da5d539f0">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d538ce-8187987048927618512-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_6991da5d538ce-8187987048927618512-1__label" data-uid="6991da5d53aa3">
<!-- 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="6991da5d53af0">
<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="6991da5d53b26">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</div>
</li>
<li id="6991da5d53734-2302000361265007865-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_6991da5d53734-2302000361265007865-1__label" data-uid="6991da5d53c24">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d535c0-8711793049960791324-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_6991da5d535c0-8711793049960791324-1__label" data-uid="6991da5d53cf0">
<!-- 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="6991da5d53d39">
<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="6991da5d53d6d">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d535c0-8219437123090062798-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_6991da5d535c0-8219437123090062798-2__label" data-uid="6991da5d53e0b">
<!-- 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="6991da5d53e53">
<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="6991da5d53e85">
</span>
</span>
</span> </button> </div>
</li>
<li id="6991da5d535c0-5415746064242093710-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_6991da5d535c0-5415746064242093710-3__label" data-uid="6991da5d53f23">
<!-- 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="6991da5d53f6a">
<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="6991da5d53f9c">
</span>
</span>
</span> </button> </div>
<!-- nav.blade.php -->
<div class="c-element c-nav__child-container" data-uid="6991da5d5425c">
<ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6991da5d53fe8" data-uid="6991da5d53fe8">
<li id="6991da5d53fe8-2325000260425716958-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_6991da5d53fe8-2325000260425716958-0__label" data-uid="6991da5d54091">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="6991da5d53fe8-4007790096398944624-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_6991da5d53fe8-4007790096398944624-1__label" data-uid="6991da5d54115">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="6991da5d53fe8-706878983021305686-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_6991da5d53fe8-706878983021305686-2__label" data-uid="6991da5d54195">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="6991da5d53fe8-697063315205642074-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_6991da5d53fe8-697063315205642074-3__label" data-uid="6991da5d54226">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li id="6991da5d535c0-5074634059595489742-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_6991da5d535c0-5074634059595489742-4__label" data-uid="6991da5d542c2">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul> </div>
<div style="height: 100px;"></div><!-- Padder --><div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'sm'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'md'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'lg'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->Blade component parameters
| Key | Default value | Type | Available values | Description |
| items | [] | array | - | An nested array of items containing: id, label, active, ancestor, children(bool = async loading, or array), href, style, class, and color (which overrides the color settings). Attribute list may also contain 'data-fetch-url' to enable asyncrounous fetching. |
| direction | vertical | string | - | Modifier for basic direction. Accept values: 'vertical', 'horizontal.' |
| includeToggle | false | boolean | - | Tells wheter to include toggle button to expand childs or not. Accept values: true, false. |
| isExtendedDropdown | false | boolean | - | If true, the nav will be presented as an extended dropdown menu. Should only be used for top level horizontal navs. |
| allowStyle | true | boolean | - | Allow the use of style parameter in this menu (item.style = 'button') |
| buttonStyle | filled | string | - | If the nav is presenting buttons, what style they should be in. |
| buttonColor | primary | string | - | If the nav is presenting buttons, what color they should be in. |
| expandLabel | Expand | string | - | Prefix for labels on expand arrow. Will result in Expand: Link label, or if label is missing, just Expand. |
| height | string | - | The default height of the menu (only supports horizontal navigation). Values: sm, md, lg. | |
| compressed | false | boolean | - | Makes the spacing between items smaller and the overall navigation more compressed. |
| expandIcon | expand_more | string | - | The icon to use for the expand button. Accepts any icon name from the icon library or svg. |
| indentSubLevels | false | boolean | - | If true, sublevels will be indented. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |