Mega Menus
Mega menus are meant to be used in conjunction with off canvas menu and require jQuery and the Mercury UI Framework mega menu plugin to work. Note: You will need
to initialize your mega menus by calling $().mercuryuiMegaMenu(); and off canvas menus by calling $().mercuryuiOffCanvas();.
You can also open and close mega menus individually via the plugin through actions by targeting the id of the menu:
$('#mega-menu-base-1').mercuryuiMegaMenu('open'); and $('#mega-menu-base-1').mercuryuiMegaMenu('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be:
$('#mega-menu-base-1').mercuryuiMegaMenu('open', { afterOpen: function(){ alert('Menu opened!'); } });
Create custom branded mega menu by using the mega menu color mixin: @include mega-menu-color($color, $hover-color, $background-color, $border-color).
Base
The base Mega Menu starts at the md breakpoint.
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--base">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--base">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--base">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-base-1-button" aria-controls="mega-menu-base-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-base-1" aria-labelledby="mega-menu-base-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-base-2-button" aria-controls="mega-menu-base-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-base-2" aria-labelledby="mega-menu-base-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Colors
Primary Color
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--primary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--primary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--primary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--primary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-primary-1-button" aria-controls="mega-menu-primary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-primary-1" aria-labelledby="mega-menu-primary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-primary-2-button" aria-controls="mega-menu-primary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-primary-2" aria-labelledby="mega-menu-primary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Secondary
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--secondary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--secondary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--secondary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--secondary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-secondary-1-button" aria-controls="mega-menu-secondary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-secondary-1" aria-labelledby="mega-menu-secondary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-secondary-2-button" aria-controls="mega-menu-secondary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-secondary-2" aria-labelledby="mega-menu-secondary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Tertiary
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--tertiary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--tertiary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--tertiary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--tertiary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-tertiary-1-button" aria-controls="mega-menu-tertiary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-tertiary-1" aria-labelledby="mega-menu-tertiary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-tertiary-2-button" aria-controls="mega-menu-tertiary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-tertiary-2" aria-labelledby="mega-menu-tertiary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Breakpoints
Breakpoints are available to turn Off Canvas menus into Mega Menus at md, lg, xl, and xxl.
LG & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--lg mega-menu--lg margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--lg">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--lg">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--lg">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-lg-1-button" aria-controls="mega-menu-lg-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-lg-1" aria-labelledby="mega-menu-lg-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-lg-2-button" aria-controls="mega-menu-lg-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-lg-2" aria-labelledby="mega-menu-lg-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--lg-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>XL & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xl mega-menu--xl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xl">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--xl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xl">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xl-1-button" aria-controls="mega-menu-xl-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xl-1" aria-labelledby="mega-menu-xl-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xl-2-button" aria-controls="mega-menu-xl-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xl-2" aria-labelledby="mega-menu-xl-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--xl-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>XXL & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xxl mega-menu--xxl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xxl">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--xxl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xxl">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xxl-1-button" aria-controls="mega-menu-xxl-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xxl-1" aria-labelledby="mega-menu-xxl-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xxl-2-button" aria-controls="mega-menu-xxl-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xxl-2" aria-labelledby="mega-menu-xxl-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--xxl-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>