Default Gray Amethyst

Menu

<mo-menu> | MOMenu
Since 1.0 stable

Menus provide a list of options for the user to choose from.

You can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.

Undo Redo Cut Copy Paste Delete 
<mo-menu style="max-width: 200px;">
  <mo-menu-item value="undo">Undo</mo-menu-item>
  <mo-menu-item value="redo">Redo</mo-menu-item>
  <mo-divider></mo-divider>
  <mo-menu-item value="cut">Cut</mo-menu-item>
  <mo-menu-item value="copy">Copy</mo-menu-item>
  <mo-menu-item value="paste">Paste</mo-menu-item>
  <mo-menu-item value="delete">Delete</mo-menu-item>
</mo-menu>

import { MODivider, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOMenu style={{ maxWidth: '200px' }}>
    <MOMenuItem value="undo">Undo</MOMenuItem>
    <MOMenuItem value="redo">Redo</MOMenuItem>
    <MODivider />
    <MOMenuItem value="cut">Cut</MOMenuItem>
    <MOMenuItem value="copy">Copy</MOMenuItem>
    <MOMenuItem value="paste">Paste</MOMenuItem>
    <MOMenuItem value="delete">Delete</MOMenuItem>
  </MOMenu>
);

Examples

In Dropdowns

Menus work really well when used inside dropdowns.

Edit Cut Copy Paste 
<mo-dropdown>
  <mo-button slot="trigger" caret>Edit</mo-button>
  <mo-menu>
    <mo-menu-item value="cut">Cut</mo-menu-item>
    <mo-menu-item value="copy">Copy</mo-menu-item>
    <mo-menu-item value="paste">Paste</mo-menu-item>
  </mo-menu>
</mo-dropdown>

import MOButton from '@metsooutotec/modes-web-components/dist/react/button';
import MODropdown from '@metsooutotec/modes-web-components/dist/react/dropdown';
import MOMenu from '@metsooutotec/modes-web-components/dist/react/menu';
import MOMenuItem from '@metsooutotec/modes-web-components/dist/react/menu-item';
const App = () => (
  <MODropdown>
    <MOButton slot="trigger" caret>Edit</MOButton>
    <MOMenu>
      <MOMenuItem value="cut">Cut</MOMenuItem>
      <MOMenuItem value="copy">Copy</MOMenuItem>
      <MOMenuItem value="paste">Paste</MOMenuItem>
    </MOMenu>
  </MODropdown>
);

To create a submenu, nest an <mo-menu slot="submenu"> in any menu item.

Undo Redo Cut Copy Paste Find Find… Find Next Find Previous Transformations Make uppercase Make lowercase Capitalize 
<mo-menu style="max-width: 200px;">
  <mo-menu-item value="undo">Undo</mo-menu-item>
  <mo-menu-item value="redo">Redo</mo-menu-item>
  <mo-divider></mo-divider>
  <mo-menu-item value="cut">Cut</mo-menu-item>
  <mo-menu-item value="copy">Copy</mo-menu-item>
  <mo-menu-item value="paste">Paste</mo-menu-item>
  <mo-divider></mo-divider>
  <mo-menu-item>
    Find
    <mo-menu slot="submenu">
      <mo-menu-item value="find">Find…</mo-menu-item>
      <mo-menu-item value="find-previous">Find Next</mo-menu-item>
      <mo-menu-item value="find-next">Find Previous</mo-menu-item>
    </mo-menu>
  </mo-menu-item>
  <mo-menu-item>
    Transformations
    <mo-menu slot="submenu">
      <mo-menu-item value="uppercase">Make uppercase</mo-menu-item>
      <mo-menu-item value="lowercase">Make lowercase</mo-menu-item>
      <mo-menu-item value="capitalize">Capitalize</mo-menu-item>
    </mo-menu>
  </mo-menu-item>
</mo-menu>

import MODivider from '@metsooutotec/modes-web-components/dist/react/divider';
import MOMenu from '@metsooutotec/modes-web-components/dist/react/menu';
import MOMenuItem from '@metsooutotec/modes-web-components/dist/react/menu-item';
const App = () => (
  <MOMenu style={{ maxWidth: '200px' }}>
    <MOMenuItem value="undo">Undo</MOMenuItem>
    <MOMenuItem value="redo">Redo</MOMenuItem>
    <MODivider />
    <MOMenuItem value="cut">Cut</MOMenuItem>
    <MOMenuItem value="copy">Copy</MOMenuItem>
    <MOMenuItem value="paste">Paste</MOMenuItem>
    <MODivider />
    <MOMenuItem>
      Find
      <MOMenu slot="submenu">
        <MOMenuItem value="find">Find…</MOMenuItem>
        <MOMenuItem value="find-previous">Find Next</MOMenuItem>
        <MOMenuItem value="find-next">Find Previous</MOMenuItem>
      </MOMenu>
    </MOMenuItem>
    <MOMenuItem>
      Transformations
      <MOMenu slot="submenu">
        <MOMenuItem value="uppercase">Make uppercase</MOMenuItem>
        <MOMenuItem value="lowercase">Make lowercase</MOMenuItem>
        <MOMenuItem value="capitalize">Capitalize</MOMenuItem>
      </MOMenu>
    </MOMenuItem>
  </MOMenu>
);

Density

You can adjust the visual density of the menu items inside the menu using the density attribute. density = "compact" optimizes for showing a lot of options, while density = "loose" optimizes readability for actions with visually busy content.

Undo Redo Show toolbar Cut Copy Paste Delete Undo Redo Show toolbar Cut Copy Paste Delete 
<div style="display: flex; gap: 2rem;">
  <mo-menu density="compact" style="flex: 1 1 auto;">
    <mo-menu-item value="undo">Undo</mo-menu-item>
    <mo-menu-item value="redo">Redo</mo-menu-item>
    <mo-divider></mo-divider>
    <mo-menu-item type="checkbox" checked value="toolbar">Show toolbar</mo-menu-item>
    <mo-divider></mo-divider>
    <mo-menu-item value="cut">Cut</mo-menu-item>
    <mo-menu-item value="copy">Copy</mo-menu-item>
    <mo-menu-item value="paste">Paste</mo-menu-item>
    <mo-menu-item value="delete">Delete</mo-menu-item>
  </mo-menu>

  <mo-menu density="loose" style="flex: 1 1 auto;">
    <mo-menu-item value="undo">Undo</mo-menu-item>
    <mo-menu-item value="redo">Redo</mo-menu-item>
    <mo-divider></mo-divider>
    <mo-menu-item type="checkbox" checked value="toolbar">Show toolbar</mo-menu-item>
    <mo-divider></mo-divider>
    <mo-menu-item value="cut">Cut</mo-menu-item>
    <mo-menu-item value="copy">Copy</mo-menu-item>
    <mo-menu-item value="paste">Paste</mo-menu-item>
    <mo-menu-item value="delete">Delete</mo-menu-item>
  </mo-menu>
</div>

import { MODivider, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOMenu style={{ maxWidth: '200px' }}>
    <MOMenuItem value="undo">Undo</MOMenuItem>
    <MOMenuItem value="redo">Redo</MOMenuItem>
    <MODivider />
    <MOMenuItem value="cut">Cut</MOMenuItem>
    <MOMenuItem value="copy">Copy</MOMenuItem>
    <MOMenuItem value="paste">Paste</MOMenuItem>
    <MOMenuItem value="delete">Delete</MOMenuItem>
  </MOMenu>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/menu/menu.js';

To import this component as a React component:

import MOMenu from '@metsooutotec/modes-web-components/dist/react/menu/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/menu/menu.js"></script>

Slots

Name Description
(default) The menu’s content, including menu items, menu labels, and dividers.

Learn more about using slots.

Events

Name React Event Description Event Detail
mo-select onMoSelect Emitted when a menu item is selected. { item: MOMenuItem }

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.