Overflow menu

Overflow menu

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-877b5paqv1-trigger" aria-controls="example-877b5paqv1">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options" tabindex="-1" role="menu"
    aria-labelledby="example-877b5paqv1-trigger" data-floating-menu-direction="bottom"
    id="example-877b5paqv1">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
            data-floating-menu-primary-focus  >
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"    disabled >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </button>
      </li>
    </ul>
    <!-- Note: focusable span allows for focus wrap feature within Overflow Menus -->
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-whzzygfa5oq-trigger" aria-controls="example-whzzygfa5oq">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="bottom" role="menu" aria-labelledby="example-whzzygfa5oq-trigger"
    id="example-whzzygfa5oq">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
            data-floating-menu-primary-focus  >
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"    disabled >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </button>
      </li>
    </ul>
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-qztjk1hc1u9-trigger" aria-controls="example-qztjk1hc1u9">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="bottom" role="menu" aria-labelledby="example-qztjk1hc1u9-trigger"
    id="example-qztjk1hc1u9">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" 
          title="An example option that is really long to show what should be done to handle long text"   data-floating-menu-primary-focus>
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  
          tabindex="-1" aria-disabled="true" >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </a>
      </li>
    </ul>
    <span tabindex="0"></span>
  </div>
</div>

Overflow menu up

Vanilla JS
React Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->
<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--right bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-877b5paqv1-trigger" aria-controls="example-877b5paqv1">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options" tabindex="-1" role="menu"
    aria-labelledby="example-877b5paqv1-trigger" data-floating-menu-direction="top"
    id="example-877b5paqv1">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
            data-floating-menu-primary-focus  >
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"    disabled >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </button>
      </li>
    </ul>
    <!-- Note: focusable span allows for focus wrap feature within Overflow Menus -->
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-whzzygfa5oq-trigger" aria-controls="example-whzzygfa5oq">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="top" role="menu" aria-labelledby="example-whzzygfa5oq-trigger"
    id="example-whzzygfa5oq">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"  title="An example option that is really long to show what should be done to handle long text"
            data-floating-menu-primary-focus  >
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option  bx--overflow-menu-options__option--disabled  ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"    disabled >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </button>
      </li>
      <li
        class="bx--overflow-menu-options__option   bx--overflow-menu-options__option--danger ">
        <button class="bx--overflow-menu-options__btn" role="menuitem"   >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </button>
      </li>
    </ul>
    <span tabindex="0"></span>
  </div>
</div>

<div data-overflow-menu class="bx--overflow-menu">
  <button
    class="bx--overflow-menu__trigger bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--left bx--tooltip--align-start"
    aria-haspopup="true" aria-expanded="false" id="example-qztjk1hc1u9-trigger" aria-controls="example-qztjk1hc1u9">
    <span class="bx--assistive-text">Overflow</span>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
  </button>
  <div class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1"
    data-floating-menu-direction="top" role="menu" aria-labelledby="example-qztjk1hc1u9-trigger"
    id="example-qztjk1hc1u9">
    <ul  class="bx--overflow-menu-options__content">
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem" 
          title="An example option that is really long to show what should be done to handle long text"   data-floating-menu-primary-focus>
          <span class="bx--overflow-menu-options__option-content">
            An example option that is really long to show what should be done to handle long text
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 2
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 3
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Option 4
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  
          tabindex="-1" aria-disabled="true" >
          <span class="bx--overflow-menu-options__option-content">
            Disabled
          </span>
        </a>
      </li>
      <li
        class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
        <a href="https://www.ibm.com" class="bx--overflow-menu-options__btn" role="menuitem"  >
          <span class="bx--overflow-menu-options__option-content">
            Danger option
          </span>
        </a>
      </li>
    </ul>
    <span tabindex="0"></span>
  </div>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--overflow-menu-options class.

Selector Description
.bx--overflow-menu--flip Reverse the direction of the overflow menu.
.bx--overflow-menu-options--open Displays the overflow menu options.

JavaScript

Getting component class reference

ES2015
import { OverflowMenu } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var OverflowMenu = CarbonComponents.OverflowMenu;

Instantiating

// `#my-overflow-menu` is an element with `[data-overflow-menu]` attribute
OverflowMenu.create(document.getElementById('my-overflow-menu'));

Public Methods

Name Params Description
shouldStateBeChanged state: String Return true if the given state is different from the current state
release Deletes the instance and removes document event listeners

Options

Option Default Selector Description
selectorInit [data-overflow-menu] The CSS selector to find menu
selectorPlacementScope body The CSS selector to find the element you wish the append the menu contents to
selectorOptionMenu .bx--overflow-menu-options The CSS selector to find the contents of the menu
objMenuOffset { top: 3, left: 61 } An object containing the top and left offset values in px
objMenuOffsetFlip { top: 3, left: -61 } An object containing the top and left offset values in px for the "flipped" state
Example - Changing menu position by 8 pixels vertically
// `#my-overflow-menu` is an element with `[data-overflow-menu]` attribute
OverflowMenu.create(document.getElementById('my-overflow-menu'), {
  objMenuOffset(menuBody, direction) {
    const { objMenuOffset: offset } = OverflowMenu.options;
    const { top, left } =
      typeof offset !== 'function' ? offset : offset(menuBody, direction);
    return {
      top: top + 8,
      left,
    };
  },
});

Events

Event Name Description
'floating-menu-beingshown' The custom event fired before the menu gets open.
'floating-menu-shown' The custom event fired after the menu gets open.
'floating-menu-beinghidden' The custom event fired before the menu gets closed.
'floating-menu-hidden' The custom event fired after the menu gets closed.
Example - Preventing menu from being closed in a certain condition
document.addEventListener('floating-menu-beinghidden', function(evt) {
  if (myApplication.shouldMenuKeptOpen(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all overflow menus being closed to an analytics library
document.addEventListener('floating-menu-hidden', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Overflow menu closed',
    id: evt.target.id,
  });
});

HTML

By default, the menu body (ul.bx--overflow-menu-options) goes right under <body>. To ensure the proper accessibility experience, add data-floating-menu-container to one of the DOM ancestors of the root element (div[data-overflow-menu]). For example, if you have HTML structure like below, the menu body will go under the second <div>:

<body>
  <div>
    <div data-floating-menu-container>
      <div>
        <div data-overflow-menu class="bx--overflow-menu" ...>
          ...
          <ul class="bx--overflow-menu-options" ...>
            ...
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
Edit this page on GitHub
Previous
Components: Number input
Next
Overflow menu: Usage