Dropdown

A Dropdown opens to reveal to the user a list of choices, such as a group of actions or settings. The user will select one or more of the list items before continuing. It can be triggered by a button or another component.

HTML
React
CodeSandbox
Storybook
<div class="neo-dropdown">
  <button class="neo-btn neo-btn-primary neo-btn-primary--primary neo-dropdown__link-header">
    Action
  </button>
  <div
    class="neo-dropdown__content"
    role="menu"
  >
    <a
      class="neo-dropdown__link"
      role="menuitem"
    >
      Menu Item 1
    </a>
    <a
      class="neo-dropdown__link"
      role="menuitem"
    >
      Menu Item 2
    </a>
    <a class="neo-dropdown__link">
      Menu Item 3
    </a>
    <div class="neo-dropdown__item">
      <a
        class="neo-dropdown__link"
        role="menuitem"
      >
        Option 4
      </a>
      <div
        class="neo-dropdown__content"
        role="menu"
      >
        <a
          class="neo-dropdown__link"
          role="menuitem>
            Sub Option 1
            </a>
            <a class="
          neo-dropdown__link"
        >
          Sub Option 2
        </a>
        <a
          class="neo-dropdown__link"
          role="menuitem"
        >
          Sub Option 3
        </a>
      </div>
    </div>
  </div>
</div>
<Menu menuRootElement={<Button>Action</Button>} closeOnSelect={false}>
  <MenuItem>Option 1</MenuItem>
  <MenuItem>Option 2</MenuItem>
  <MenuItem>Option 3</MenuItem>
  <SubMenu menuRootElement={<MenuItem>Option 4</MenuItem>}>
    <MenuItem>Sub Option 1</MenuItem>
    <MenuItem>Sub Option 2</MenuItem>
    <MenuItem>Sub Option 3</MenuItem>
  </SubMenu>
</Menu>

A component, such as a button, is used as a trigger for the dropdown. When selected, it reveals the container with the selectable items inside. Some of the items may also have their own sub-selection available.

Image showing the different parts that make up a dropdown

  • Control:

    This is the Neo component that holds the dropdown menu.

  • Trigger:

    Appearing beside the Control, the trigger shows that this component contains a dropdown.

  • Container:

    The box that holds the list of action items.

  • List of Items:

    These are the action items and options that users can select.

  • Expand Trigger:

    This trigger is shown when a menu item has its own supplementary dropdown list.

An dropdown exists in one of 4 states. The state changes as the user interacts with the action items.

Default
Image showing the different parts that make up a dropdown
Hover
Image showing the different parts that make up a dropdown
Disabled
Image showing the different parts that make up a dropdown
Selected
Image showing the different parts that make up a dropdown

  • Default:

    When the dropdown is opened, the action items are shown.

  • Hover:

    As the focus is moved over the mneu items, they are highlighted and can then be selected.

  • Disabled:

    Some circumstances will prevent one or more items from being selectable.

  • Selected:

    When an item is selected, it is shown with a checkmark beside the item. Some lists allow more than one selection to be made.

Dropdowns can be deployed using different types depending upon the options and formatting requirements of the action items.

Default
Image showing default dropdown state
Selected
Image showing selected dropdown state
Checkbox
Image showing dropdown with checkboxes
Grouped
Image showing dropdown with grouped sections

  • Default:

    The default type shows the action item list. Selecting any option activates it and closes the dropdown.

  • Selected:

    When an action items is selected, it is tagged with a checkmark and the dropdown remains open. If the dropdown is opened again, the currently selected item will still be tagged.

  • Checkbox:

    In situations where more than one action item can be selected, use the checkbox type.

  • Grouped with Titles:

    This type is used to organize the action items into easily understandable sections. This makes it easier to find items in longer lists.

Consistent design and presentation of the dropdown is important to improve usability. Do not mix and match elements, but pick a style and stick with it throughout that container.

Placement

Wherever possible, the dropdown should appear below the control and both are left-justified. When a dropdown is close to the right side of the window, the container can be right-justified with the control. If the dropdown is near the bottom of the window, the dropdown can expand upward.

Image showing a positioning configuration wherein the dropdown opens downwards or upwards

Whenever space is limited, the container can appear beside the control and expand either up or down as required.

Image showing a positioning configuration wherein the dropdown opens left or right

On Screen Placement

Whenever a dropdown includes sub menus, they should cascade to the right where possible. When the control is near to the right side of the window, it can cascade to the left. Do not expand in both directions for a single dropdown.

Image showing a series of open dropdown content sections cascading to the right
Image showing a series of open dropdown content sections cascading to the left

  • Position 1:

    This is the primary container with the top tier action items.

  • Position 2:

    Some primary items may have additional settings. The secondary tier container shows these items.

  • Position 3:

    The tertiary tier shows any settings associated with secondary items.

Width

The control should never be wider than the container, but it can be narrower.

The container should match the width of the control.

DO: The container should match the width of the control.

Do not make the container narrower than the control.

DON'T: Do not make the container narrower than the control.

The container can extend beyond the control to accommodate longer text.

DO: The container can extend beyond the control to accommodate longer text.

Do not truncate a long string of text.

DON'T: Do not truncate a long string of text.

Using Icons

Icons can be included into dropdowns if the icon adds something important to the list. They should never be added without purpose or as decorative items.

Use a consistent design within a list. Only use icons when they add essential value and have a strong association with the list item.

DO: Use a consistent design within a list. Only use icons when they add essential value and have a strong association with the list item.

Do not add icons to some items but not others. Do not use them for decoration.

DON'T: Do not add icons to some items but not others. Do not use them for decoration.

Grouping

To help users find what they need in a long list, group related items together. Optionally you can add a label to identify each group’s purpose.

Image showing dividers to group list items

DO: DO: Use dividers to group related items.

Image showing too many divider lines

DON'T: Do not have too many levels as it quickly becomes difficult to follow.

Group related items together making it easier to move through the various menus.

DO: Group related items together making it easier to move through the various menus.

Do not have too many levels as it quickly becomes difficult to follow.

DON'T: Do not have too many levels as it quickly becomes difficult to follow.

Scrolling

Add a scroll bar to very long lists to provide access to all of the options. Any dropdown that contains more than 10 items should use a scroll bar to provide access to the remaining items.

Use a scrollbar when Action items exceed 10 items.

DO: Use a scrollbar when Action items exceed 10 items.

Do not create dropdowns with more than 10 Action items.

DON'T: Do not create dropdowns with more than 10 Action items.

Each dropdown includes several default design elements.

Dropdown Collapsed
Image showing the default height of 36px for a dropdown element
Dropdown Expanded
Image showing the default height of a dropdown while it is expanded

Elevation

The dropdown component uses Elevation-100. The Elevation design token will apply a dropshadow to the container.

Border Style

The dropdown component uses the Border/Elevation design token to apply borders/strokes to components.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.

Keystrokes Interaction
Enter or Spacebar Opens the menu or submenu and puts the focus on the first item.
← Left Arrow and → Right Arrow Opens or closes the menu or submenu and puts the focus on the first item.
↑ Up Arrow and ↓ Down Arrow Opens the menu or submenu. Moves between items.
Esc Close the menu.

Related Content

Components