Menus

Menus

A Menu offers a list of actions or functions that a user can access.

Dropdown

Preview

No content has been added for this component.

No content has been added for this component.

About Dropdown

Icons can be included on either the right, left, or both sides of an option.

When using icons (e.g. checkmarks) to indicate selected state:

  • all selectable items should contain an icon
  • icons of non-selected are hidden by default
  • a selected item reveals its icon when aria-checked="true" is applied to its menuitemcheckbox or menuitemradio child (e.g. <a role="menuitemcheckbox" aria-checked="true" ...>).

About Menus

The unordered menu list with [role="menu"] should be contained in a <div> with the class .slds-dropdown. The exception to this is the Action Overflow for Touch, which not a dropdown menu.

The target HTML element and dropdown need to be wrapped in the class .slds-dropdown-trigger dropdown-trigger_click.

By default, dropdown menus do not display a nubbin (the little cute triangle pointing at your target). If you want to apply one, you can add the class that defines the nubbin position and .slds-nubbin_top to the .slds-dropdown HTML element.

Accessibility

The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate.

Expected markup:

  • Menu trigger is a focusable element (<a> or <button>) with aria-haspopup="true"
  • Menu has role="menu" and an aria-labelledby attribute whose value is the id of the menu trigger
  • Menu items have role="menuitem", role="menuitemcheckbox", or role="menuitemradio"

Expected keyboard interactions:

  • Arrow keys cycle focus through menu items (you should use JS to disable focus for any disabled items)
  • Tab key closes menu and moves focus to the next focusable element on the page
  • Esc key closes menu and moves focus back to the menu trigger
  • Any character key moves focus to the next menu item that starts with that character, if applicable

Overview of CSS Classes

Selector.slds-dropdown-trigger
Summary

Initializes a trigger element around the dropdown

Restrictdiv, span, li
VariantTrue
Selector.slds-dropdown-trigger_hover
Summary

If someone is using javascript for click to toggle - this modifier will help

Restrict.slds-dropdown-trigger
Selector.slds-dropdown-trigger_click
Summary

If someone is using javascript for click to toggle - this modifier will help

Restrict.slds-dropdown-trigger
Selector.slds-is-open
Summary

Opens dropdown menu when invoked on click

Restrict.slds-dropdown-trigger_click
ModifierTrue
Selector.slds-dropdown
Summary

Initializes dropdown

Restrict.slds-dropdown-trigger div, .slds-dropdown-trigger ul
Selector.slds-dropdown_left
Summary

Positions dropdown to left side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_right
Summary

Positions dropdown to right side of target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_bottom
Summary

Positions dropdown to above target

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_xx-small
Summary

Sets min-width of 6rem/96px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_x-small
Summary

Sets min-width of 12rem/192px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_small
Summary

Sets min-width of 15rem/240px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_medium
Summary

Sets min-width of 20rem/320px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_large
Summary

Sets min-width of 25rem/400px

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown_length-5
Summary

Forces overflow scrolling after 5 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-7
Summary

Forces overflow scrolling after 7 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-10
Summary

Forces overflow scrolling after 10 list items

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-5
Summary

Forces overflow scrolling after 5 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-7
Summary

Forces overflow scrolling after 7 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_length-with-icon-10
Summary

Forces overflow scrolling after 10 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list
ModifierTrue
Selector.slds-dropdown_inverse
Summary

Theme

Restrict.slds-dropdown
ModifierTrue
Selector.slds-dropdown__header
Summary

Adds padding to area above dropdown menu list

Restrict.slds-dropdown li
Selector.slds-dropdown__item
Summary

Initializes dropdown item

Restrict.slds-dropdown li
Selector.slds-icon_selected
Summary

If menu contains menuitemcheckbox then this toggles the selected icon when it is selected

Restrict.slds-dropdown__item svg
Selector.slds-is-selected
Summary

If menu contains menuitemcheckbox then this handles the selected states

Restrict.slds-dropdown__item
ModifierTrue
Selector.slds-nubbin_top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue