MegaNav Menu

What is a Mega Menu?

mega menu is a drop down, expandable menu interface that is triggered by the user hovering over a link or defined area. This differs from a regular menu in that the panel is full width, showing various options, and often groups related links and content into categories or columns. This is also known as the MegaNav.

What Does UCR's Offering Look Like?

After deciding on your main menu items that show in the horizontal menu across the top of the site, sub links can be displayed in four different columns. This allows site builders to group content for users. The drop down interface spans full width of the screen, expanding the menu's capabilities. 

The below image is an example of what the mega menu will look like using all four columns. The "Find Information For" is a special section restricted for the main UCR website only. The site builder decides how many links to appear in each column. 

Meganav example screenshot

Using the MegaNav

The MegaNav Main Navigation menu is not the default navigation. This is a separate menu from Main Navigation. MegaNav items need to be built out separately. There are several steps to switch to the MegaNav option. 

Build out the MegaNav

Site builders have access to build out menus. The MegaNav can be found under Structure -> Menus. It is called "MegaNav Main navigation". Follow the instructions below and look at the screenshot for an example. 

  1. The menu link for the item to be expanded needs to be created. For the example, it would be the "About" link. Fill out the link as appropriate. It could be the overview page for the "About" content. Be sure to check "Show as Expanded".
  2. In order for the arrows to display, the class field needs to be populated with the text "drop-down-arrow".  The class field is found under attributes.
    Meganav nav item attributes screenshot
  3. The MegaNav needs to know what links to place in which columns. There are four different columns. These are labeled, "Column 1", "Column 2", "Column 3", and "Column 4". To get columns to work in the MegaNav, a menu link item needs to be created for each column. Create a link with the menu link title as "Column 1". Make sure that each of the columns have "show as expanded" checked, since they also have "children". 
  4. The "Column 1" link will need to link to "route:<nolink>". (This goes for all the column links: "Column 1", "Column 2", "Column 3", and "Column 4".)
    MegaNav edit menu link screenshot
  5. Make the Column 1 link a child of the link item that needs to expand to the drop down. This can be accomplished by select the parent or in the menu view, indenting the item. 
  6. Add menu links per normal for anything that should be in the first column. These should be children (or subitems) of the column. 
  7. Repeat steps 2-5 for all columns that you wish to use, up to column 4.

The following image is what your MegNav menu should look like.  Notice the order - "About" will be the expandable main menu item, columns are indented and have no link, indented further are the items that will be displayed in those columns. 

MegaNav columns

Switching to MegaNav 

Now that the MegaNav has been built out, Drupal needs to know that this is the menu to use. Site builders are able to switch from one navigation style to the other in the Block Layout.

  1. Go to Structure -> Block Layout
  2. Under the Primary Menu section, disable "Main Navigation" by clicking on the arrow next to Configure
  3. Enable "MegaNav Main navigation" and "MegaNav Main navigation (Mobile)" by using the Enable button. 
  4. Click "Save Blocks" at the bottom