Drop-down menus

Applies to: Plone, Zope and T4 Site Manager
Last updated: 31/10/2016
Summary: An overview of drop-down menus (also known as accordion menus) and how to use them.

Before you start

You should use drop-down menus sparingly and only when they meet a user need. Drop-down menus can help users scan a page to find content quickly, but you should only use them when the content meets the following criteria.

Recommendations for usage

  1. Drop-down menus are used best on a page with multiple sections where a user is expected to read only some of the sections. If a user is expected to read most or all content on a page, do not use a drop-down menu.
  2. No more than seven drop-down items per menu. Any more than this suggests that the content should be split into separate pages.
  3. No more than two or three paragraphs per drop-down item. Any more than this suggests that the content should be split into separate pages.
  4. Conversely, if each section contains just one or two short sentences, don't use a drop-down menu. It will be quicker for a user to scan the content without a drop-down menu in place.
  5. Use sparingly. Drop-down menus require increased interaction from the user in terms of clicking to open and close menus. Users do not want to have to navigate through page after page full of drop-down menus.

If in doubt, know that a well structured page with clear headings is always more preferable than hiding content away behind a drop-down menu.

Implementation

Copy the HTML structure under the example below. The important thing to note is the locations of the <div class="drop-down-menu"> and <div class="drop-down-content"> within your HTML.

Activation

Once you have added the correct HTML to the page, fill out the form below so that we can activate your drop-down menu: