Skip to content

role disclosure

Dropdown draft v0.4.1

A button that opens a menu of related actions.

A dropdown gathers actions that relate to one purpose (share, export, more actions on a row) behind a single button, and shows them in a menu when the button is activated. Activating an action closes the menu. The trigger is the Button component, so it takes every emphasis, intent and size of the button. A dropdown offers actions: choosing a value is the Select component, and a button whose main action sits next to its menu is the Split button component.

Playground

JSON array of item or separator entries ("part": "separator" for a separator).

HTML 
<div class="ds-dropdown">
  <button
    type="button"
    class="ds-button ds-dropdown__trigger"
    data-emphasis="accent"
    data-intent="neutral"
    data-size="medium"
    data-part="trigger"
    id="ds-dropdown-78-trigger"
    popovertarget="ds-dropdown-78"
  >
    <span class="ds-button__label" data-part="label">Actions</span>
    <span
      class="ds-button__icon"
      data-part="icon"
      data-position="end"
      aria-hidden="true"
    >expand_more</span>
  </button>
  <div
    class="ds-dropdown__menu"
    data-part="menu"
    id="ds-dropdown-78"
    popover
    aria-labelledby="ds-dropdown-78-trigger"
  >
    <ul class="ds-dropdown__group" data-part="group">
      <li>
        <button
          type="button"
          class="ds-dropdown__item"
          data-part="item"
          data-intent="neutral"
          popovertarget="ds-dropdown-78"
          popovertargetaction="hide"
        >
          <span
            class="ds-dropdown__item-icon"
            data-part="item-icon"
            aria-hidden="true"
          >content_copy</span>
          <span
            class="ds-dropdown__item-label"
            data-part="item-label"
          >Duplicate</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          class="ds-dropdown__item"
          data-part="item"
          data-intent="neutral"
          popovertarget="ds-dropdown-78"
          popovertargetaction="hide"
        >
          <span
            class="ds-dropdown__item-icon"
            data-part="item-icon"
            aria-hidden="true"
          >edit</span>
          <span
            class="ds-dropdown__item-label"
            data-part="item-label"
          >Rename</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          class="ds-dropdown__item"
          data-part="item"
          data-intent="neutral"
          popovertarget="ds-dropdown-78"
          popovertargetaction="hide"
        >
          <span
            class="ds-dropdown__item-icon"
            data-part="item-icon"
            aria-hidden="true"
          >download</span>
          <span
            class="ds-dropdown__item-label"
            data-part="item-label"
          >Download</span>
        </button>
      </li>
    </ul>
    <hr class="ds-dropdown__separator" data-part="separator">
    <ul class="ds-dropdown__group" data-part="group">
      <li>
        <button
          type="button"
          class="ds-dropdown__item"
          data-part="item"
          data-intent="error"
          popovertarget="ds-dropdown-78"
          popovertargetaction="hide"
        >
          <span
            class="ds-dropdown__item-icon"
            data-part="item-icon"
            aria-hidden="true"
          >delete</span>
          <span
            class="ds-dropdown__item-label"
            data-part="item-label"
          >Delete project</span>
        </button>
      </li>
    </ul>
  </div>
</div>