Components

Menus

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

DropdownDropdown › DefaultDropdown › SmallDropdown › MediumDropdown › LargeDropdown › Sub HeadingDropdown › Single Icon - LeftDropdown › Double Icon - Left/RightDropdown › Single Icon - RightDropdowndev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="Show More">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left">
    <ul class="slds-dropdown__list" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="0">
          <span class="slds-truncate">Menu Item One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Two</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Three</span>
        </a>
      </li>
      <li class="slds-has-divider--top-space" role="separator"></li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Four</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Icons can be included on either the right, left, or both sides of an option. When checkmark icons are used, they are hidden when not selected using opacity: 0;. When selected, aria-selected="true" is placed on the parent li.

Dropdown PositioningDropdown Positioning › Top LeftDropdown Positioning › TopDropdown Positioning › Top RightDropdown Positioning › Bottom LeftDropdown Positioning › BottomDropdown Positioning › Bottom RightDropdown Positioningdev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
  <button class="slds-button slds-button--icon-container" aria-haspopup="true" title="settings">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
    </svg>
    <span class="slds-assistive-text">Settings</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-nubbin--top-left">
    <ul class="slds-dropdown__list" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="0">
          <span class="slds-truncate">Menu Item One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Two</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Three</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Positioning helpers allow the developer to position a dropdown menu. The default location is top and center. When the dropdown is activated, it is at the center base of the target and expands down.

A dropdown may also be positioned with the bottom above its target using slds-dropdown--bottom. Horizontal modifiers can be added to either top or bottom positioned dropdowns using slds-dropdown--left or slds-dropdown--right.

Dropdown HeightDropdown Height › 5 itemsDropdown Height › 7 itemsDropdown Height › 10 itemsDropdown Height › 5 items with iconDropdown Height › 7 items with iconDropdown Height › 10 items with iconDropdown Heightdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" title="Show More">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--small">
    <ul class="slds-dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="0">
          <span class="slds-truncate">Menu Item One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Two</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Three</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Four</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Five</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Six</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Seven</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Eight</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Nine</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Menu Item Ten</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Action OverflowAction Overflowdev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
  <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="Show More">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--actions">
    <ul class="slds-dropdown__list" role="menu">
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="0">
          <span class="slds-truncate">Action One</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Action Two</span>
        </a>
      </li>
      <li class="slds-dropdown__item" role="presentation">
        <a href="javascript:void(0);" role="menuitem" tabindex="-1">
          <span class="slds-truncate">Action Three</span>
        </a>
      </li>
    </ul>
  </div>
</div>

An action overflow is a list of actions that are usually secondary or tertiary to a task. These are usually utility actions like edit, delete, etc.

Dynamic ListDynamic List › 0 itemsDynamic List › 1 itemDynamic List › < 10 itemsDynamic List › > 10 itemsDynamic Listdev ready

Preview

Code

<section class="slds-popover slds-nubbin--top-right" role="dialog" aria-describedby="dialog-body-id-43">
  <div class="slds-popover__body slds-p-around--medium" id="dialog-body-id-43">
    <h3 class="slds-text-title--caps slds-m-bottom--x-small" role="presentation">My Favorites</h3>
    <p>You can favorite any page!</p>
  </div>
  <footer class="slds-popover__footer slds-p-horizontal--none">
    <ul>
      <li>
        <button class="slds-button slds-lookup__item-action slds-lookup__item-action--label">
          <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>Favorite this page</button>
      </li>
      <li>
        <button class="slds-button slds-lookup__item-action slds-lookup__item-action--label">
          <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
          </svg>Edit Favorites</button>
      </li>
    </ul>
  </footer>
</section>

Component Overview

The unordered menu list with [role="menu"] should be contained in a <div> with the class .slds-dropdown.

The target HTML element and dropdown need to be wrapped in the class .slds-dropdown-trigger dropdown-trigger--click. When the button is clicked, use JS to add the class .slds-is-open to the wrapper. This is what causes the menu to appear. When the user makes a selection, remove the .slds-is-open class to close the menu.

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.

See the Component Overview table for further nubbin support.

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 <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

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-dropdown
Applied to:

<div>

Outcome:

Initializes dropdown

Required:

Required

Comments:

Applies positioning and container styles, by default, dropdown appears below and center of target

.slds-dropdown-trigger
Deprecated
Applied to:

<div>

Outcome:

Enables dropdown to show on hover

Required:

No, optional element or modifier

Comments:

The target HTML element and dropdown need to be wrapped in this class

.slds-dropdown-trigger--click
Applied to:

any element

Outcome:

Modifier that enables dropdown to show on click

Required:

No, optional element or modifier

Comments:

Forces display:none on dropdown, applying .slds-is-open to .slds-dropdown-trigger will show the dropdown

.slds-dropdown__item
Applied to:

<li>

Outcome:

Initializes dropdown item

Required:

Required

Comments:

--

.slds-dropdown--bottom
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to above target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--left
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to left side of target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--right
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to right side of target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--small
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 15rem/240px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--medium
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 20rem/320px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--large
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 25rem/400px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown__header
Applied to:

Outcome:

Adds padding to area above dropdown menu list

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-left
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-right
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-left
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-right
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-5
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 5 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 7 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-10
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 10 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-with-icon-5
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 5 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-dropdown--length-with-icon-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 7 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-dropdown--length-with-icon-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 10 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-is-selected
Applied to:

.slds-dropdown__item

Outcome:

Applies selected state to dropdown item

Required:

No, optional element or modifier

Comments:

Class modifies the visibility of .slds-icon-selected

.slds-icon--selected
Applied to:

<svg>

Outcome:

Creates icon when a user selects a .slds-dropdown__item

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--nubbin-top
Applied to:

.slds-dropdown

Outcome:

Applies triangle indicator pointing at content

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon
Applied to:

.slds-dropdown__item

Outcome:

Lets dropdown item know how to position icon

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon--left
Applied to:

.slds-dropdown__item

Outcome:

Position icon in dropdown item to the left

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon--right
Applied to:

.slds-dropdown__item

Outcome:

Position icon in dropdown item to the right

Required:

No, optional element or modifier

Comments:

Deprecated