Go to homepage

Projects /

Mega-Site Navigation

Navigation template for mega-sites.

View Demo


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 -->

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 -->

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:


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.