°Ä¿Í¾º²Ê

The new drop-down menu feature

In the new WMS, we have a responsive drop-down menu whose design adapts to the structure of the links in each section.
Image by Photo by Ava Tyler on Unsplash.

In this article:

Note that this article covers functionality in the new WMS. If you haven't migrated yet, don't worry - you'll have access soon!

What's changing

The drop-down menu feature

In the old WMS, very few sites used drop-down menus. Most were large, complex sites using what's often called a "mega-menu." This is a wide drop-down with many options organized into sections:

Screenshot of Programs drop down menu on the Desautels site

In the new WMS, we have a responsive drop-down menu whose design adapts to the structure of the links in each section.

If the menu has only one level of "children," it will appear as a simple drop-down:

Network dropdown on new Alumni site

If a menu has two levels of children, it will appear as a mega-menu. For example, adding child pages under "MAA branches" and "Alumni groups" will display these new pages underneath their respective "parent" pages and expand the drop-down to a mega-menu:

Mega-menu example on new Alumni site

Impact to left-hand navigation menus

When you activate a drop-down menu in the new WMS, it also changes how pages in that section display.ÌýTo avoid repeating menu items that appear in the drop-down, the WMS will automatically hide the left-hand menu from some pages.

Here's an illustration of how that works.

First, here is the default behaviour if there is no drop-down menu enabled. In this case, we're in the "Network" section. Pages in that section will have a left-hand section navigation that shows all the options in that section:

Default behaviour for no-drop down menu

If there is a drop-down menu enabled for the "Network" section, the left-hand section navigation will be hidden on first-level pages in that section:

Example of enabled drop-down menu

Second-level pages will still have left-hand section navigation. Right now, this shows all the options for the section. In the future, it will only show pages in the sub-section.ÌýIf the drop-down in our example is enabled, a sub-page of "Regional branches of the MAA" would have a left-hand menu. But it would only show other sub-pages of the "Regional branches of the MAA" page:

Second-level pages will still have left-hand section navigation

We're making this change because:

  • It allows top-level pages to use a wider layout. Most site managers prefer this format.
  • It avoids repeating the same navigation options in two places. This could be confusing for users and will waste time for people using assistive technology.
  • It simplifies the left-hand navigation on deeper pages. This makes the navigation items easier to use and understand.

When to use this feature

Sections with multiple important sub-pages can benefit from a drop-down menu, which allows users to jump directly to the page they want. This is particularly helpful if:

  • Users know exactly what they're looking for, or
  • Seeing all the available options will help the user to choose the best navigation link to click.

Don't bother with a drop-down menu if there are only one or two pages in a section, or if the sub-pages aren't useful for most users. Skip the drop-down so users navigate directly to the main page for that menu option.

How to prepare

The drop-down menu works best when it matches your . To start, consider whether your users will benefit more from a .Ìý has great advice for how to plan the main sections of your menu.

Flat menu structures

Flat structures use more main sections and will make content more visible. In a flat structure, there may be more menu items and the menu items may be more specific.

Flat structures let users skip directly to the page they want, without exploring multiple levels of options.ÌýHowever, they can be overwhelming if there are too many options or confusing if the options are too similar.

A simple drop-down is a good support for a flat structure.Ìý

Deep menu structures

Deep structures help organize a large number of pages into a structure that will fit the menu space. They may use general terms for items at the top level, but the options become increasingly specific as users navigate deeper into the section.Ìý

Deep structures can help users sort through options and manage their attention. However, users may miss unexpected options because they need to pass through multiple levels to find what they need.Ìý

´¡Ìý is a good support for a deep structure, because it exposes more levels of content.Ìý

Organizing your menu

In the new WMS, you can use a mix of simple drop-downs and mega-menus in the same site. This means you don't need to choose between an entirely flat or deep structure. You can adapt the drop-down for each section to work with its content.Ìý

No matter what you choose:

  1. Define a clear, usable set of top-level menu items.ÌýThese should accurately describe the main options on your site using words that your audience recognizes and understands.Ìý
  2. Look at the items in each section. Will you use a simple drop-down or mega menu?  to use the structure that fits best.
    • If you're using a simple drop-down, you might only have two levels: the parent item (the section that appears in the main menu) and the "child" items that appear in the drop-down: