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 Nav
The dropdown menu nav provides users an overview of your site's page hierarchy.
Example
Click MeMenu item 1Menu item 2Menu item 3

See live code examples in Storybook
Usage

Dropdown menu navs include a list of links that move users between sections of the application.

Best practices
Dos
  • Ensure all links and menu items navigate to a URL
  • Group navigation menu items together in a Pharos dropdown menu based on related categories
Don'ts
  • Open links in the nav from a new browser tab
  • Include links that navigate the user to a different site
Content guidelines

The navigation menu acts as a table of contents for your site. The content of links should reflect this hierarchy. The primary links representing main sections of the site should first be listed. If applicable, add submenus to links with additional related sections with a list of links pertaining to that group.

Accessibility

W3 Dropdown Menus

Relevant WCAG guidelines
  • 1.3.1 Info and Relationships A
  • 3.2.3 Consistent Navigation AA
  • 2.1.1 Keyboard
Importance

Dropdowns all users to better understand how menu items are related based on their grouping

Visual expectations

Dropdowns include some indication that they are expandable/interactable

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
<nav role="navigation" aria-label="global">
<ul>
  <li>
    <a href="...">Advanced Search</a>
  </li>
  <li className="...">
    <a href="..." aria-haspopup="true" aria-expanded="false">
      Browse
    </a>
    <ul>
      <li>
        <a href="...">By Subject</a>
      </li>
      <li>
        <a href="...">By Title</a>
      </li>
      <li>
        <a href="...">By Collections</a>
      </li>
      <li>
        <a href="...">By Publisher</a>
      </li>
    </ul>
  </li>
</ul>
</nav>
 Expected actions 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