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

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';
import CwMenu from '@cordwainer/cw-elements/dist/react/menu';
import CwMenuItem from '@cordwainer/cw-elements/dist/react/menu-item';

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

Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.

Examples

In Dropdowns

Menus work really well when used inside dropdowns.

Edit

Cut

Copy

Paste

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

import CwButton from '@cordwainer/cw-elements/dist/react/button';
import CwDropdown from '@cordwainer/cw-elements/dist/react/dropdown';
import CwMenu from '@cordwainer/cw-elements/dist/react/menu';
import CwMenuItem from '@cordwainer/cw-elements/dist/react/menu-item';

const App = () => (
  <CwDropdown>
    <CwButton slot="trigger" caret>Edit</CwButton>
    <CwMenu>
      <CwMenuItem value="cut">Cut</CwMenuItem>
      <CwMenuItem value="copy">Copy</CwMenuItem>
      <CwMenuItem value="paste">Paste</CwMenuItem>
    </CwMenu>
  </CwDropdown>
);

Submenus

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

Undo

Redo

Cut

Copy

Paste

Find

Find…

Find Next

Find Previous

Transformations

Make uppercase

Make lowercase

Capitalize

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

import CwDivider from '@cordwainer/cw-elements/dist/react/divider';
import CwMenu from '@cordwainer/cw-elements/dist/react/menu';
import CwMenuItem from '@cordwainer/cw-elements/dist/react/menu-item';

const App = () => (
  <CwMenu style={{ maxWidth: '200px' }}>
    <CwMenuItem value="undo">Undo</CwMenuItem>
    <CwMenuItem value="redo">Redo</CwMenuItem>
    <CwDivider />
    <CwMenuItem value="cut">Cut</CwMenuItem>
    <CwMenuItem value="copy">Copy</CwMenuItem>
    <CwMenuItem value="paste">Paste</CwMenuItem>
    <CwDivider />
    <CwMenuItem>
      Find
      <CwMenu slot="submenu">
        <CwMenuItem value="find">Find…</CwMenuItem>
        <CwMenuItem value="find-previous">Find Next</CwMenuItem>
        <CwMenuItem value="find-next">Find Previous</CwMenuItem>
      </CwMenu>
    </CwMenuItem>
    <CwMenuItem>
      Transformations
      <CwMenu slot="submenu">
        <CwMenuItem value="uppercase">Make uppercase</CwMenuItem>
        <CwMenuItem value="lowercase">Make lowercase</CwMenuItem>
        <CwMenuItem value="capitalize">Capitalize</CwMenuItem>
      </CwMenu>
    </CwMenuItem>
  </CwMenu>
);

As a UX best practice, avoid using more than one level of submenus when possible.

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.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.1.1/cdn/components/menu/menu.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.1.1/cdn/components/menu/menu.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/menu/menu.js';

To import this component as a React component:

import CwMenu from '@cordwainer/cw-elements/dist/react/menu';

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
`cw-select`	`onCwSelect`	Emitted when a menu item is selected.	`{ item: CwMenuItem }`

Learn more about events.