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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/HamburgerMenu/hamburgerMenu.json