<!--
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.
--><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-kxgh8yuutv8-trigger"aria-controls="example-kxgh8yuutv8"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options"tabindex="-1"role="menu"aria-labelledby="example-kxgh8yuutv8-trigger"data-floating-menu-direction="bottom"id="example-kxgh8yuutv8"><liclass="bx--overflow-menu-options__option "><buttonclass="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><spanclass="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><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"disabled><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></button></li></ul></div><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-djwb4zbbx7i-trigger"aria-controls="example-djwb4zbbx7i"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options bx--overflow-menu--flip"tabindex="-1"data-floating-menu-direction="bottom"role="menu"aria-labelledby="example-djwb4zbbx7i-trigger"id="example-djwb4zbbx7i"><liclass="bx--overflow-menu-options__option "><buttonclass="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><spanclass="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><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"disabled><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></button></li></ul></div><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-rkbmpojjviq-trigger"aria-controls="example-rkbmpojjviq"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options bx--overflow-menu--flip"tabindex="-1"data-floating-menu-direction="bottom"role="menu"aria-labelledby="example-rkbmpojjviq-trigger"id="example-rkbmpojjviq"><liclass="bx--overflow-menu-options__option"><ahref="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><spanclass="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><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></a></li><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></a></li><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></a></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"tabindex="-1"aria-disabled="true"><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></a></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></a></li></ul></div>
<!--
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.
--><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-kxgh8yuutv8-trigger"aria-controls="example-kxgh8yuutv8"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options"tabindex="-1"role="menu"aria-labelledby="example-kxgh8yuutv8-trigger"data-floating-menu-direction="top"id="example-kxgh8yuutv8"><liclass="bx--overflow-menu-options__option "><buttonclass="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><spanclass="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><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"disabled><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></button></li></ul></div><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-djwb4zbbx7i-trigger"aria-controls="example-djwb4zbbx7i"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options bx--overflow-menu--flip"tabindex="-1"data-floating-menu-direction="top"role="menu"aria-labelledby="example-djwb4zbbx7i-trigger"id="example-djwb4zbbx7i"><liclass="bx--overflow-menu-options__option "><buttonclass="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><spanclass="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><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></button></li><liclass="bx--overflow-menu-options__option "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"disabled><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></button></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger "><buttonclass="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></button></li></ul></div><divdata-overflow-menuclass="bx--overflow-menu"><buttonclass="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-rkbmpojjviq-trigger"aria-controls="example-rkbmpojjviq"><spanclass="bx--assistive-text">Overflow</span><svgfocusable="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"><circlecx="8"cy="3"r="1"></circle><circlecx="8"cy="8"r="1"></circle><circlecx="8"cy="13"r="1"></circle></svg></button><ulclass="bx--overflow-menu-options bx--overflow-menu--flip"tabindex="-1"data-floating-menu-direction="top"role="menu"aria-labelledby="example-rkbmpojjviq-trigger"id="example-rkbmpojjviq"><liclass="bx--overflow-menu-options__option"><ahref="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><spanclass="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><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 2
</span></a></li><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 3
</span></a></li><liclass="bx--overflow-menu-options__option"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Option 4
</span></a></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--disabled"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"tabindex="-1"aria-disabled="true"><spanclass="bx--overflow-menu-options__option-content">
Disabled
</span></a></li><liclass="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger"><ahref="https://www.ibm.com"class="bx--overflow-menu-options__btn"role="menuitem"><spanclass="bx--overflow-menu-options__option-content">
Danger option
</span></a></li></ul></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
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>: