Navik Mega Menu

Published on 09/20/2021
Help Article Design
Paul Rayment
Web Developer

The navigation library Navik has support for mega menus, allowing the creation of large customizable dropdown menus.

These features are added into Leiout using frames.

Frames refer to each individual large dropdown menu, and Panes refer to created subsections in each frame. Panes are created from pane templates, allowing for code reuse.


Steps for Creating a Mega Menu

Creating the Navigation Menu

For the following in the admin/navigation route, either edit the default navigation menu or add an additional menu.

Wrapper Section

Once this menu is created the wrapper needs to have the class navik-mega-menu telling Navik to use mega-menu features

Below is an example of the wrapper section of a mega menu navigation menu.

Menu Section

The menu tab stays similar to the default Navik menu section. All of the mega-menu functionality is contained by the frames that are pulled in with the {-ITEMS-} variable

Code example below:

Creating a Frame

To create a new frame (which can then be later added to the navigation menu) go to the admin/nav/frame route (The Nav Frames Tab) and click the "Add Nav Frame" button

Each Frame functions as one dropdown menu. Thus for a Mega-Menu with 3 Mega-Menu-Dropdowns, you would need to create 3 frames.

The markup of a frame will reference Panes, but first we have to create them as shown in the next section.

Adding Panes

Panes are the content for the frame and typically pull from menus created in the navigation tab.

Most frames will have multiple different panes that each pull from one or two menus in the navigation tab

Before creating a new Pane you need to create a new Pane template

Creating a Pane Template

To create a Pane Template click the + symbol next to the Pane Templates Button. Then Input the name of the frame and save (the name is purely for developer use and will not be seen by the user)

Now you can edit the pane template.

The pane tab is essentially the wrapper of the items

The variable {NAV:nav_id} will allow you to pull a menu from the navigation tab and have it display in the mega menu, and this is all that is typically necessary for the code in the Pane tab (other markup can be added as needed).

The Item tab is the markup for each individual item (Pulled from the menu).

The standard variables are listed below:

{ITEM_LINK}: The page that the item links to.
{ITEM_LABEL}: The label for the page (name of page)
{ITEM_IMAGE:size=md}: The image of the page
{ITEM_DESC:limit=100}: The Google description of the page

Note that these values can all be overridden in the meta tab of the items in the Leiout navigation tab.

An example of an item tab is shown below. It creates items with an image, description and title.

Using a Pane Template

After creating Pane templates you can use them by clicking the “Add Pane” button.

The name of the pane is again solely for the developer and will not be seen by the user. 

Inside the Pane build menu, you can select the options to fill in the values of the previously mentioned variables. (You can also edit the Template via the Pane and Item tabs)

Finalizing the Frame

The final step for finishing a frame is creating the markup and adding the created panes to it.

This is done by clicking on the “Edit Nav Frame” button and adding the desired mark-up.

To add a pane and its content use the variable {PANE:id} with id being the numerical ID attached to the pane.

An Example of the markup is shown below:

The mega menu should now be fully functional.

Lottie Animations

26, Feb 2023
Help Article
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design

This article explains how to use the Isotope JavaScript library and shows an example of it in action...

02, Aug 2021
Help Article Plugins