Sidebar

The sidebar component is a traditional navbar with link items. In smaller screen sizes it becomes an expandable menu. You can load all the nav items with an array directly on the creation of the component. To load items dynamically as the user traverses down the tree of sub menu items is also an option. This is done with javascript and a request to a JSON file.

Base

Sidebar Layout

The sidebar is great to give users easy access to more navigation options.

Base

Sidebar Layout

The sidebar is great to give users easy access to more navigation options.

<!-- sidebar.blade.php -->
<nav id="61efa10bf1b95" class="c-sidebar u-position--relative c-sidebar--collapsed" data-uid="61efa10bf1b7e" js-sidebar>

            <a href="/">
            <div class="c-sidebar__logo">
                <!-- image.blade.php -->
<figure id="61efa10bf1c4f" class="c-image" data-uid="61efa10bf1c4b">
     
        <img src="/assets/img/logotype-grey-full.svg" alt="A logo" class="c-image__image "  />
            </figure>

            </div>
        </a>
    
    
    
    <div class="c-sidebar__subcontainer--top">
    
            
            <div class="c-sidebar__item">
                <a  class="c-sidebar__link" 
                    href="#" 
                    aria-label="Arbete" 
                    item-ancestor="0" 
                    item-active="0"
                    item-has-children="1"
                    item-children-async="1"
                >
                    Arbete
                </a>

                
                    
                    <div class="c-sidebar__toggle"
                        js-toggle-trigger="61efa10bf1cc8"
                        aria-label="Arbete"
                        aria-pressed="false">

                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                    <div class="c-sidebar__subcontainer "
        js-toggle-item="61efa10bf1cc8"
        js-toggle-class="c-sidebar__item--is-expanded">
    
    </div>                    
                            </div>
        
            <div class="c-sidebar__item">
                <a  class="c-sidebar__link" 
                    href="#" 
                    aria-label="Bo, bygga och miljö" 
                    item-ancestor="0" 
                    item-active="0"
                    item-has-children="1"
                    item-children-async="1"
                >
                    Bo, bygga och miljö
                </a>

                
                    
                    <div class="c-sidebar__toggle"
                        js-toggle-trigger="61efa10bf1cf6"
                        aria-label="Bo, bygga och miljö"
                        aria-pressed="false">

                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                    <div class="c-sidebar__subcontainer "
        js-toggle-item="61efa10bf1cf6"
        js-toggle-class="c-sidebar__item--is-expanded">
    
    </div>                    
                            </div>
        
            <div class="c-sidebar__item">
                <a  class="c-sidebar__link" 
                    href="#" 
                    aria-label="Förskola och utbildning" 
                    item-ancestor="0" 
                    item-active="0"
                    item-has-children="1"
                    item-children-async="1"
                >
                    Förskola och utbildning
                </a>

                
                    
                    <div class="c-sidebar__toggle"
                        js-toggle-trigger="61efa10bf1d1e"
                        aria-label="Förskola och utbildning"
                        aria-pressed="false">

                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                    <div class="c-sidebar__subcontainer "
        js-toggle-item="61efa10bf1d1e"
        js-toggle-class="c-sidebar__item--is-expanded">
    
    </div>                    
                            </div>
        
            <div class="c-sidebar__item">
                <a  class="c-sidebar__link" 
                    href="#" 
                    aria-label="Kommun och politik" 
                    item-ancestor="0" 
                    item-active="0"
                    item-has-children="1"
                    item-children-async="1"
                >
                    Kommun och politik
                </a>

                
                    
                    <div class="c-sidebar__toggle"
                        js-toggle-trigger="61efa10bf1d45"
                        aria-label="Kommun och politik"
                        aria-pressed="false">

                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                    <div class="c-sidebar__subcontainer "
        js-toggle-item="61efa10bf1d45"
        js-toggle-class="c-sidebar__item--is-expanded">
    
    </div>                    
                            </div>
        
            <div class="c-sidebar__item">
                <a  class="c-sidebar__link" 
                    href="#" 
                    aria-label="Omsorg och stöd" 
                    item-ancestor="0" 
                    item-active="0"
                    item-has-children="1"
                    item-children-async="1"
                >
                    Omsorg och stöd
                </a>

                
                    
                    <div class="c-sidebar__toggle"
                        js-toggle-trigger="61efa10bf1d6b"
                        aria-label="Omsorg och stöd"
                        aria-pressed="false">

                        <div class="bar"></div>
                        <div class="bar"></div>
                    </div>

                    <div class="c-sidebar__subcontainer "
        js-toggle-item="61efa10bf1d6b"
        js-toggle-class="c-sidebar__item--is-expanded">
    
    </div>                    
                            </div>
            </div></nav>

<div class="c-sidebar__backdrop" js-sidebar-trigger>
</div>
@sidebar([
    'logo' => '/assets/img/logotype-grey-full.svg',
    'items' => \HbgStyleGuide\Navigation::getMockedTopLevel(),
    'showHideButton' => false,
    'classList' => ['u-position--relative'],
    'childItemsUrl' => '/'
])

@endsidebar

Blade component parameters

Key Default value Type Available values Description
logo string - A link to a logo
items [] array - An array of links
showHideButton false boolean - Option to display the button to hide sidebar, otherwise just clicking outside the drawer will close it.
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/Sidebar/sidebar.json