Megamenu

megamenu

Example

<div class="header">
  <div class="has-megamenu on-hover">
    <div class="navbar">
      <div>
        <ul class="nav horizontal">
          <li class="item">
            <div class="mega-link">
              <a href="#" class="link active" aria-current="page">Active</a>
              <div class="megamenu">
                <div style="display: grid;grid-auto-flow: column;grid-auto-columns: 1fr; min-height: 100px;">
                  <div>
                    1
                  </div>
                  <div>
                    2
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="item">
            <a class="link" href="#">Link</a>
          </li>
          <li class="item">
            <a class="link" href="#">Link</a>
          </li>
          <li class="item">
            <a class="link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

@use '~/styles/app.scss' as app;

// Load megamenu component with some extra components
@include app.generate-components(
  $components : (
    (
      app.get-theme(app.$theme, 'components.megamenu'),
      'has-megamenu',
      ( property: (name : 'megamenu', exclude : ('nav', 'navbar') ))
    ),
    (
      app.get-theme(app.$theme, 'components.navbar'),
      'navbar',
    ),
    (
      app.get-theme(app.$theme, 'components.nav'),
      'nav',
    )
  ),
  $config : app.$config,
  $theme: app.$theme,
);