Mega-Site Navigation

Navigation template for mega-sites.

Dependencies

• Diagonal Movement
• Dropdown
• Tabs

How to

The Mega-Site Navigation component is a navigation template for mega-sites.

To set when to switch from the --mobile version (where the navigation is collapsed) to the --desktop version (where the navigation is expanded), use the mega-nav--desktop@{breakpoint} class, where {breakpoint} can be "xs", "sm", "md", "lg", or "xl".

<header class="mega-nav mega-nav--mobile mega-nav--desktop@md js-mega-nav">
  <!-- navigation content -->
</header>

To make customizing the navigation elements easier, in SCSS, we use the .mega-nav--mobile class to target the style affecting only small devices, and .mega-nav--desktop to target only big devices. In JavaScript, we remove the .mega-nav--mobile class and add .mega-nav--desktop, depending on the value of .mega-nav--desktop@{breakpoint}.

By doing so, we keep the style of the two navigation versions (--mobile and --desktop) separated, and you don't need to reset/override the style while working on the --desktop version.

// --------------------------------

// --mobile

// --------------------------------

.mega-nav--mobile {
  // style affecting only small screens
}

// --------------------------------

// --desktop

// --------------------------------

.mega-nav--desktop {
  // style affecting only big screens
}

If you want the header to be fixed, from the .mega-nav element:

• Remove the .position-relative utility class;
• Add the .position-sticky and the .top-0 utility classes.

<header class="mega-nav mega-nav--mobile mega-nav--desktop@md position-sticky top-0 js-mega-nav">
  <!-- header content here -->
</header>

Layouts #

The component includes 4 layout options for the sub nanigation items. A layout is set adding the .mega-nav__sub-nav--layout-{number} class to the .mega-nav__sub-nav element.

• mega-nav__sub-nav--layout-1 -> links on smaller screens, tabbed content on bigger screens
• mega-nav__sub-nav--layout-2 -> multiple lists of links
• mega-nav__sub-nav--layout-3 -> gallery
• mega-nav__sub-nav--layout-4 -> single list of links

Open navigation on hover #

If you want to open the subnavigation elements on hover rather than on click, add a data-hover="on" attribute to the .js-mega-nav element.

---

🌅 Demo images:

• Photo by REVOLT on Unsplash
• Photo by Imani Clovis on Unsplash
• Photo by Malvestida Magazine on Unsplash
• Photo by Keagan Henman on Unsplash
• Photo by Daniel Storek on Unsplash
• Photo by Álvaro Bernal on Unsplash
• Photo by Jean-Philippe Delberghe on Unsplash

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗