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
Base
Sidebar Layout
<!-- sidebar.blade.php -->
<nav id="" class="c-sidebar u-position--relative c-sidebar--collapsed" data-uid="662c1def5ed86" js-sidebar>
<a href="/">
<div class="c-sidebar__logo">
<!-- image.blade.php -->
<figure class="c-image c-image--type-svg" data-uid="662c1def5edfa">
<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="662c1def5ee47"
aria-label="Arbete"
aria-pressed="false">
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="c-sidebar__subcontainer "
js-toggle-item="662c1def5ee47"
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="662c1def5ee66"
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="662c1def5ee66"
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="662c1def5ee7f"
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="662c1def5ee7f"
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="662c1def5ee94"
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="662c1def5ee94"
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="662c1def5eea9"
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="662c1def5eea9"
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' => '/'
])
@endsidebarBlade 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. |