Mega Menu

Owned by Peder Klockmann (Unlicensed)
Last updated: Jul 28, 2020
2 min read

A Mega Menu is a drop-down menu that expands upon a mouse-over event. The mega menu is populated horizontally from left to right with a maximum of three columns. The mega menu is built using the Secondary Menu (Main) feature. Follow the Knowledge Base article to manually add the links you would like to see in the Mega Menu on your site. The order of the links in the secondary menu dictates the placement in the mega menu. Adjust the hierarchy to get the links in the desired column. For a live example, visit the Drupal Common Framework website.

Contact the ITS Web Team via Slack or ITS.Drupal.Team@domail.maricopa.edu to add a mega menu to your site. Only one mega menu can be enabled.

Instructions

Creating a Mega Menu Link

  • Go to Structure > Menus > Secondary Menu

  • Select Add Link

  • Provide a Menu Link Title

  • Provide a Path for the menu item

  • Enter a Description that displays on mouse over

  • Check the Enabled checkbox

  • Check the Show as Expanded checkbox

  • If you are creating a root level menu item, set the Parent link to <Secondary menu>

  • If you are creating a sub link, set the Parent link to the root level menu item

  • Click Save

Arranging the Mega Menu Hierarchy

  • Go to Structure > Menus > Secondary Menu

  • Click and drag the Maltese cross icon for the menu item to the desired spot

  • Click Save Configuration

Removing a Mega Menu Link

  • Go to Structure > Menus > Secondary Menu

  • Click the Delete link under the Operations column

Related Articles