Components

Option menus

Option menus allow us to condense multiple, secondary options into a tidy menu. You will find option menus in the corner of tiles, the end of table options and even atop section headers.

Quick look

A few things to keep in mind:

  1. Not all options menus will have a distinct button (shown below), but they will always be triggered by a vertical ellipsis icon.
  2. The triggering of the menu items themselves is determined by the developer (see the wiki)
  3. The options menu is only used for secondary options or actions. Primary actions should be evoked via their own button(s).

Try it out

Sample actions 1

(with left aligned dropdown)

Sample actions 2

(with right aligned dropdown)

Code samples

<div class="dqpl-options-menu-wrap dqpl-align-left">
  <button class="dqpl-options-menu-trigger" type="button" aria-controls="options-menu-1" aria-label="Additional Options" aria-expanded="false">
    <div class="fa fa-ellipsis-v" aria-hidden="true"></div>
  </button>
  <ul class="dqpl-options-menu" id="options-menu-1" role="menu" aria-expanded="false">
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 1</li>
    <li class="dqpl-options-menuitem" role="menuitem" aria-disabled="true" tabindex="-1">Action 2</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 3</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 4</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 5</li>
  </ul>
</div>

For more information on implementation read thewiki.