Drop Down Menus
Last updated: September 10, 2015 at 21:12 pm

A contextual menu, which can be toggled off and on, displaying a list of links.


Visual example of the element:


What problem does this element or pattern solve?
A drop down menu allows the user to see the contents of a site section without traveling to a new page. In sites with extensive content, navigation in as few steps as possible is made much easier if the user can see what they'll find at different destinations before going there.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Does the menu expand to show the sublist on hover or click? Keep in mind that if you are building a responsive site, a hover state will not be available.
  • If the sublist is exposed on click, will it collapse on rollout if the user does not select a sub-item?
  • Will you permit multiple tiers of sublists?
  • Does the sublist appear from the bottom or the side of the trigger?
  • Do you permit drop down menus within content area, or only in header areas?
  • If you are building a responsive site, be sure to define the behavior of your drop down menus for mobile phones and tablets. As the screen width decreases, will they change orientation (from horizontal to vertical)? Or will they be converted into a drawer or fly-out interaction?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
pop-down menu, pull-down menu, dropdown menu
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply