1.0.0-alpha.1 • Public • Published

Mega menu component

npm version


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.


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.


  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


This component targets WCAG 2.1 AA accessibility.

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


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


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


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



npm i @visual-framework/vf-mega-menu

DownloadsWeekly Downloads





Apache 2.0

Unpacked Size

62.2 kB

Total Files


Last publish


  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98