OLYSENSE Design System

Undo

Redo

Cut

Copy

Paste

Delete

<ods-menu>
  <ods-menu-item value="undo">Undo</ods-menu-item>
  <ods-menu-item value="redo">Redo</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>
  <ods-menu-item value="delete">Delete</ods-menu-item>
</ods-menu>

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem value="undo">Undo</OdsMenuItem>
      <OdsMenuItem value="redo">Redo</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value="cut">Cut</OdsMenuItem>
      <OdsMenuItem value="copy">Copy</OdsMenuItem>
      <OdsMenuItem value="paste">Paste</OdsMenuItem>
      <OdsMenuItem value="delete">Delete</OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Menus work really well when used inside dropdowns.

Edit

Cut

Copy

Paste

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

import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsButton } from '@ods/components/react.button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';

const Example = () => {
  return (
    <OdsDropdown>
      <OdsButton slot="trigger">Edit</OdsButton>
      <OdsMenu>
        <OdsMenuItem value="cut">Cut</OdsMenuItem>
        <OdsMenuItem value="copy">Copy</OdsMenuItem>
        <OdsMenuItem value="paste">Paste</OdsMenuItem>
      </OdsMenu>
    </OdsDropdown>
  )
}

export default Example;

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

Menus work really well when used inside dropdowns.

Undo

Redo

Cut

Copy

Paste

Find

Find…

Find Next

Find Previous

Transformations

Make uppercase

Make lowercase

Capitalize

<ods-menu>
  <ods-menu-item value="undo">Undo</ods-menu-item>
  <ods-menu-item value="redo">Redo</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item>
    <span>Find</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="find">Find…</ods-menu-item>
      <ods-menu-item value="find-previous">Find Next</ods-menu-item>
      <ods-menu-item value="find-next">Find Previous</ods-menu-item>
    </ods-menu>
  </ods-menu-item>
  <ods-menu-item>
    <span>Transformations</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="uppercase">Make uppercase</ods-menu-item>
      <ods-menu-item value="lowercase">Make lowercase</ods-menu-item>
      <ods-menu-item value="capitalize">Capitalize</ods-menu-item>
    </ods-menu>
  </ods-menu-item>
</ods-menu>

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem value="undo">Undo</OdsMenuItem>
      <OdsMenuItem value="redo">Redo</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value="cut">Cut</OdsMenuItem>
      <OdsMenuItem value="copy">Copy</OdsMenuItem>
      <OdsMenuItem value="paste">Paste</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem>
        <span>Find</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="find">Find…</OdsMenuItem>
          <OdsMenuItem value="find-previous">Find Next</OdsMenuItem>
          <OdsMenuItem value="find-next">Find Previous</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>
      <OdsMenuItem>
        <span>Transformations</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="uppercase">Make uppercase</OdsMenuItem>
          <OdsMenuItem value="lowercase">Make lowercase</OdsMenuItem>
          <OdsMenuItem value="capitalize">Capitalize</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

See Menu Header for more information.

Undo

Redo

Cut

Copy

Paste

Find

Find…

Find Next

Find Previous

Transformations

Make uppercase

Make lowercase

Capitalize

<ods-menu class="w-[220px]">
  <ods-menu-header headline="Menu Headline" subline="Menu Subline"></ods-menu-header>
  <ods-divider></ods-divider>
  <ods-menu-item value="undo">Undo</ods-menu-item>
  <ods-menu-item value="redo">Redo</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item>
    <span>Find</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="find">Find…</ods-menu-item>
      <ods-menu-item value="find-previous">Find Next</ods-menu-item>
      <ods-menu-item value="find-next">Find Previous</ods-menu-item>
    </ods-menu>
  </ods-menu-item>
  <ods-menu-item>
    <span>Transformations</span>
    <ods-menu slot="submenu">
      <ods-menu-item value="uppercase" >Make uppercase</ods-menu-item>
      <ods-menu-item value="lowercase">Make lowercase</ods-menu-item>
      <ods-menu-item value="capitalize">Capitalize</ods-menu-item>
    </ods-menu>
  </ods-menu-item>
</ods-menu>

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuHeader } from '@ods/components/react.menu-header';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <OdsMenu className="w-[220px]">
      <OdsMenuHeader headline="Menu Headline" subline="Menu Subline"></OdsMenuHeader>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value="undo">Undo</OdsMenuItem>
      <OdsMenuItem value="redo">Redo</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value="cut">Cut</OdsMenuItem>
      <OdsMenuItem value="copy">Copy</OdsMenuItem>
      <OdsMenuItem value="paste">Paste</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem>
        <span>Find</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="find">Find…</OdsMenuItem>
          <OdsMenuItem value="find-previous">Find Next</OdsMenuItem>
          <OdsMenuItem value="find-next">Find Previous</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>
      <OdsMenuItem>
        <span>Transformations</span>
        <OdsMenu slot="submenu">
          <OdsMenuItem value="uppercase">Make uppercase</OdsMenuItem>
          <OdsMenuItem value="lowercase">Make lowercase</OdsMenuItem>
          <OdsMenuItem value="capitalize">Capitalize</OdsMenuItem>
        </OdsMenu>
      </OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

You can listen for the ods-select event to determine which menu item was selected. The menu item element will be exposed in event.detail.item.

Cut

Copy

Paste

Find

Replace

<ods-menu id="select-example">
  <ods-menu-item value="cut">Cut</ods-menu-item>
  <ods-menu-item value="copy">Copy</ods-menu-item>
  <ods-menu-item value="paste">Paste</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item value="find">Find</ods-menu-item>
  <ods-menu-item value="replace">Replace</ods-menu-item>
</ods-menu>

<script>
  const menu = document.getElementById('select-example');

  const onSelectHandler = (event) => {
    const selectedItem = event.detail.item;

    alert(`Selected item is ${selectedItem.value}`);
  };

  menu.addEventListener('ods-select', event => onSelectHandler(event));
</script>

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';
import { OdsSelectEvent } from '@ods/components/react';

export const Example = () => {
  const onSelectHandler = (event: OdsSelectEvent) => {
    const selectedItem = event.detail.item;

    alert(`Selected item is ${selectedItem.value}`);
  };

  return (
    <OdsMenu onOdsSelect={onSelectHandler}>
      <OdsMenuItem value='cut'>Cut</OdsMenuItem>
      <OdsMenuItem value='copy'>Copy</OdsMenuItem>
      <OdsMenuItem value='paste'>Paste</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem value='find'>Find</OdsMenuItem>
      <OdsMenuItem value='replace'>Replace</OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Importing

import '@ods/components/web.menu';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

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

Events

React Event	Description	Event Detail
ods-select	Emitted when a menu item is selected.	--

Menu

Examples

Basic

In Dropdowns

Submenus

With Header

Handling An Event

Importing

Slots

Events