Nav

Vertical navigation

<!-- nav.blade.php -->
 
    <ul id="61efb6053b155" class="c-nav u-position--relative c-nav--depth-0 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053b14c" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053b155-0__label"
            >

                                    <a  id="61efb6053b155-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete" 
                    >
                                                <span class="c-nav__text">Arbete</span>
                    </a>
                                
                                                            <button id="61efb6053ba8f8.21976849" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053baa2">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053bb42" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053bb3e">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053b995" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053b98f">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053bbae" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053bbaa" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053bbae-0__label"
            >

                                    <a  id="61efb6053bbae-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 1 with a long name" 
                    >
                                                <span class="c-nav__text">Arbete - Child 1 with a long name</span>
                    </a>
                                
                                                            <button id="61efb6053bcc76.26999833" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053bcd6">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053bd26" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053bd22">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053bc85" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053bc81">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053bd78" class="c-nav c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053bd75" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053bd78-0__label"
            >

                                    <a  id="61efb6053bd78-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 1" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 1</span>
                    </a>
                                
                                                            <button id="61efb6053be8a6.36808986" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053be98">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053bef5" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053bef0">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053be47" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053be43">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053bd78-1__label"
            >

                                    <a  id="61efb6053bd78-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 2" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 2</span>
                    </a>
                                
                                                            <button id="61efb6053bf929.97518802" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053bf9f">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053bfe9" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053bfe6">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053bf57" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053bf53">
</div>
            
    </span>
</button>                    
                                                </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053bbae-1__label"
            >

                                    <a  id="61efb6053bbae-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 2" 
                    >
                                                <span class="c-nav__text">Arbete - Child 2</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053b155-1__label"
            >

                                    <a  id="61efb6053b155-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Bo, bygga och miljö" 
                    >
                                                <span class="c-nav__text">Bo, bygga och miljö</span>
                    </a>
                                
                                                            <button id="61efb6053c0990.46196836" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053c0a6">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053c0ef" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053c0ec">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053c05e" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053c05a">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053b155-2__label"
            >

                                    <a  id="61efb6053b155-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Förskola och utbildning" 
                    >
                                                <span class="c-nav__text">Förskola och utbildning</span>
                    </a>
                                
                                                            <button id="61efb6053c1853.20960508" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053c192">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053c1dc" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053c1d8">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053c14b" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053c147">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053b155-3__label"
            >

                                    <a  id="61efb6053b155-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Kommun och politik" 
                    >
                                                <span class="c-nav__text">Kommun och politik</span>
                    </a>
                                
                                                            <button id="61efb6053c2715.64925954" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053c27d">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053c2c5" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053c2c2">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053c237" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053c234">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053c314" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053c311" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c314-0__label"
            >

                                    <a  id="61efb6053c314-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="About" 
                    >
                                                <span class="c-nav__text">About</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c314-1__label"
            >

                                    <a  id="61efb6053c314-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Contact" 
                    >
                                                <span class="c-nav__text">Contact</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c314-2__label"
            >

                                    <a  id="61efb6053c314-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Links" 
                    >
                                                <span class="c-nav__text">Links</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c314-3__label"
            >

                                    <a  id="61efb6053c314-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="More info" 
                    >
                                                <span class="c-nav__text">More info</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053b155-4__label"
            >

                                    <a  id="61efb6053b155-4__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Omsorg och stöd" 
                    >
                                                <span class="c-nav__text">Omsorg och stöd</span>
                    </a>
                                
                                                            <button id="61efb6053c4446.87382885" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053c452">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053c49c" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053c498">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053c408" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053c404">
</div>
            
    </span>
</button>                    
                                                </li>
            </ul>
@nav([
    'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true
])
@endnav

Vertical navigation (with border)

<!-- nav.blade.php -->
 
    <ul id="61efb6053c74f" class="c-nav u-position--relative c-nav--bordered c-nav--depth-0 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053c74a" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c74f-0__label"
            >

                                    <a  id="61efb6053c74f-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete" 
                    >
                                                <span class="c-nav__text">Arbete</span>
                    </a>
                                
                                                            <button id="61efb6053c88a9.10492798" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053c898">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053c8e6" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053c8e2">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053c847" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053c843">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053c939" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053c935" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c939-0__label"
            >

                                    <a  id="61efb6053c939-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 1 with a long name" 
                    >
                                                <span class="c-nav__text">Arbete - Child 1 with a long name</span>
                    </a>
                                
                                                            <button id="61efb6053ca4c3.29822826" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053ca5a">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053caa5" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053caa2">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053ca0d" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053ca09">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053caf4" class="c-nav c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053caf1" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053caf4-0__label"
            >

                                    <a  id="61efb6053caf4-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 1" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 1</span>
                    </a>
                                
                                                            <button id="61efb6053cc2e1.84307612" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053cc3c">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053cc86" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053cc83">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053cbe8" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053cbd0">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053caf4-1__label"
            >

                                    <a  id="61efb6053caf4-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 2" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 2</span>
                    </a>
                                
                                                            <button id="61efb6053cd1e2.80332165" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053cd2d">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053cd79" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053cd75">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053cce4" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053cce1">
</div>
            
    </span>
</button>                    
                                                </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c939-1__label"
            >

                                    <a  id="61efb6053c939-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 2" 
                    >
                                                <span class="c-nav__text">Arbete - Child 2</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c74f-1__label"
            >

                                    <a  id="61efb6053c74f-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Bo, bygga och miljö" 
                    >
                                                <span class="c-nav__text">Bo, bygga och miljö</span>
                    </a>
                                
                                                            <button id="61efb6053ce240.88847947" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053ce30">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053ce79" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053ce76">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053cdea" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053cde6">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c74f-2__label"
            >

                                    <a  id="61efb6053c74f-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Förskola och utbildning" 
                    >
                                                <span class="c-nav__text">Förskola och utbildning</span>
                    </a>
                                
                                                            <button id="61efb6053cf108.81709873" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053cf1d">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053cf66" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053cf63">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053ced5" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053ced2">
</div>
            
    </span>
</button>                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c74f-3__label"
            >

                                    <a  id="61efb6053c74f-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Kommun och politik" 
                    >
                                                <span class="c-nav__text">Kommun och politik</span>
                    </a>
                                
                                                            <button id="61efb6053cffd7.43381832" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053d009">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053d051" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053d04e">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053cfc3" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053cfc0">
</div>
            
    </span>
</button>                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053d0a1" class="c-nav c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" data-uid="61efb6053d09d" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d0a1-0__label"
            >

                                    <a  id="61efb6053d0a1-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="About" 
                    >
                                                <span class="c-nav__text">About</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d0a1-1__label"
            >

                                    <a  id="61efb6053d0a1-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Contact" 
                    >
                                                <span class="c-nav__text">Contact</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d0a1-2__label"
            >

                                    <a  id="61efb6053d0a1-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Links" 
                    >
                                                <span class="c-nav__text">Links</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d0a1-3__label"
            >

                                    <a  id="61efb6053d0a1-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="More info" 
                    >
                                                <span class="c-nav__text">More info</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053c74f-4__label"
            >

                                    <a  id="61efb6053c74f-4__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Omsorg och stöd" 
                    >
                                                <span class="c-nav__text">Omsorg och stöd</span>
                    </a>
                                
                                                            <button id="61efb6053d1fb4.75697751" class="c-button c-nav__toggle js-toggle-children c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb6053d208">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb6053d253" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb6053d24f">
                    expand_more
            </i>
        
                    <!-- loader.blade.php -->

<div id="61efb6053d1bd" class="c-loader c-loader__circular--color--black c-loader__circular c-loader__circular--sm" aria-busy="true" role="progressbar" data-uid="61efb6053d1b9">
</div>
            
    </span>
</button>                    
                                                </li>
            </ul>
@nav([
    'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative', 'c-nav--bordered'],
    'childItemsUrl' => '/',
    'direction' => 'vertical',
    'includeToggle' => true
])
@endnav

Horizontal navigation

<!-- nav.blade.php -->
 
    <ul id="61efb6053d4d3" class="c-nav u-position--relative c-nav--depth-0 unlist c-nav--horizontal" aria-orientation="horizontal" js-keep-in-viewport-after-resize="1" data-uid="61efb6053d4ce" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d4d3-0__label"
            >

                                    <a  id="61efb6053d4d3-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete" 
                    >
                                                <span class="c-nav__text">Arbete</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d4d3-1__label"
            >

                                    <a  id="61efb6053d4d3-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Bo, bygga och miljö" 
                    >
                                                <span class="c-nav__text">Bo, bygga och miljö</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d4d3-2__label"
            >

                                    <a  id="61efb6053d4d3-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Förskola och utbildning" 
                    >
                                                <span class="c-nav__text">Förskola och utbildning</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d4d3-3__label"
            >

                                    <a  id="61efb6053d4d3-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Kommun och politik" 
                    >
                                                <span class="c-nav__text">Kommun och politik</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d4d3-4__label"
            >

                                    <a  id="61efb6053d4d3-4__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Omsorg och stöd" 
                    >
                                                <span class="c-nav__text">Omsorg och stöd</span>
                    </a>
                                
                                    
                                                </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
])
@endnav

Horizontal navigation (with dropdown)

<!-- nav.blade.php -->
 
    <ul id="61efb6053d7ff" class="c-nav u-position--relative c-nav--depth-0 unlist c-nav--horizontal" aria-orientation="horizontal" js-keep-in-viewport-after-resize="1" data-uid="61efb6053d7fa" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d7ff-0__label"
            >

                                    <a  id="61efb6053d7ff-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete" 
                    >
                                                <span class="c-nav__text">Arbete</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053d909" class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" js-keep-in-viewport-after-resize="1" data-uid="61efb6053d904" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d909-0__label"
            >

                                    <a  id="61efb6053d909-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 1 with a long name" 
                    >
                                                <span class="c-nav__text">Arbete - Child 1 with a long name</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053d9cc" class="c-nav c-nav--depth-2 unlist c-nav--horizontal" aria-orientation="horizontal" js-keep-in-viewport-after-resize="1" data-uid="61efb6053d9c8" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d9cc-0__label"
            >

                                    <a  id="61efb6053d9cc-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 1" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 1</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d9cc-1__label"
            >

                                    <a  id="61efb6053d9cc-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Granchild 2" 
                    >
                                                <span class="c-nav__text">Arbete - Granchild 2</span>
                    </a>
                                
                                    
                                                </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d909-1__label"
            >

                                    <a  id="61efb6053d909-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Arbete - Child 2" 
                    >
                                                <span class="c-nav__text">Arbete - Child 2</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d7ff-1__label"
            >

                                    <a  id="61efb6053d7ff-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Bo, bygga och miljö" 
                    >
                                                <span class="c-nav__text">Bo, bygga och miljö</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d7ff-2__label"
            >

                                    <a  id="61efb6053d7ff-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Förskola och utbildning" 
                    >
                                                <span class="c-nav__text">Förskola och utbildning</span>
                    </a>
                                
                                    
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default   has-fetched"
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d7ff-3__label"
            >

                                    <a  id="61efb6053d7ff-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Kommun och politik" 
                    >
                                                <span class="c-nav__text">Kommun och politik</span>
                    </a>
                                
                                    
                     
                        <!-- nav.blade.php -->
 
    <ul id="61efb6053dac0" class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" js-keep-in-viewport-after-resize="1" data-uid="61efb6053dabc" role="menu">
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053dac0-0__label"
            >

                                    <a  id="61efb6053dac0-0__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="About" 
                    >
                                                <span class="c-nav__text">About</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053dac0-1__label"
            >

                                    <a  id="61efb6053dac0-1__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Contact" 
                    >
                                                <span class="c-nav__text">Contact</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053dac0-2__label"
            >

                                    <a  id="61efb6053dac0-2__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Links" 
                    >
                                                <span class="c-nav__text">Links</span>
                    </a>
                                
                            </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053dac0-3__label"
            >

                                    <a  id="61efb6053dac0-3__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="More info" 
                    >
                                                <span class="c-nav__text">More info</span>
                    </a>
                                
                            </li>
            </ul>
                                                </li>
                    <li 
                id="<br />
<b>Notice</b>:  Undefined index: id in <b>/tmp/blade-engine-cache/60e2ad0d22925e478338daa1bb2be0749963221d.php</b> on line <b>6</b><br />
" class="c-nav__item c-nav__item--default  "
        
                
                
                role="menuitem"
                aria-labelledby="61efb6053d7ff-4__label"
            >

                                    <a  id="61efb6053d7ff-4__label"
                        class="c-nav__link " 
                        href="#" 
                        aria-label="Omsorg och stöd" 
                    >
                                                <span class="c-nav__text">Omsorg och stöd</span>
                    </a>
                                
                                    
                                                </li>
            </ul>
<div style="height: 200px;"></div><!-- Padder -->
@nav([
    'items' => \HbgStyleGuide\Navigation::getMockedMultilevel(),
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/', //Currently unsupported in horizontal mode
    'direction' => 'horizontal',
    'includeToggle' => false //Currently unsupported in horizontal mode
])
@endnav
<div style="height: 200px;"></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.
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 false boolean - Allow the use of style parameter in this menu (item.style = 'button')
depth 0 integer - Internal depth indicator, should not be used.
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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Nav/nav.json