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-htiyymy3gt-trigger" aria-controls="example-htiyymy3gt">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></circle></svg>
</button>
<div class="bx--overflow-menu-options" tabindex="-1" role="menu"
aria-labelledby="example-htiyymy3gt-trigger" data-floating-menu-direction="bottom"
id="example-htiyymy3gt">
<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-byrfhsmjpnf-trigger" aria-controls="example-byrfhsmjpnf">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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-byrfhsmjpnf-trigger"
id="example-byrfhsmjpnf">
<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-y7e7c0b8tbi-trigger" aria-controls="example-y7e7c0b8tbi">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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-y7e7c0b8tbi-trigger"
id="example-y7e7c0b8tbi">
<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-htiyymy3gt-trigger" aria-controls="example-htiyymy3gt">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></circle></svg>
</button>
<div class="bx--overflow-menu-options" tabindex="-1" role="menu"
aria-labelledby="example-htiyymy3gt-trigger" data-floating-menu-direction="top"
id="example-htiyymy3gt">
<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-byrfhsmjpnf-trigger" aria-controls="example-byrfhsmjpnf">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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-byrfhsmjpnf-trigger"
id="example-byrfhsmjpnf">
<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-y7e7c0b8tbi-trigger" aria-controls="example-y7e7c0b8tbi">
<span class="bx--assistive-text">Overflow</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="8" r="2"></circle><circle cx="16" cy="16" r="2"></circle><circle cx="16" cy="24" r="2"></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-y7e7c0b8tbi-trigger"
id="example-y7e7c0b8tbi">
<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>