Prose v0

Menus & Dropdowns

Components

Dropdowns allow users to select a single item from a list. Dropdowns should be labelled clearly and in Title Case (Ex. "Edit Assignment") when displaying an option and in Sentence case (Ex. "Select an option…") when displaying an instruction. There are multiple types and states for dropdowns and the Options Menus they reveal, as explained below.

Accessibility

If you are planning on using a default html select and not a custom menu list, you can skip this part.

<button id={btnID} aria-haspopup="true" aria-expanded={isMenuOpen}>
  Placeholder
</button>
<menu aria-labelledby={btnID} style={{ display: isMenuOpen ? 'block' : 'none' }}>
  <li><button>Menu item</button></li>
  <li><button>Menu item</button></li>
  <li><button>Menu item</button></li>
</menu>
  • The button that triggers the menu should have the following attributes:
    • id containing a unique value
    • aria-haspopup="true"
    • aria-expanded containing a boolean value equal to the state of the menu visibility
  • The menu triggered from the button should have the following attributes:
    • aria-labelledby containing the same value as the related button id value

Boxed Button

Boxed Dropdowns are used when the actions are critical or primary to the task at hand. Boxed Dropdowns stand out more because of the bounding box, making the control easier to locate.

Boxed Disabled Button

If an action is not currently available to initiate, but there is value in letting the user know that a particular control exists, then the disabled state is used.

Unboxed Button

Unboxed Dropdowns are used when the actions are secondary or tertiary to the task at hand, or when the use of the boxed variant would create too much visual distraction.

Unboxed Disabled Button

If an action is not currently available to initiate, but there is value in letting the user know that a particular control exists, then the disabled state is used.

There are three core menus: Menu, Menu with Icons, and Selectable Menu. All menus have:

  • A background of white (#FFFFFF)
  • A border of Dark Gray (#686868)
  • A box shadow

The menu is the default option provided and should be used unless multiple selections need to be made or there is a good use case for including icons.

Icon Menu

The Menu with Icons can be used if icons are deemed important to helping users recognize available options that might otherwise prove challenging to scan in text-only format.

Checkbox Menu

Selectable Menus are a type of drop down menu used when the user is able to select multiple items on the list

Small

Small menus should only be used in situations where space is at a premium and the controls that trigger the menus are also compactly positioned and/or sized. Example use case for small menus is in text or math editors where controls are at their minimum sizes and are tightly positioned relative to each other.

The Menu, Icon menu, and checkbox menu all share the same variations of states.

Disabled

If an action is not currently available to initiate, but there is value in letting the user know that a particular control exists, then the disabled state is used.

A dropdown menu should appear below the dropdown whenever possible. If the dropdown is at the bottom of the page the menu can appear above the dropdown. Avoid covering the dropdown button with the menu as this can cover the label.

Scrolling Behavior

Max height should be 430px.

    •