Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Dropdown Menu
Dropdown menus present a list of menu items from which a user can choose from.
Example
SmurfsPapaClumsySmurfetteNinja TurtlesLeonardoDonatelloRaphaelMichelangeloLink to Other

See live code examples in Storybook
Usage

Dropdown menus are used with dropdown menu items to create options presented to the user. The dropdown menu can be triggered by matching the data-dropdown-menu-id on an element to the id of the dropdown menu. They are best used when more than two options are presented to the user, and can also be used to organize content.

Best practices
Dos
  • Keep the label in view so that a user can read it
  • Display menu items which are categorically similar per dropdown menu
  • Disable menu items that aren't available
  • Designate only a one menu item as the selected item
Don'ts
  • Don't change options in a single menu
  • Don't use dropdown menus in cases when data is commonly known and easier to type
  • Don't use dropdown menus when the list of options causes the user to scroll (Use selects)
Content guidelines Label
  • The label needs to be helpful in telling the user what is expected of them, but they do not need to be instructive
  • Labels are to be written in sentence case and should only be 1-3 words long
Item
  • Menu item text should be short and concise
States Item
Default

The default state of a menu item

Default
Disabled

Use when the option is unavailable to the user

Disabled
Selected

Displays the item as the selected option

Selected
Accessibility
  • 1.3.1 Info and Relationships A
  • W3 - Fly-out Menus
Importance

Provides users with options to select from a group of related items

Visual expectations

A trigger (link or button) that causes a menu to show under it with a list of options to pick from.

Code expectations
  • Dropdown list item has aria-haspopup="true" and aria-expanded="false"
  • There is another list within the dropdown that contains all its child elements
Screen reader
  • Reads "dropdown name, collapsed, menu item"
Keyboard
  • Tab: moves focus onto the dropdown. When dropdown is expanded, focus will go to next menu item
  • Shift + Tab: When dropdown is expanded, moves focus to the previous menu item
  • Enter: opens dropdown, interacts with selection when focus is on a menu item
  • → ←: moves focus left and right if there is more than one dropdown (such as the global navigation on JSTOR)
  • ↑ ↓: moves focus up and down when the dropdown is expanded
  • ↓: can also be used to expand a dropdown