Mega Menu

About the Mega Menu

By default, the menus in the Open Berkeley theme have a simple drop-down functionality (similar to the previous theme). The theme also has a "mega menu" option. With the Mega Menu, clicking on a parent (top-level) menu item pops open a larger menu display, with a photo, description, and the child (sub-menu) items.

Screenshot of the mega menu expanded on the Disability Access & Compliance site

How to Use the Mega Menu

Navigate to your Site Builder Dashboard (admin/dashboard). Under "Administer Menus," select "Manage Links".

At the bottom, check the box that says "Make into a mega menu", then click "Save".

Next, you will need to enable the mega menu option for the top-level menu item, add a photo, and add a description for this menu section.

Navigate to the Site Builder dashboard again, and select "Manage Links" again. Click edit next to the top-level menu item.

At the bottom, check the box for "make this into a mega menu," which will expand some additional options. After checking the box and expanding the options, click "Browse" to either upload a new photo or choose an existing one (such as a stock photo), add a description to accompany the mega menu, then click "Save".

Now, when you click on the top-level menu item, the mega menu will pop open.

The "Overview" Page

In the traditional "simple drop-down" menu option, visitors could click the top-level item to get to that page. With a mega menu, clicking the top-level item opens the mega menu, so we need another link (which is called "Overview") to take visitors to the top-level content for that menu item.

Screenshot of the mega menu expanded with the Overview item highlighted

From a general user interaction perspective, site visitors generally expect to be able to get to some sort of top-level page before moving down to other sub-level pages. In this case, since the mega menu needs to open first (after the action of clicking with the mouse or tabbing with the keyboard), the "Overview" page serves as that top-level page. This is modeled after the menu structure on the gateway site.