alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Mega menu container

Paired with a good understanding of a site's information architecture and user journey, the mega menu can empower quick shortcut-style access to popular areas.

github location npm version

Usage

The mega menu should be seen as a empowering but optional feature. While a mega menu may allow a user to quickly move to a sub-section of a website, or laterally move from one silo to another, that empowering ability should be viewed as an optional user journey.

Some users may fail to notice the mega menu by scrolling past it, be on a mobile device where the menu behaves differently, or the JavaScript-based feature may fail to load making the mega menu inaccessible.

A user journey should always be possible without the mega menu's content.

It is recommended to put your mega menu links at the vf-global-header level.

Caveats

  1. The mega menu currently is not designed to work on mobile
  2. In principle any content can be inserted into a mega menu
  3. Using more than one mega menu on a page is likely to confuse and overwhelm users
  4. A mega menu is not a substitute for a good information architecture

Accessibility

This component targets WCAG 2.1 AA accessibility.

Hiding critical or essintal information in a mega menu is harmful to users.

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "container",
 }
%}
{% include "../path_to/vf-mega-menu/vf-mega-menu.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-mega-menu', {
  "component-type" : "container",}
%}
HTML 
<header class="vf-global-header vf-mega-menu" data-vf-js-mega-menu role="menubar">
  <a href="/" class="vf-logo | vf-logo--has-text">
    <img class="vf-logo__image" src="../../assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager">
    <span class="vf-logo__text">Visual Framework for Life Science websites</span>
  </a>

  <nav class="vf-navigation vf-navigation--global | vf-cluster">
    <ul class="vf-navigation__list | vf-list | vf-cluster__inner">
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section" data-vf-js-mega-menu-section-id="demo-topics-content-section" href="/topics">
          Topics
        </a>
      </li>
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section" data-vf-js-mega-menu-section-id="demo-organization-content-section" href="/organization">
          Organization structure
        </a>
      </li>
      <li class="vf-navigation__item">
        <a href="http://www.embl.org" class="vf-navigation__link vf-mega-menu__link">Normal link</a>
      </li>
      <li class="vf-navigation__item">
        <a href="http://www.embl.org/about" class="vf-navigation__link">About us</a>
      </li>
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link" data-vf-js-mega-menu-section-id="demo-search-content-section" href="/search">
          Search
        </a>
      </li>
    </ul>
  </nav>
</header>

<div class="vf-mega-menu__content">
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-topics-content-section" role="menu" aria-hidden="true">
    <section class="vf-summary-container | embl-grid">
      <div class="vf-section-header">
        <h2 class="vf-section-header__heading">EMBL topics</h2>
        <p class="vf-section-header__text">A unique approach to scientific services in Europe</p>
      </div>
      <div class="vf-section-content | vf-grid vf-grid__col-3">
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </div>
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-organization-content-section" role="menu" aria-hidden="true">
    <section class="vf-summary-container | embl-grid">
      <div class="vf-section-header">
        <h2 class="vf-section-header__heading">Our organization</h2>
        <p class="vf-section-header__text">About our org</p>
      </div>
      <div class="vf-section-content | vf-grid vf-grid__col-3">
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <div class="vf-section-header">
                <h2 class="vf-section-header__heading"> A header</h2>
              </div>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <div class="vf-section-header">
                <h2 class="vf-section-header__heading"> A header</h2>
              </div>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <div class="vf-section-header">
                <h2 class="vf-section-header__heading"> A header</h2>
              </div>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </div>
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-search-content-section" role="menu" aria-hidden="true">
    <form action="#" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
      <div class="vf-sidebar__inner">
        <div class="vf-form__item">
          <label class="vf-form__label vf-u-sr-only | vf-search__label" for="searchitem">Search</label>
          <input type="search" placeholder="Enter your search terms" id="searchitem" class="vf-form__input" />
        </div>

        <button type="submit" class="vf-search__button | vf-button vf-button--primary">
          <span class="vf-button__text">Search</span>

          <svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140">
            <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
              <path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0">
              </path>
            </g>
          </svg>
        </button>
      </div>
      <div class="vf-section-header vf-u-margin__bottom--400 vf-u-margin__top--800">
        <h2 class="vf-section-header__heading" id="section-text">
          Popular links
        </h2>
      </div>
    </form>
    <ul class="vf-list vf-u-margin__bottom--800">
      <li class="vf-list__item">a list item</li>
      <li class="vf-list__item">another list item</li>
      <li class="vf-list__item">and another list item</li>
      <li class="vf-list__item">yet another list item</li>
    </ul>
  </div>
</div>

Examples

Installation info

This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-mega-menu with this command.

$ yarn add --dev @visual-framework/vf-mega-menu

JS

You should import this component in ./components/vf-component-rollup/scripts.js or your other JS process:

import { vfComponentName } from 'vf-mega-menu/vf-mega-menu';
// Or import directly
// import { vfComponentName } from '../components/raw/vf-mega-menu/vf-mega-menu.js';
vfComponentName(); // if needed, invoke it

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-mega-menu/vf-mega-menu.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.0.0-alpha.1

  • Creates a mega menu.
  • https://github.com/visual-framework/vf-core/issues/1718

Assets


File system location: components/vf-mega-menu

Find an issue on this page? Propose a change or discuss it.