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="673ed16d8c1a4" data-uid="673ed16d8c1a4">
<li id="673ed16d8c1a4-267009064007590206-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="673ed16d8c1a4-267009064007590206-0__label" href="#" target="_top" id="673ed16d8c1a4-267009064007590206-0__label" data-uid="673ed16d8c32f">
<!-- 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="673ed16d8c3a2">
<span class="c-button__label">
<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="673ed16d8c3dd">
</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="673ed16d8c42c" data-uid="673ed16d8c42c">
<li id="673ed16d8c42c-542598452945028235-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="673ed16d8c42c-542598452945028235-0__label" href="#" target="_top" id="673ed16d8c42c-542598452945028235-0__label" data-uid="673ed16d8c4bc">
<!-- 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="673ed16d8c4fc">
<span class="c-button__label">
<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="673ed16d8c52c">
</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="673ed16d8c570" data-uid="673ed16d8c570">
<li id="673ed16d8c570-2416377743061644495-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="673ed16d8c570-2416377743061644495-0__label" href="#" target="_top" id="673ed16d8c570-2416377743061644495-0__label" data-uid="673ed16d8c60e">
<!-- 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="673ed16d8c661">
<span class="c-button__label">
<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="673ed16d8c690">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8c570-3208393634823027042-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="673ed16d8c570-3208393634823027042-1__label" href="#" target="_top" id="673ed16d8c570-3208393634823027042-1__label" data-uid="673ed16d8c718">
<!-- 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="673ed16d8c774">
<span class="c-button__label">
<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="673ed16d8c7a1">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="673ed16d8c42c-9039215699437204294-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="673ed16d8c42c-9039215699437204294-1__label" href="#" target="_top" id="673ed16d8c42c-9039215699437204294-1__label" data-uid="673ed16d8c84b">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8c1a4-4549920893824052933-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="673ed16d8c1a4-4549920893824052933-1__label" href="#" target="_top" id="673ed16d8c1a4-4549920893824052933-1__label" data-uid="673ed16d8c8d2">
<!-- 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="673ed16d8c916">
<span class="c-button__label">
<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="673ed16d8c948">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8c1a4-7519615886785296647-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="673ed16d8c1a4-7519615886785296647-2__label" href="#" target="_top" id="673ed16d8c1a4-7519615886785296647-2__label" data-uid="673ed16d8c9e5">
<!-- 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="673ed16d8ca28">
<span class="c-button__label">
<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="673ed16d8ca59">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8c1a4-6034727499002324940-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="673ed16d8c1a4-6034727499002324940-3__label" href="#" target="_top" id="673ed16d8c1a4-6034727499002324940-3__label" data-uid="673ed16d8caed">
<!-- 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="673ed16d8cb30">
<span class="c-button__label">
<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="673ed16d8cb72">
</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="673ed16d8cbae" data-uid="673ed16d8cbae">
<li id="673ed16d8cbae-1131440287812257127-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="673ed16d8cbae-1131440287812257127-0__label" href="#" target="_top" id="673ed16d8cbae-1131440287812257127-0__label" data-uid="673ed16d8cc2f">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="673ed16d8cbae-4808299405957115527-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="673ed16d8cbae-4808299405957115527-1__label" href="#" target="_top" id="673ed16d8cbae-4808299405957115527-1__label" data-uid="673ed16d8cc9e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="673ed16d8cbae-7234984136724232794-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="673ed16d8cbae-7234984136724232794-2__label" href="#" target="_top" id="673ed16d8cbae-7234984136724232794-2__label" data-uid="673ed16d8cd0b">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="673ed16d8cbae-3491362373941490916-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="673ed16d8cbae-3491362373941490916-3__label" href="#" target="_top" id="673ed16d8cbae-3491362373941490916-3__label" data-uid="673ed16d8cd8d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8c1a4-2872592171599774752-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="673ed16d8c1a4 - 2872592171599774752-4__label" data-uid="673ed16d8cde9">
<span class="c-button__label">
<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="673ed16d8d042" data-uid="673ed16d8d042">
<li id="673ed16d8d042-8306993513788381092-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="673ed16d8d042-8306993513788381092-0__label" href="#" target="_top" id="673ed16d8d042-8306993513788381092-0__label" data-uid="673ed16d8d0d9">
<!-- 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="673ed16d8d119">
<span class="c-button__label">
<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="673ed16d8d155">
</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="673ed16d8d1b2" data-uid="673ed16d8d1b2">
<li id="673ed16d8d1b2-193369595900347942-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="673ed16d8d1b2-193369595900347942-0__label" href="#" target="_top" id="673ed16d8d1b2-193369595900347942-0__label" data-uid="673ed16d8d237">
<!-- 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="673ed16d8d274">
<span class="c-button__label">
<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="673ed16d8d2a1">
</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="673ed16d8d2f1" data-uid="673ed16d8d2f1">
<li id="673ed16d8d2f1-7791340304842171037-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="673ed16d8d2f1-7791340304842171037-0__label" href="#" target="_top" id="673ed16d8d2f1-7791340304842171037-0__label" data-uid="673ed16d8d37e">
<!-- 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="673ed16d8d3c1">
<span class="c-button__label">
<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="673ed16d8d3f2">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8d2f1-3338415447342896441-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="673ed16d8d2f1-3338415447342896441-1__label" href="#" target="_top" id="673ed16d8d2f1-3338415447342896441-1__label" data-uid="673ed16d8d488">
<!-- 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="673ed16d8d4ca">
<span class="c-button__label">
<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="673ed16d8d4fa">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="673ed16d8d1b2-6010388081171520125-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="673ed16d8d1b2-6010388081171520125-1__label" href="#" target="_top" id="673ed16d8d1b2-6010388081171520125-1__label" data-uid="673ed16d8d5be">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8d042-4403708926038597124-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="673ed16d8d042-4403708926038597124-1__label" href="#" target="_top" id="673ed16d8d042-4403708926038597124-1__label" data-uid="673ed16d8d64d">
<!-- 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="673ed16d8d689">
<span class="c-button__label">
<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="673ed16d8d6b5">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8d042-8983273234083290440-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="673ed16d8d042-8983273234083290440-2__label" href="#" target="_top" id="673ed16d8d042-8983273234083290440-2__label" data-uid="673ed16d8d74f">
<!-- 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="673ed16d8d7c3">
<span class="c-button__label">
<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="673ed16d8d80f">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8d042-8795810074396845387-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="673ed16d8d042-8795810074396845387-3__label" href="#" target="_top" id="673ed16d8d042-8795810074396845387-3__label" data-uid="673ed16d8d901">
<!-- 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="673ed16d8d979">
<span class="c-button__label">
<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="673ed16d8d9b0">
</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="673ed16d8d9f6" data-uid="673ed16d8d9f6">
<li id="673ed16d8d9f6-965227149569863851-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="673ed16d8d9f6-965227149569863851-0__label" href="#" target="_top" id="673ed16d8d9f6-965227149569863851-0__label" data-uid="673ed16d8da8d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="673ed16d8d9f6-365479599433848115-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="673ed16d8d9f6-365479599433848115-1__label" href="#" target="_top" id="673ed16d8d9f6-365479599433848115-1__label" data-uid="673ed16d8db0d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="673ed16d8d9f6-5305803673583943768-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="673ed16d8d9f6-5305803673583943768-2__label" href="#" target="_top" id="673ed16d8d9f6-5305803673583943768-2__label" data-uid="673ed16d8db8a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="673ed16d8d9f6-6977243377519603052-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="673ed16d8d9f6-6977243377519603052-3__label" href="#" target="_top" id="673ed16d8d9f6-6977243377519603052-3__label" data-uid="673ed16d8dc05">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8d042-1625482510136867853-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="673ed16d8d042 - 1625482510136867853-4__label" data-uid="673ed16d8dc61">
<span class="c-button__label">
<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="673ed16d8df07" data-uid="673ed16d8df07">
<li id="673ed16d8df07-7757497475767840972-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="673ed16d8df07-7757497475767840972-0__label" href="#" target="_top" id="673ed16d8df07-7757497475767840972-0__label" data-uid="673ed16d8dfab">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="673ed16d8df07-3668092292701146290-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="673ed16d8df07-3668092292701146290-1__label" href="#" target="_top" id="673ed16d8df07-3668092292701146290-1__label" data-uid="673ed16d8e04c">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="673ed16d8df07-6770833870533093189-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="673ed16d8df07-6770833870533093189-2__label" href="#" target="_top" id="673ed16d8df07-6770833870533093189-2__label" data-uid="673ed16d8e0e0">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="673ed16d8df07-135105312061117875-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="673ed16d8df07-135105312061117875-3__label" href="#" target="_top" id="673ed16d8df07-135105312061117875-3__label" data-uid="673ed16d8e169">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="673ed16d8df07-3314516497344772630-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="673ed16d8df07-3314516497344772630-4__label" href="#" target="_top" id="673ed16d8df07-3314516497344772630-4__label" data-uid="673ed16d8e1ef">
<!-- 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="673ed16d8e485" data-uid="673ed16d8e485">
<li id="673ed16d8e485-4434952427751565474-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="673ed16d8e485-4434952427751565474-0__label" href="#" target="_top" id="673ed16d8e485-4434952427751565474-0__label" data-uid="673ed16d8e536">
<!-- 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="673ed16d8e57d">
<span class="c-button__label">
<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="673ed16d8e5b0">
</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="673ed16d8e5f4" data-uid="673ed16d8e5f4">
<li id="673ed16d8e5f4-4023776856009295022-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="673ed16d8e5f4-4023776856009295022-0__label" href="#" target="_top" id="673ed16d8e5f4-4023776856009295022-0__label" data-uid="673ed16d8e685">
<!-- 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="673ed16d8e6c9">
<span class="c-button__label">
<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="673ed16d8e6fb">
</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="673ed16d8e73d" data-uid="673ed16d8e73d">
<li id="673ed16d8e73d-1278285839704204012-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="673ed16d8e73d-1278285839704204012-0__label" href="#" target="_top" id="673ed16d8e73d-1278285839704204012-0__label" data-uid="673ed16d8e7ca">
<!-- 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="673ed16d8e824">
<span class="c-button__label">
<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="673ed16d8e852">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8e73d-7895334117941946295-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="673ed16d8e73d-7895334117941946295-1__label" href="#" target="_top" id="673ed16d8e73d-7895334117941946295-1__label" data-uid="673ed16d8e8ff">
<!-- 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="673ed16d8e942">
<span class="c-button__label">
<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="673ed16d8e975">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="673ed16d8e5f4-5291301148815022226-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="673ed16d8e5f4-5291301148815022226-1__label" href="#" target="_top" id="673ed16d8e5f4-5291301148815022226-1__label" data-uid="673ed16d8ea10">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8e485-1934852075229028148-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="673ed16d8e485-1934852075229028148-1__label" href="#" target="_top" id="673ed16d8e485-1934852075229028148-1__label" data-uid="673ed16d8ea9e">
<!-- 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="673ed16d8eada">
<span class="c-button__label">
<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="673ed16d8eb06">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8e485-2444910021768980219-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="673ed16d8e485-2444910021768980219-2__label" href="#" target="_top" id="673ed16d8e485-2444910021768980219-2__label" data-uid="673ed16d8eb90">
<!-- 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="673ed16d8ebdd">
<span class="c-button__label">
<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="673ed16d8ec0d">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8e485-794813403728522164-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="673ed16d8e485-794813403728522164-3__label" href="#" target="_top" id="673ed16d8e485-794813403728522164-3__label" data-uid="673ed16d8ecaf">
<!-- 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="673ed16d8ecf4">
<span class="c-button__label">
<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="673ed16d8ed25">
</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="673ed16d8ed67" data-uid="673ed16d8ed67">
<li id="673ed16d8ed67-9034689460739888028-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="673ed16d8ed67-9034689460739888028-0__label" href="#" target="_top" id="673ed16d8ed67-9034689460739888028-0__label" data-uid="673ed16d8edf7">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="673ed16d8ed67-3941360929704155221-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="673ed16d8ed67-3941360929704155221-1__label" href="#" target="_top" id="673ed16d8ed67-3941360929704155221-1__label" data-uid="673ed16d8ee74">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="673ed16d8ed67-4292904255081273946-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="673ed16d8ed67-4292904255081273946-2__label" href="#" target="_top" id="673ed16d8ed67-4292904255081273946-2__label" data-uid="673ed16d8ef03">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="673ed16d8ed67-7633907720788531152-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="673ed16d8ed67-7633907720788531152-3__label" href="#" target="_top" id="673ed16d8ed67-7633907720788531152-3__label" data-uid="673ed16d8ef8d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8e485-3872900556572771154-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="673ed16d8e485 - 3872900556572771154-4__label" data-uid="673ed16d8efe7">
<span class="c-button__label">
<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="673ed16d8f03d" data-uid="673ed16d8f03d">
<li id="673ed16d8f03d-2794415865352604908-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="673ed16d8f03d-2794415865352604908-0__label" href="#" target="_top" id="673ed16d8f03d-2794415865352604908-0__label" data-uid="673ed16d8f101">
<!-- 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="673ed16d8f144">
<span class="c-button__label">
<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="673ed16d8f177">
</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="673ed16d8f1b8" data-uid="673ed16d8f1b8">
<li id="673ed16d8f1b8-4593146787350116148-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="673ed16d8f1b8-4593146787350116148-0__label" href="#" target="_top" id="673ed16d8f1b8-4593146787350116148-0__label" data-uid="673ed16d8f247">
<!-- 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="673ed16d8f28b">
<span class="c-button__label">
<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="673ed16d8f2be">
</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="673ed16d8f2ff" data-uid="673ed16d8f2ff">
<li id="673ed16d8f2ff-7034522678416958280-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="673ed16d8f2ff-7034522678416958280-0__label" href="#" target="_top" id="673ed16d8f2ff-7034522678416958280-0__label" data-uid="673ed16d8f397">
<!-- 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="673ed16d8f3dc">
<span class="c-button__label">
<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="673ed16d8f40e">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8f2ff-4941504633202136137-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="673ed16d8f2ff-4941504633202136137-1__label" href="#" target="_top" id="673ed16d8f2ff-4941504633202136137-1__label" data-uid="673ed16d8f4ae">
<!-- 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="673ed16d8f4f1">
<span class="c-button__label">
<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="673ed16d8f522">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="673ed16d8f1b8-8697665316245579204-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="673ed16d8f1b8-8697665316245579204-1__label" href="#" target="_top" id="673ed16d8f1b8-8697665316245579204-1__label" data-uid="673ed16d8f5ba">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8f03d-1592909114346071101-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="673ed16d8f03d-1592909114346071101-1__label" href="#" target="_top" id="673ed16d8f03d-1592909114346071101-1__label" data-uid="673ed16d8f640">
<!-- 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="673ed16d8f683">
<span class="c-button__label">
<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="673ed16d8f6b4">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8f03d-515339644058926947-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="673ed16d8f03d-515339644058926947-2__label" href="#" target="_top" id="673ed16d8f03d-515339644058926947-2__label" data-uid="673ed16d8f74a">
<!-- 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="673ed16d8f78d">
<span class="c-button__label">
<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="673ed16d8f7bf">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8f03d-8539600525993286730-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="673ed16d8f03d-8539600525993286730-3__label" href="#" target="_top" id="673ed16d8f03d-8539600525993286730-3__label" data-uid="673ed16d8f88c">
<!-- 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="673ed16d8f8d0">
<span class="c-button__label">
<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="673ed16d8f901">
</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="673ed16d8f943" data-uid="673ed16d8f943">
<li id="673ed16d8f943-4726914277070181174-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="673ed16d8f943-4726914277070181174-0__label" href="#" target="_top" id="673ed16d8f943-4726914277070181174-0__label" data-uid="673ed16d8f9d3">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="673ed16d8f943-1303871263506460485-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="673ed16d8f943-1303871263506460485-1__label" href="#" target="_top" id="673ed16d8f943-1303871263506460485-1__label" data-uid="673ed16d8fa50">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="673ed16d8f943-1314439038397499696-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="673ed16d8f943-1314439038397499696-2__label" href="#" target="_top" id="673ed16d8f943-1314439038397499696-2__label" data-uid="673ed16d8facb">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="673ed16d8f943-2170586387776190910-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="673ed16d8f943-2170586387776190910-3__label" href="#" target="_top" id="673ed16d8f943-2170586387776190910-3__label" data-uid="673ed16d8fb5e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8f03d-4772844784347481471-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="673ed16d8f03d - 4772844784347481471-4__label" data-uid="673ed16d8fbbc">
<span class="c-button__label">
<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="673ed16d8fc0a" data-uid="673ed16d8fc0a">
<li id="673ed16d8fc0a-5658082530695199304-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="673ed16d8fc0a-5658082530695199304-0__label" href="#" target="_top" id="673ed16d8fc0a-5658082530695199304-0__label" data-uid="673ed16d8fc99">
<!-- 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="673ed16d8fcd6">
<span class="c-button__label">
<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="673ed16d8fd02">
</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="673ed16d8fd3d" data-uid="673ed16d8fd3d">
<li id="673ed16d8fd3d-4385434539864128918-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="673ed16d8fd3d-4385434539864128918-0__label" href="#" target="_top" id="673ed16d8fd3d-4385434539864128918-0__label" data-uid="673ed16d8fdbe">
<!-- 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="673ed16d8fdfa">
<span class="c-button__label">
<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="673ed16d8fe27">
</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="673ed16d8fe61" data-uid="673ed16d8fe61">
<li id="673ed16d8fe61-3747820875548840278-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="673ed16d8fe61-3747820875548840278-0__label" href="#" target="_top" id="673ed16d8fe61-3747820875548840278-0__label" data-uid="673ed16d8fedf">
<!-- 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="673ed16d8ff1c">
<span class="c-button__label">
<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="673ed16d8ff48">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8fe61-2452794483316544213-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="673ed16d8fe61-2452794483316544213-1__label" href="#" target="_top" id="673ed16d8fe61-2452794483316544213-1__label" data-uid="673ed16d8ffce">
<!-- 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="673ed16d90010">
<span class="c-button__label">
<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="673ed16d9003c">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="673ed16d8fd3d-394497514517690992-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="673ed16d8fd3d-394497514517690992-1__label" href="#" target="_top" id="673ed16d8fd3d-394497514517690992-1__label" data-uid="673ed16d900c6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8fc0a-8970094254865596458-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="673ed16d8fc0a-8970094254865596458-1__label" href="#" target="_top" id="673ed16d8fc0a-8970094254865596458-1__label" data-uid="673ed16d9013c">
<!-- 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="673ed16d90178">
<span class="c-button__label">
<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="673ed16d901a4">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8fc0a-6531883908620036221-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="673ed16d8fc0a-6531883908620036221-2__label" href="#" target="_top" id="673ed16d8fc0a-6531883908620036221-2__label" data-uid="673ed16d90228">
<!-- 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="673ed16d90263">
<span class="c-button__label">
<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="673ed16d9028e">
</span>
</span>
</span> </button> </div>
</li>
<li id="673ed16d8fc0a-5014287082142810955-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="673ed16d8fc0a-5014287082142810955-3__label" href="#" target="_top" id="673ed16d8fc0a-5014287082142810955-3__label" data-uid="673ed16d9032d">
<!-- 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="673ed16d9036f">
<span class="c-button__label">
<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="673ed16d9039e">
</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="673ed16d903df" data-uid="673ed16d903df">
<li id="673ed16d903df-6667088310307987127-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="673ed16d903df-6667088310307987127-0__label" href="#" target="_top" id="673ed16d903df-6667088310307987127-0__label" data-uid="673ed16d90475">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="673ed16d903df-3796131982615613992-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="673ed16d903df-3796131982615613992-1__label" href="#" target="_top" id="673ed16d903df-3796131982615613992-1__label" data-uid="673ed16d904f4">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="673ed16d903df-8093013799455893557-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="673ed16d903df-8093013799455893557-2__label" href="#" target="_top" id="673ed16d903df-8093013799455893557-2__label" data-uid="673ed16d9056e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="673ed16d903df-7028591717399326359-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="673ed16d903df-7028591717399326359-3__label" href="#" target="_top" id="673ed16d903df-7028591717399326359-3__label" data-uid="673ed16d905e6">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="673ed16d8fc0a-743176330235446478-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="673ed16d8fc0a - 743176330235446478-4__label" data-uid="673ed16d9063f">
<span class="c-button__label">
<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. |