Hamburger menu
Hamburger Menu
Notice: Undefined index: text in /tmp/blade-engine-cache/cd4422c73c16b1e4732e8b61ad3ee9be95b99660.php on line 62
<button id="hamburger-menu-trigger-open" class="c-button hamburger-menu-trigger c-button__filled c-button__filled--primary c-button--md" href="" target="_top" data-js-toggle-trigger="hamburger-menu" type="button" aria-pressed="false" data-uid="62becb044dede">
<span class="c-button__label">
<span class="c-button__label-text ">
Open hamburger menu
</span>
</span>
</button>
<!-- hamburgerMenu.blade.php -->
<nav id="62becb044e31a" class="c-hamburgermenu u-display--none u-display--none@xs u-display--none@sm u-display--none@md o-grid" js-toggle-item="hamburger-menu" js-toggle-class="u-display--none">
<ul class="c-hamburgermenu__list o-grid unlist o-grid-12">
<li id="62becb044e31a-item-1"
class="c-hamburgermenu__item c-hamburgermenu__item--parent o-grid-12 o-grid-6@md o-grid-4@lg u-mb-6 u-margin__top--1 c-hamburgermenu__item--has-children">
<span id="62becb044e86a" class="c-link c-hamburgermenu__link c-hamburgermenu__link--title" data-uid="62becb044e866">
Styleguide
</span>
<ul class="c-hamburgermenu__sublist unlist u-margin__top--2">
<li id="62becb044e31a-item-1" class="c-hamburgermenu__item c-hamburgermenu__item--child ">
<span id="62becb044e8d9" class="c-link c-hamburgermenu__link c-hamburgermenu__link--child" data-uid="62becb044e8d7">
Styleguide child
</span>
</li>
</ul>
</li>
</ul>
</nav>
@button([
'id' => 'hamburger-menu-trigger-open',
'color' => 'primary',
'text' => 'Open hamburger menu',
'classList' => [
'hamburger-menu-trigger',
],
'attributeList' => [
'data-js-toggle-trigger' => 'hamburger-menu',
]
])
@endbutton
@hamburgerMenu([
'menuItems' => [
[
'id' => 1,
'label' => 'Styleguide',
'children' => [
[
'id' => 2,
'label' => 'Styleguide child',
'href' => '',
'classNames' => ''
]
],
'href' => '',
'classNames' => ''
]
],
])
@endhamburgerMenu
Blade component parameters
Key | Default value | Type | Available values | Description |
menuItems | [] | array | - | List of arrays containing at least 'label' and 'href' option 'icon' name as string. |
parentStyle | false | boolean | - | Select the style of menu parents. |
mobile | false | boolean | - | If true, the hamburger menu will be visible on mobile as well. |
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. |