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="682b52d85c7a7" data-uid="682b52d85c7a7">
<li id="682b52d85c7a7-8032534003948552586-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="682b52d85c7a7-8032534003948552586-0__label" href="#" target="_top" id="682b52d85c7a7-8032534003948552586-0__label" data-uid="682b52d85c9ca">
<!-- 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="682b52d85ca6f">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85cabf">
</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="682b52d85cb24" data-uid="682b52d85cb24">
<li id="682b52d85cb24-4490396147409334741-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="682b52d85cb24-4490396147409334741-0__label" href="#" target="_top" id="682b52d85cb24-4490396147409334741-0__label" data-uid="682b52d85cbe1">
<!-- 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="682b52d85cc34">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85cc73">
</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="682b52d85ccc5" data-uid="682b52d85ccc5">
<li id="682b52d85ccc5-4597339547578018229-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="682b52d85ccc5-4597339547578018229-0__label" href="#" target="_top" id="682b52d85ccc5-4597339547578018229-0__label" data-uid="682b52d85cd6e">
<!-- 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="682b52d85cdc9">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85ce0c">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85ccc5-6018547017055360629-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="682b52d85ccc5-6018547017055360629-1__label" href="#" target="_top" id="682b52d85ccc5-6018547017055360629-1__label" data-uid="682b52d85ced2">
<!-- 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="682b52d85cf22">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85cf5d">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d85cb24-5846873853190819119-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="682b52d85cb24-5846873853190819119-1__label" href="#" target="_top" id="682b52d85cb24-5846873853190819119-1__label" data-uid="682b52d85d019">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85c7a7-874314061362691489-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="682b52d85c7a7-874314061362691489-1__label" href="#" target="_top" id="682b52d85c7a7-874314061362691489-1__label" data-uid="682b52d85d0b9">
<!-- 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="682b52d85d108">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85d15a">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85c7a7-6031475385020013045-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="682b52d85c7a7-6031475385020013045-2__label" href="#" target="_top" id="682b52d85c7a7-6031475385020013045-2__label" data-uid="682b52d85d22f">
<!-- 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="682b52d85d286">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85d2c0">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85c7a7-8165808255645945933-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="682b52d85c7a7-8165808255645945933-3__label" href="#" target="_top" id="682b52d85c7a7-8165808255645945933-3__label" data-uid="682b52d85d36f">
<!-- 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="682b52d85d3bb">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85d3f4">
</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="682b52d85d43f" data-uid="682b52d85d43f">
<li id="682b52d85d43f-129616821522567384-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="682b52d85d43f-129616821522567384-0__label" href="#" target="_top" id="682b52d85d43f-129616821522567384-0__label" data-uid="682b52d85d4e7">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d85d43f-3775130396296700071-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="682b52d85d43f-3775130396296700071-1__label" href="#" target="_top" id="682b52d85d43f-3775130396296700071-1__label" data-uid="682b52d85d57a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d85d43f-7555864219242753861-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="682b52d85d43f-7555864219242753861-2__label" href="#" target="_top" id="682b52d85d43f-7555864219242753861-2__label" data-uid="682b52d85d612">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d85d43f-5142475522096617351-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="682b52d85d43f-5142475522096617351-3__label" href="#" target="_top" id="682b52d85d43f-5142475522096617351-3__label" data-uid="682b52d85d6a5">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85c7a7-6870069327761805208-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="682b52d85c7a7 - 6870069327761805208-4__label" data-uid="682b52d85d7da">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'vertical',
'includeToggle' => true
])
@endnavVertical navigation (with border)
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--bordered c-nav--height-sm c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="682b52d85d95c" data-uid="682b52d85d95c">
<li id="682b52d85d95c-1851603070353882189-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="682b52d85d95c-1851603070353882189-0__label" href="#" target="_top" id="682b52d85d95c-1851603070353882189-0__label" data-uid="682b52d85da22">
<!-- 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="682b52d85da70">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85daa7">
</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="682b52d85daef" data-uid="682b52d85daef">
<li id="682b52d85daef-8549767338034908671-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="682b52d85daef-8549767338034908671-0__label" href="#" target="_top" id="682b52d85daef-8549767338034908671-0__label" data-uid="682b52d85db8b">
<!-- 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="682b52d85dbd2">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85dc07">
</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="682b52d85dc4b" data-uid="682b52d85dc4b">
<li id="682b52d85dc4b-1566250239972418908-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="682b52d85dc4b-1566250239972418908-0__label" href="#" target="_top" id="682b52d85dc4b-1566250239972418908-0__label" data-uid="682b52d85dcde">
<!-- 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="682b52d85dd24">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85dd58">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85dc4b-5308416760289194001-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="682b52d85dc4b-5308416760289194001-1__label" href="#" target="_top" id="682b52d85dc4b-5308416760289194001-1__label" data-uid="682b52d85ddfc">
<!-- 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="682b52d85de57">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85de8d">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d85daef-460447387540098303-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="682b52d85daef-460447387540098303-1__label" href="#" target="_top" id="682b52d85daef-460447387540098303-1__label" data-uid="682b52d85df39">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85d95c-5961800582622893060-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="682b52d85d95c-5961800582622893060-1__label" href="#" target="_top" id="682b52d85d95c-5961800582622893060-1__label" data-uid="682b52d85dfca">
<!-- 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="682b52d85e012">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85e048">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85d95c-6448458853915132590-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="682b52d85d95c-6448458853915132590-2__label" href="#" target="_top" id="682b52d85d95c-6448458853915132590-2__label" data-uid="682b52d85e0eb">
<!-- 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="682b52d85e132">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85e168">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85d95c-8657944466457241724-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="682b52d85d95c-8657944466457241724-3__label" href="#" target="_top" id="682b52d85d95c-8657944466457241724-3__label" data-uid="682b52d85e346">
<!-- 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="682b52d85e39a">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85e3d4">
</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="682b52d85e41f" data-uid="682b52d85e41f">
<li id="682b52d85e41f-7124724880787577224-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="682b52d85e41f-7124724880787577224-0__label" href="#" target="_top" id="682b52d85e41f-7124724880787577224-0__label" data-uid="682b52d85e4c4">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d85e41f-7068011453465184875-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="682b52d85e41f-7068011453465184875-1__label" href="#" target="_top" id="682b52d85e41f-7068011453465184875-1__label" data-uid="682b52d85e553">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d85e41f-1173998230251648924-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="682b52d85e41f-1173998230251648924-2__label" href="#" target="_top" id="682b52d85e41f-1173998230251648924-2__label" data-uid="682b52d85e5e3">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d85e41f-3291530180274651846-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="682b52d85e41f-3291530180274651846-3__label" href="#" target="_top" id="682b52d85e41f-3291530180274651846-3__label" data-uid="682b52d85e672">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85d95c-108642579199292373-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="682b52d85d95c - 108642579199292373-4__label" data-uid="682b52d85e6e4">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative', 'c-nav--bordered'],
'childItemsUrl' => '/',
'direction' => 'vertical',
'includeToggle' => true,
'height' => 'sm'
])
@endnavVertical navigation (with border and indented)
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--bordered c-nav--height-sm c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" js-keep-in-viewport-after-resize="1" id="682b52d85e870" data-uid="682b52d85e870">
<li id="682b52d85e870-1923193851731581622-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="682b52d85e870-1923193851731581622-0__label" href="#" target="_top" id="682b52d85e870-1923193851731581622-0__label" data-uid="682b52d85e929">
<!-- 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="682b52d85e975">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85e9b4">
</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="682b52d85e9fc" data-uid="682b52d85e9fc">
<li id="682b52d85e9fc-8250431605060843106-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="682b52d85e9fc-8250431605060843106-0__label" href="#" target="_top" id="682b52d85e9fc-8250431605060843106-0__label" data-uid="682b52d85ea94">
<!-- 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="682b52d85eadb">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85eb10">
</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="682b52d85eb56" data-uid="682b52d85eb56">
<li id="682b52d85eb56-1665068880355602208-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="682b52d85eb56-1665068880355602208-0__label" href="#" target="_top" id="682b52d85eb56-1665068880355602208-0__label" data-uid="682b52d85ebea">
<!-- 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="682b52d85ec30">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85ec63">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85eb56-6929790726097952877-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="682b52d85eb56-6929790726097952877-1__label" href="#" target="_top" id="682b52d85eb56-6929790726097952877-1__label" data-uid="682b52d85ecfe">
<!-- 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="682b52d85ed43">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85ed7c">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d85e9fc-466177749325754155-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="682b52d85e9fc-466177749325754155-1__label" href="#" target="_top" id="682b52d85e9fc-466177749325754155-1__label" data-uid="682b52d85ee36">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85e870-5577841859990156116-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="682b52d85e870-5577841859990156116-1__label" href="#" target="_top" id="682b52d85e870-5577841859990156116-1__label" data-uid="682b52d85eece">
<!-- 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="682b52d85ef29">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85ef5f">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85e870-4198030774734471767-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="682b52d85e870-4198030774734471767-2__label" href="#" target="_top" id="682b52d85e870-4198030774734471767-2__label" data-uid="682b52d85f00b">
<!-- 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="682b52d85f04f">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85f081">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85e870-5121166775417147922-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="682b52d85e870-5121166775417147922-3__label" href="#" target="_top" id="682b52d85e870-5121166775417147922-3__label" data-uid="682b52d85f119">
<!-- 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="682b52d85f163">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85f196">
</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="682b52d85f1d9" data-uid="682b52d85f1d9">
<li id="682b52d85f1d9-8739085208324307069-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="682b52d85f1d9-8739085208324307069-0__label" href="#" target="_top" id="682b52d85f1d9-8739085208324307069-0__label" data-uid="682b52d85f26d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d85f1d9-8979947441181585027-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="682b52d85f1d9-8979947441181585027-1__label" href="#" target="_top" id="682b52d85f1d9-8979947441181585027-1__label" data-uid="682b52d85f2ee">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d85f1d9-882379199042206309-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="682b52d85f1d9-882379199042206309-2__label" href="#" target="_top" id="682b52d85f1d9-882379199042206309-2__label" data-uid="682b52d85f36d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d85f1d9-1454235377190295015-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="682b52d85f1d9-1454235377190295015-3__label" href="#" target="_top" id="682b52d85f1d9-1454235377190295015-3__label" data-uid="682b52d85f3e8">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85e870-5907988644378362927-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="682b52d85e870 - 5907988644378362927-4__label" data-uid="682b52d85f443">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative', 'c-nav--bordered'],
'childItemsUrl' => '/',
'direction' => 'vertical',
'includeToggle' => true,
'height' => 'sm',
'indentSubLevels' => true,
])
@endnavHorizontal navigation
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" js-keep-in-viewport-after-resize="1" id="682b52d85f603" data-uid="682b52d85f603">
<li id="682b52d85f603-7888830612899723348-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="682b52d85f603-7888830612899723348-0__label" href="#" target="_top" id="682b52d85f603-7888830612899723348-0__label" data-uid="682b52d85f6f3">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete
</span>
</a>
</div>
</li>
<li id="682b52d85f603-493360639301131378-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="682b52d85f603-493360639301131378-1__label" href="#" target="_top" id="682b52d85f603-493360639301131378-1__label" data-uid="682b52d85f794">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Bo, bygga och miljö
</span>
</a>
</div>
</li>
<li id="682b52d85f603-5000764191651533201-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="682b52d85f603-5000764191651533201-2__label" href="#" target="_top" id="682b52d85f603-5000764191651533201-2__label" data-uid="682b52d85f82a">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Förskola och utbildning
</span>
</a>
</div>
</li>
<li id="682b52d85f603-4174735016832261345-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="682b52d85f603-4174735016832261345-3__label" href="#" target="_top" id="682b52d85f603-4174735016832261345-3__label" data-uid="682b52d85f8b9">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Kommun och politik
</span>
</a>
</div>
</li>
<li id="682b52d85f603-1119508031413211142-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="682b52d85f603-1119508031413211142-4__label" href="#" target="_top" id="682b52d85f603-1119508031413211142-4__label" data-uid="682b52d85f95a">
<!-- 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="682b52d85fb40" data-uid="682b52d85fb40">
<li id="682b52d85fb40-2591175928871174445-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="682b52d85fb40-2591175928871174445-0__label" href="#" target="_top" id="682b52d85fb40-2591175928871174445-0__label" data-uid="682b52d85fc23">
<!-- 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="682b52d85fc68">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85fc99">
</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="682b52d85fcda" data-uid="682b52d85fcda">
<li id="682b52d85fcda-37426748615229581-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="682b52d85fcda-37426748615229581-0__label" href="#" target="_top" id="682b52d85fcda-37426748615229581-0__label" data-uid="682b52d85fd82">
<!-- 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="682b52d85fdca">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85fe00">
</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="682b52d85fe45" data-uid="682b52d85fe45">
<li id="682b52d85fe45-1841686857888892822-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="682b52d85fe45-1841686857888892822-0__label" href="#" target="_top" id="682b52d85fe45-1841686857888892822-0__label" data-uid="682b52d85fed8">
<!-- 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="682b52d85ff1e">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d85ff51">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85fe45-3049874098453380351-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="682b52d85fe45-3049874098453380351-1__label" href="#" target="_top" id="682b52d85fe45-3049874098453380351-1__label" data-uid="682b52d85ffed">
<!-- 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="682b52d860031">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860063">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d85fcda-3731789504798527626-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="682b52d85fcda-3731789504798527626-1__label" href="#" target="_top" id="682b52d85fcda-3731789504798527626-1__label" data-uid="682b52d860111">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85fb40-5775767951272253944-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="682b52d85fb40-5775767951272253944-1__label" href="#" target="_top" id="682b52d85fb40-5775767951272253944-1__label" data-uid="682b52d86019d">
<!-- 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="682b52d8601e3">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860216">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85fb40-3322397799005581847-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="682b52d85fb40-3322397799005581847-2__label" href="#" target="_top" id="682b52d85fb40-3322397799005581847-2__label" data-uid="682b52d8602af">
<!-- 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="682b52d860307">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d86033d">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d85fb40-6224652512102192756-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="682b52d85fb40-6224652512102192756-3__label" href="#" target="_top" id="682b52d85fb40-6224652512102192756-3__label" data-uid="682b52d8603e2">
<!-- 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="682b52d860438">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d86046d">
</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="682b52d8604b5" data-uid="682b52d8604b5">
<li id="682b52d8604b5-8162726693235118931-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="682b52d8604b5-8162726693235118931-0__label" href="#" target="_top" id="682b52d8604b5-8162726693235118931-0__label" data-uid="682b52d860558">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d8604b5-4940858094409615006-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="682b52d8604b5-4940858094409615006-1__label" href="#" target="_top" id="682b52d8604b5-4940858094409615006-1__label" data-uid="682b52d8605e0">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d8604b5-6945685453778369886-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="682b52d8604b5-6945685453778369886-2__label" href="#" target="_top" id="682b52d8604b5-6945685453778369886-2__label" data-uid="682b52d86066c">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d8604b5-6767048268651551993-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="682b52d8604b5-6767048268651551993-3__label" href="#" target="_top" id="682b52d8604b5-6767048268651551993-3__label" data-uid="682b52d8606e8">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d85fb40-5725651553955357195-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="682b52d85fb40 - 5725651553955357195-4__label" data-uid="682b52d860745">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--height-md c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" js-keep-in-viewport-after-resize="1" id="682b52d8607a4" data-uid="682b52d8607a4">
<li id="682b52d8607a4-7909868872359972417-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="682b52d8607a4-7909868872359972417-0__label" href="#" target="_top" id="682b52d8607a4-7909868872359972417-0__label" data-uid="682b52d860851">
<!-- 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="682b52d860897">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d8608cb">
</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="682b52d860917" data-uid="682b52d860917">
<li id="682b52d860917-4578986674078865935-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="682b52d860917-4578986674078865935-0__label" href="#" target="_top" id="682b52d860917-4578986674078865935-0__label" data-uid="682b52d8609ab">
<!-- 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="682b52d8609f1">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860a23">
</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="682b52d860a67" data-uid="682b52d860a67">
<li id="682b52d860a67-151123979878596119-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="682b52d860a67-151123979878596119-0__label" href="#" target="_top" id="682b52d860a67-151123979878596119-0__label" data-uid="682b52d860b18">
<!-- 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="682b52d860b62">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860b98">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d860a67-8328718136100035533-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="682b52d860a67-8328718136100035533-1__label" href="#" target="_top" id="682b52d860a67-8328718136100035533-1__label" data-uid="682b52d860c3e">
<!-- 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="682b52d860c87">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860cc4">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d860917-7112519592828190991-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="682b52d860917-7112519592828190991-1__label" href="#" target="_top" id="682b52d860917-7112519592828190991-1__label" data-uid="682b52d860d6d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d8607a4-8944980453442970977-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="682b52d8607a4-8944980453442970977-1__label" href="#" target="_top" id="682b52d8607a4-8944980453442970977-1__label" data-uid="682b52d860dfd">
<!-- 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="682b52d860e45">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860e7a">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d8607a4-5225204373497134989-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="682b52d8607a4-5225204373497134989-2__label" href="#" target="_top" id="682b52d8607a4-5225204373497134989-2__label" data-uid="682b52d860f1b">
<!-- 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="682b52d860f63">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d860f98">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d8607a4-2629154995921429647-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="682b52d8607a4-2629154995921429647-3__label" href="#" target="_top" id="682b52d8607a4-2629154995921429647-3__label" data-uid="682b52d861039">
<!-- 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="682b52d861089">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d8610c4">
</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="682b52d861108" data-uid="682b52d861108">
<li id="682b52d861108-2453311118957431419-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="682b52d861108-2453311118957431419-0__label" href="#" target="_top" id="682b52d861108-2453311118957431419-0__label" data-uid="682b52d86119d">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d861108-9166941622188327815-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="682b52d861108-9166941622188327815-1__label" href="#" target="_top" id="682b52d861108-9166941622188327815-1__label" data-uid="682b52d86121e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d861108-3217899847219465866-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="682b52d861108-3217899847219465866-2__label" href="#" target="_top" id="682b52d861108-3217899847219465866-2__label" data-uid="682b52d86128e">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d861108-1519575643628176609-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="682b52d861108-1519575643628176609-3__label" href="#" target="_top" id="682b52d861108-1519575643628176609-3__label" data-uid="682b52d8612fc">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d8607a4-7992470902108662701-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="682b52d8607a4 - 7992470902108662701-4__label" data-uid="682b52d86134e">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
<!-- nav.blade.php -->
<ul class="c-nav u-position--relative c-nav--height-lg c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" js-keep-in-viewport-after-resize="1" id="682b52d8613a0" data-uid="682b52d8613a0">
<li id="682b52d8613a0-9164756105302367034-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="682b52d8613a0-9164756105302367034-0__label" href="#" target="_top" id="682b52d8613a0-9164756105302367034-0__label" data-uid="682b52d86142b">
<!-- 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="682b52d861468">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d8614a0">
</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="682b52d8614f5" data-uid="682b52d8614f5">
<li id="682b52d8614f5-335149466252316566-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="682b52d8614f5-335149466252316566-0__label" href="#" target="_top" id="682b52d8614f5-335149466252316566-0__label" data-uid="682b52d861587">
<!-- 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="682b52d8615cd">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d861601">
</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="682b52d861644" data-uid="682b52d861644">
<li id="682b52d861644-4192057285040001323-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="682b52d861644-4192057285040001323-0__label" href="#" target="_top" id="682b52d861644-4192057285040001323-0__label" data-uid="682b52d8616d4">
<!-- 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="682b52d861719">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d86174c">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d861644-6635886257364962238-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="682b52d861644-6635886257364962238-1__label" href="#" target="_top" id="682b52d861644-6635886257364962238-1__label" data-uid="682b52d8617fd">
<!-- 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="682b52d861848">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d86188f">
</span>
</span>
</span> </button> </div>
</li>
</ul>
</li>
<li id="682b52d8614f5-702089981940906797-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="682b52d8614f5-702089981940906797-1__label" href="#" target="_top" id="682b52d8614f5-702089981940906797-1__label" data-uid="682b52d861939">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Arbete - Child 2
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d8613a0-4887859701609025118-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="682b52d8613a0-4887859701609025118-1__label" href="#" target="_top" id="682b52d8613a0-4887859701609025118-1__label" data-uid="682b52d8619cb">
<!-- 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="682b52d861a15">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d861a4a">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d8613a0-3260919212380366747-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="682b52d8613a0-3260919212380366747-2__label" href="#" target="_top" id="682b52d8613a0-3260919212380366747-2__label" data-uid="682b52d861aed">
<!-- 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="682b52d861b36">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d861b6b">
</span>
</span>
</span> </button> </div>
</li>
<li id="682b52d8613a0-6568146834192422825-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="682b52d8613a0-6568146834192422825-3__label" href="#" target="_top" id="682b52d8613a0-6568146834192422825-3__label" data-uid="682b52d861c23">
<!-- 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="682b52d861c77">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="682b52d861caf">
</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="682b52d861cf7" data-uid="682b52d861cf7">
<li id="682b52d861cf7-2037973148318651156-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="682b52d861cf7-2037973148318651156-0__label" href="#" target="_top" id="682b52d861cf7-2037973148318651156-0__label" data-uid="682b52d861d94">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
About
</span>
</a>
</div>
</li>
<li id="682b52d861cf7-1949572680420195516-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="682b52d861cf7-1949572680420195516-1__label" href="#" target="_top" id="682b52d861cf7-1949572680420195516-1__label" data-uid="682b52d861e27">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Contact
</span>
</a>
</div>
</li>
<li id="682b52d861cf7-1402214573810062107-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="682b52d861cf7-1402214573810062107-2__label" href="#" target="_top" id="682b52d861cf7-1402214573810062107-2__label" data-uid="682b52d861eae">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
Links
</span>
</a>
</div>
</li>
<li id="682b52d861cf7-4489037326725405645-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="682b52d861cf7-4489037326725405645-3__label" href="#" target="_top" id="682b52d861cf7-4489037326725405645-3__label" data-uid="682b52d861f32">
<!-- icon.blade.php -->
<span
class="c-nav__text"
style="">
More info
</span>
</a>
</div>
</li>
</ul>
</li>
<li id="682b52d8613a0-6320449925151298270-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="682b52d8613a0 - 6320449925151298270-4__label" data-uid="682b52d861f96">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text c-button__label-text--reverse">
Omsorg och stöd
</span>
</span> </a>
</div>
</li>
</ul>
</div>
<div style="height: 100px;"></div><!-- Padder --><div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'sm'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'md'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->
<div class="u-color__bg--lighter">
@nav([
'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
'classList' => ['u-position--relative'],
'childItemsUrl' => '/',
'direction' => 'horizontal',
'includeToggle' => true,
'allowStyle' => true,
'height' => 'lg'
])
@endnav
</div>
<div style="height: 100px;"></div><!-- Padder -->Blade component parameters
| Key | Default value | Type | Available values | Description |
| items | [] | array | - | An nested array of items containing: id, label, active, ancestor, children(bool = async loading, or array), href, style, class, and color (which overrides the color settings). Attribute list may also contain 'data-fetch-url' to enable asyncrounous fetching. |
| direction | vertical | string | - | Modifier for basic direction. Accept values: 'vertical', 'horizontal.' |
| includeToggle | false | boolean | - | Tells wheter to include toggle button to expand childs or not. Accept values: true, false. |
| allowStyle | true | boolean | - | Allow the use of style parameter in this menu (item.style = 'button') |
| buttonStyle | filled | string | - | If the nav is presenting buttons, what style they should be in. |
| buttonColor | primary | string | - | If the nav is presenting buttons, what color they should be in. |
| expandLabel | Expand | string | - | Prefix for labels on expand arrow. Will result in Expand: Link label, or if label is missing, just Expand. |
| height | string | - | The default height of the menu (only supports horizontal navigation). Values: sm, md, lg. | |
| compressed | false | boolean | - | Makes the spacing between items smaller and the overall navigation more compressed. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |