Overflow menu
Overflow menu
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-vnwzsy7n7kk-trigger" aria-controls="example-vnwzsy7n7kk">
<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-vnwzsy7n7kk-trigger" data-floating-menu-direction="bottom"
id="example-vnwzsy7n7kk">
<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-dqgrfungy3b-trigger" aria-controls="example-dqgrfungy3b">
<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-dqgrfungy3b-trigger"
id="example-dqgrfungy3b">
<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-aaj5esj2tem-trigger" aria-controls="example-aaj5esj2tem">
<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-aaj5esj2tem-trigger"
id="example-aaj5esj2tem">
<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
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-vnwzsy7n7kk-trigger" aria-controls="example-vnwzsy7n7kk">
<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-vnwzsy7n7kk-trigger" data-floating-menu-direction="top"
id="example-vnwzsy7n7kk">
<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-dqgrfungy3b-trigger" aria-controls="example-dqgrfungy3b">
<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-dqgrfungy3b-trigger"
id="example-dqgrfungy3b">
<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-aaj5esj2tem-trigger" aria-controls="example-aaj5esj2tem">
<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-aaj5esj2tem-trigger"
id="example-aaj5esj2tem">
<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>