Choosing your site's Main Menu


The options available to you for menu options can be overwhelming. It's not always clear on what menu you should choose. There a lot of different circumstances that can influence your choice. I'll share our experiences and thoughts on a few menu options.

Below is a list of menu examples we've designed and implemented:

Push Menus

Currently, in line with the trend to keep things simple. Push menus allow for a simple layout, uncluttered navigation and easy transition to mobile.

Clark University - clarku.edu
Marietta College - marietta.edu

Advantages

  • Already mobile and tablet ready, no need to switch out the desktop menu.
  • Clean and focused menu where site structure can be explored.

Disadvantages

  • Menu items and structure are hidden from initial view.

Mega Menus

Allow for a large layout of columns and other content to be displayed in the menu. Mega menus allow for large amounts of sub-menu items to be displayed all at once.

Millikin University - millikin.edu
University of Arizona - arizona.edu
California State University Long Beach - csulb.edu

Advantages

  • This menu allows for many columns and content other than menu links to be displayed.
  • Focused experience on a particular menu item.

Disadvantages

  • Menu structure can become cumbersome and overwhelming.
  • Take up a large part of the screen.
  • This menu doesn't usually translate to a mobile/tablet experience.

Drop Down Menus

The classic approach to presenting the menu of your site. Allows for all the top level navigation to be displayed at once and dig deeper for sub-menu items. One of the cleanest and best options for sites with a small and simple menu structure.

USC Libraries - libraries.usc.edu
Fastaff - fastaff.com
Arizona Alumni - alumni.arizona.edu
Atlanta History Center - atlantahistorycenter.com

Advantages

  • Menu items are always visible on all pages.
  • Clear listing of the sub menu items.

Disadvantages

  • Not intuitive for a mobile experience.
  • You can only dig so far into the menu structure before it takes up too much screen space.