American Express American Express |

Overflow Menu

Purpose

The overflow menu is a list of actionable items that aren’t displayed in context, but revealed when selecting the icon.

Requirements

The DLS overflow menu component requires both dls.css and dls.js for functionality.

Usage

The overflow menu opens below an icon. Select an icon users will easily recognize. Use verbs and action phrases to create labels for menu items. Menu text should be left-aligned and in sentence case. The menu container should align to the left or right, depending on its placement on the page.

Example - Table Menu

Copy
<table class="table border table-bordered">
  <thead>
    <tr>
        <th>Company Name</th>
        <th>Customer Id</th>
        <th>Country</th>
        <th>Date</th>
        <th>Amount</th>
        <th class="text-align-center" width="48"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Charlie Mendez</td>
        <td>567324908234</td>
        <td>Canada</td>
        <td>Aug 19</td>
        <td>$800.76</td>
        <td class="overflow text-align-center">
          <div class="overflow-menu" data-toggle="overflowmenu">
            <button
              class="flex flex-align-items-center pad-1 focus-dark-inner"
              id="overflow1"
              aria-label="Charlie Mendez: Actions"
              aria-haspopup="true"
              aria-expanded="false"
            >
              <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
            </button>
            <ul class="border bordered" aria-labelledby="overflow1">
              <li><button>Edit</button></li>
              <li><button>Copy</button></li>
              <li><button>Move</button></li>
              <li><button>Delete</button></li>
            </ul>
          </div>
        </td>
    </tr>
    <tr>
        <td>Patty's Bakery</td>
        <td>567324901231</td>
        <td>Australia</td>
        <td>Oct 18</td>
        <td>$1,240.00</td>
        <td class="overflow text-align-center">
          <div class="overflow-menu" data-toggle="overflowmenu">
            <button
              class="flex flex-align-items-center pad-1 focus-dark-inner"
              id="overflow2"
              aria-label="Patty's Bakery: Actions"
              aria-haspopup="true"
              aria-expanded="false"
            >
              <i data-dls-icon="menu" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Menu icon"></i>
            </button>
            <ul class="border bordered" aria-labelledby="overflow2">
              <li><button>Edit</button></li>
              <li><button>Copy</button></li>
              <li><button>Move</button></li>
              <li><button>Delete</button></li>
            </ul>
          </div>
        </td>
    </tr>
  </tbody>
</table>

Example - Profile Menu

Copy
<nav class="nav nav-horizontal nav-header nav-large nav-sticky overflow dls-bright-blue-bg flex-row-reverse pad-responsive-lr">
  <div class="overflow-menu" data-toggle="overflowmenu">
    <button
      class="flex flex-align-items-center pad-1 dls-white focus-light-inner"
      id="overflow-profile"
      aria-label="Profile Actions"
      aria-haspopup="true"
      aria-expanded="false"
    >
      <i data-dls-icon="account" data-dls-icon-variant="filled" data-dls-icon-size="md" title="Profile icon"></i>
    </button>
    <ul class="border" aria-labelledby="overflow-profile">
      <li><button>Profile</button></li>
      <li><button>Notifications</button></li>
      <li><button>Settings</button></li>
      <li><button>Log Out</button></li>
    </ul>
  </div>
</nav>

Styles

Class Name Element Description Required
.overflow-menu <div> parent wrapper Parent wrapper of the trigger button and the overflow menu yes

Functionality

The DLS overflow menu component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations. If you are using dls.js, reference the attributes below for functionality.

Attribute Name Options Description Required
data-toggle overflowmenu Creates an overflow menu object; required for dls.js functionality. yes