Mega menu

Mega menu

<button class="c-button mega-menu-trigger c-button__filled c-button__filled--primary c-button--md" target="_top" data-js-toggle-trigger="mega-menu" type="button" aria-label="Open hamburger menu" id="mega-menu-trigger-open" data-uid="662d716c42a6a">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Open hamburger menu
            </span>
        
    </span> </button>
    <!-- megaMenu.blade.php -->
<div class="c-megamenu u-display--none u-display--none@xs u-display--none@sm u-display--none@md u-display--none" js-toggle-item="mega-menu" js-toggle-class="u-display--none"  data-uid="662d716c42ae6">
    
<nav class="c-megamenu__menu o-container o-container--wide o-grid">
    
    

    <ul class="c-megamenu__list o-grid unlist o-grid-12">
                    <li id="-main-item-1"
                class="c-megamenu__item c-megamenu__item--parent o-grid-12 o-grid-6@md o-grid-4@lg o-grid-3@xl u-mb-6 u-margin__top--1 c-megamenu__item--has-children">
                                        <span class="c-link c-megamenu__link c-megamenu__link--title" id="" target="_top" data-uid="662d716c42d26">
        Styleguide
        </span>
                                                    
                                    <ul class="c-megamenu__sublist unlist u-margin__top--2">
                                                    <li id="-item-2" class="c-megamenu__item c-megamenu__item--child ">
                                    <span class="c-link c-megamenu__link c-megamenu__link--child" id="" target="_top" data-uid="662d716c42d71">
        Styleguide child
        </span>
                                </li>
                                            </ul>
                            </li>
            </ul>
</nav>
</div>
@button([
    'id' => 'mega-menu-trigger-open',
    'color' => 'primary',
    'text' => 'Open hamburger menu',
    'classList' => [
        'mega-menu-trigger',
    ],
    'attributeList' => [
        'data-js-toggle-trigger' => 'mega-menu',
    ]
])
@endbutton

@megaMenu([
    'menuItems' => [
        [
            'id' => 1,
            'label' => 'Styleguide',
            'children' => [
                [
                    'id' => 2,
                    'label' => 'Styleguide child',
                    'href' => '',
                    'classNames' => ''
                ]
            ],
            'href' => '',
            'classNames' => ''
        ]
    ],
])
@endmegaMenu

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.
parentStyleColor primary string - -
mobile false boolean - If true, the mega 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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/MegaMenu/megaMenu.json