Navik Mega 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:

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.

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)

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.