Menus are just like the context menu you often see in most web browsers and applications. They are really helpful components because they don’t take up any permanent space on the UI; they are hidden until the user clicks the related anchor element.
Normally, the menu opens below its anchor element while still preserving the overflowing outside the viewport. If there isn’t enough space at the bottom of the anchor element to display the menu, the menu will try to be displayed above, left, or right.
<button
class="flexy-button flexy-button--circular"
id="menu-anchor-1"
aria-label="Open menu"
>
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="menu"><path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"/></svg>
</span>
</button>
<div class="flexy-menu" aria-labelledby="menu-anchor-1">
<div class="flexy-menuitem">Copy</div>
<div class="flexy-menuitem">Cut</div>
<div class="flexy-menuitem">Paste</div>
</div>
Menu items can include a leading icon, trailing icon, and trailing text. Trailing text is primarily used to display the keyboard shortcut of that menu item, and they are displayed in a lower contrast than the item’s label.
<button
class="flexy-button flexy-button--circular"
id="menu-anchor-2"
aria-label="Open menu"
>
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="menu"><path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"/></svg>
</span>
</button>
<div class="flexy-menu" aria-labelledby="menu-anchor-2">
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content copy"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Zm160-240v-480 480Z"/></svg>
</span>
<span>Copy</span>
<span class="flexy-menuitem__trailing-text">Ctrl+C</span>
</div>
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content cut"><path d="m480-400-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l438 438q27 27 12 61.5T783-120q-11 0-21.5-4.5T743-137L480-400Zm120-120-80-80 223-223q8-8 18.5-12.5T783-840q38 0 52.5 35T823-743L600-520ZM240-640q33 0 56.5-23.5T320-720q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720q0 33 23.5 56.5T240-640Zm240 180q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM240-160q33 0 56.5-23.5T320-240q0-33-23.5-56.5T240-320q-33 0-56.5 23.5T160-240q0 33 23.5 56.5T240-160Z"/></svg>
</span>
<span>Cut</span>
<span class="flexy-menuitem__trailing-text">Ctrl+X</span>
</div>
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content paste"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v80q0 17-11.5 28.5T640-640H320q-17 0-28.5-11.5T280-680v-80h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/></svg>
</span>
<span>Paste</span>
<span class="flexy-menuitem__trailing-text">Ctrl+V</span>
</div>
</div>
Menus can also include nested submenus that also contain other nested submenus. However, using deeply nested menus isn’t recommended; they can be hard to navigate and confuse the user.
<button
class="flexy-button flexy-button--circular"
id="menu-anchor-3"
aria-label="Open menu"
>
<span class="material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="menu"><path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"/></svg>
</span>
</button>
<div class="flexy-menu" aria-labelledby="menu-anchor-3">
<div class="flexy-menuitem" id="submenu-anchor-3-1">
<span class="flexy-menuitem__leading-icon"></span>
<span>Open</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div
class="flexy-menu"
aria-labelledby="submenu-anchor-3-1"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem" id="submenu-anchor-3-chrome">
<span>Open in Chrome</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div
class="flexy-menu"
aria-labelledby="submenu-anchor-3-chrome"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">
<span>Open in Current Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in New Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in Private Window</span>
</div>
</div>
<div class="flexy-menuitem" id="submenu-anchor-3-firefox">
<span>Open in Firefox</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div
class="flexy-menu"
aria-labelledby="submenu-anchor-3-firefox"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">
<span>Open in Current Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in New Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in Private Window</span>
</div>
</div>
<div class="flexy-menuitem" id="submenu-anchor-3-safari">
<span>Open in Safari</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div
class="flexy-menu"
aria-labelledby="submenu-anchor-3-safari"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">
<span>Open in Current Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in New Window</span>
</div>
<div class="flexy-menuitem">
<span>Open in Private Window</span>
</div>
</div>
</div>
<hr />
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content copy"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Zm160-240v-480 480Z"/></svg>
</span>
<span>Copy</span>
<span class="flexy-menuitem__trailing-text">Ctrl+C</span>
</div>
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content cut"><path d="m480-400-94 94q8 15 11 32t3 34q0 66-47 113T240-80q-66 0-113-47T80-240q0-66 47-113t113-47q17 0 34 3t32 11l94-94-94-94q-15 8-32 11t-34 3q-66 0-113-47T80-720q0-66 47-113t113-47q66 0 113 47t47 113q0 17-3 34t-11 32l438 438q27 27 12 61.5T783-120q-11 0-21.5-4.5T743-137L480-400Zm120-120-80-80 223-223q8-8 18.5-12.5T783-840q38 0 52.5 35T823-743L600-520ZM240-640q33 0 56.5-23.5T320-720q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720q0 33 23.5 56.5T240-640Zm240 180q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM240-160q33 0 56.5-23.5T320-240q0-33-23.5-56.5T240-320q-33 0-56.5 23.5T160-240q0 33 23.5 56.5T240-160Z"/></svg>
</span>
<span>Cut</span>
<span class="flexy-menuitem__trailing-text">Ctrl+X</span>
</div>
<div class="flexy-menuitem">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="content paste"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v80q0 17-11.5 28.5T640-640H320q-17 0-28.5-11.5T280-680v-80h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/></svg>
</span>
<span>Paste</span>
<span class="flexy-menuitem__trailing-text">Ctrl+V</span>
</div>
<hr />
<div class="flexy-menuitem" id="submenu-anchor-3-2">
<span class="flexy-menuitem__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="compress"><path d="M200-400q-17 0-28.5-11.5T160-440q0-17 11.5-28.5T200-480h560q17 0 28.5 11.5T800-440q0 17-11.5 28.5T760-400H200Zm0-120q-17 0-28.5-11.5T160-560q0-17 11.5-28.5T200-600h560q17 0 28.5 11.5T800-560q0 17-11.5 28.5T760-520H200ZM480-80q-17 0-28.5-11.5T440-120v-88l-36 36q-11 11-28 11t-28-11q-11-11-11-28t11-28l104-104q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l104 104q11 11 11.5 27.5T612-172q-11 11-27.5 11.5T556-171l-36-35v86q0 17-11.5 28.5T480-80Zm0-577q-8 0-15-2.5t-13-8.5L348-772q-11-11-11-28t11-28q11-11 28-11t28 11l36 36v-88q0-17 11.5-28.5T480-920q17 0 28.5 11.5T520-880v88l36-36q11-11 28-11t28 11q11 11 11 28t-11 28L508-668q-6 6-13 8.5t-15 2.5Z"/></svg>
</span>
<span>Compress</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div
class="flexy-menu"
aria-labelledby="submenu-anchor-3-2"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">
<span>Compress Using GZIP</span>
</div>
<div class="flexy-menuitem">
<span>Compress Using BZIP</span>
</div>
<div class="flexy-menuitem">
<span>Compress Using 7ZIP</span>
</div>
</div>
</div>
The menu supports above, below, left, and right placements relative to its anchor element. Default placement is below. You can modify the placement using data-flexy-menu-placement attribute.
<div class="flex-row">
<button class="flexy-button" id="menu-anchor-3-above">
<span>Above</span>
</button>
<div
class="flexy-menu"
aria-labelledby="menu-anchor-3-above"
data-flexy-menu-placement="above"
>
<div class="flexy-menuitem">Copy</div>
<div class="flexy-menuitem">Cut</div>
<div class="flexy-menuitem">Paste</div>
</div>
<button class="flexy-button" id="menu-anchor-3-below">
<span>Below</span>
</button>
<div
class="flexy-menu"
aria-labelledby="menu-anchor-3-below"
data-flexy-menu-placement="below"
>
<div class="flexy-menuitem">Copy</div>
<div class="flexy-menuitem">Cut</div>
<div class="flexy-menuitem">Paste</div>
</div>
<button class="flexy-button" id="menu-anchor-3-left">
<span>Left</span>
</button>
<div
class="flexy-menu"
aria-labelledby="menu-anchor-3-left"
data-flexy-menu-placement="left"
>
<div class="flexy-menuitem">Copy</div>
<div class="flexy-menuitem">Cut</div>
<div class="flexy-menuitem">Paste</div>
</div>
<button class="flexy-button" id="menu-anchor-3-right">
<span>Right</span>
</button>
<div
class="flexy-menu"
aria-labelledby="menu-anchor-3-right"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">Copy</div>
<div class="flexy-menuitem">Cut</div>
<div class="flexy-menuitem">Paste</div>
</div>
</div>
You can also use FlexyMenu as a context menu by adding the flexy-menu--contextmenu CSS class name. The context menu will open on right-click at the near of the cursor. Submenus cannot be context menus.
<div class="flex-row">
<div
style="
border: 1px solid #80808080;
color: var(--flexy-sys-palette-grey-80);
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 200px;
user-select: none;
"
id="menu-anchor-5"
>
Right-Click on Me
</div>
<div
class="flexy-menu flexy-menu--contextmenu"
aria-labelledby="menu-anchor-5"
>
<div class="flexy-menuitem">Pause</div>
<div class="flexy-menuitem">Mute</div>
<div class="flexy-menuitem" id="menu-anchor-5-submenu">
<span>Speed</span>
<span class="flexy-menuitem__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="keyboard arrow right"><path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z"/></svg>
</span>
</div>
<div class="flexy-menuitem">Show controls</div>
<div
class="flexy-menu"
aria-labelledby="menu-anchor-5-submenu"
data-flexy-menu-placement="right"
>
<div class="flexy-menuitem">0.25x</div>
<div class="flexy-menuitem">0.5x</div>
<div class="flexy-menuitem">1x</div>
<div class="flexy-menuitem">1.25x</div>
<div class="flexy-menuitem">1.5x</div>
<div class="flexy-menuitem">2x</div>
</div>
</div>
</div>
Flexy menus are fully compatible with WAI-ARIA keyboard navigation standards.
Refer to the W3C Menu Accessibility Guidelines.
flexy-menuflexy-menuitemflexy-menuitem__leading-iconflexy-menuitem__trailing-iconflexy-menuitem__trailing-textcontainer-colorcontainer-paddingcontainer-shapecontainer-shadowdivider-spacingdivider-coloritem-content-spacingitem-heightitem-icon-sizeitem-label-coloritem-paddingitem-shapeitem-leading-icon-coloritem-trailing-icon-coloritem-trailing-text-coloritems-spacingclose-animation-durationLast modified: Oct 20, 2025: docs: Fix summary breakpoints in components pages (5ac5ea3)