OLYSENSE Design System

Menu items provide options for the user to pick from in a menu.

Option 1

Option 2

Option 3

Checkbox

Disabled

Prefix Icon

Suffix Icon

<ods-menu>
  <ods-menu-item>Option 1</ods-menu-item>
  <ods-menu-item>Option 2</ods-menu-item>
  <ods-menu-item>Option 3</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item type="checkbox" checked>Checkbox</ods-menu-item>
  <ods-menu-item disabled type="checkbox" checked>
    <span>Disabled</span>
    <ods-icon slot="prefix" name="frame"></ods-icon>
  </ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item>
    <span>Prefix Icon</span>
    <ods-icon slot="prefix" name="frame"></ods-icon>
  </ods-menu-item>
  <ods-menu-item>
    <span>Suffix Icon</span>
    <ods-icon slot="suffix" name="download"></ods-icon>
  </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';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem>Option 1</OdsMenuItem>
      <OdsMenuItem>Option 2</OdsMenuItem>
      <OdsMenuItem>Option 3</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem type="checkbox" checked>Checkbox</OdsMenuItem>
      <OdsMenuItem disabled type="checkbox" checked>
        <span>Disabled</span>
        <OdsIcon slot="prefix" name="frame"></OdsIcon>
      </OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem>
        <span>Prefix Icon</span>
        <OdsIcon slot="prefix" name="frame"></OdsIcon>
      </OdsMenuItem>
      <OdsMenuItem>
        <span>Suffix Icon</span>
        <OdsIcon slot="suffix" name="download"></OdsIcon>
      </OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Add content to the start and end of menu items using the prefix and suffix slots.

Treatment

Medication

<ods-menu>
  <ods-menu-item>
    <ods-icon slot="prefix" name="treatment"></ods-icon>
    <span>Treatment</span>
  </ods-menu-item>

  <ods-menu-item>
    <ods-icon slot="prefix" name="medication"></ods-icon>
    <span>Medication</span>
    <ods-icon slot="suffix" name="tumor"></ods-icon>
    <ods-badge slot="suffix" variant="primary" pill>12</ods-badge>
  </ods-menu-item>

  <ods-divider></ods-divider>

  <ods-menu-item>
    <ods-icon slot="prefix" name="print"></ods-icon>
    <span>Print</span>
  </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';
import { OdsIcon } from '@ods/components/react.icon';
import { OdsBadge } from '@ods/components/react.badge';

const Example = () => {
  return (
    <OdsMenu className="w-[250px]">
      <OdsMenuItem>
        <OdsIcon slot="prefix" name="treatment"></OdsIcon>
        <span>Treatment</span>
      </OdsMenuItem>

      <OdsMenuItem>
        <OdsIcon slot="prefix" name="medication"></OdsIcon>
        <span>Medication</span>
        <OdsIcon slot="suffix" name="tumor"></OdsIcon>
        <OdsBadge slot="suffix" variant="primary" pill>12</OdsBadge>
      </OdsMenuItem>

      <OdsDivider></OdsDivider>

      <OdsMenuItem>
        <OdsIcon slot="prefix" name="print"></OdsIcon>
        <span>Print</span>
      </OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Add the disabled attribute to disable the menu item so it cannot be selected.

Option 1

Option 2

Option 3

<ods-menu>
  <ods-menu-item>Option 1</ods-menu-item>
  <ods-menu-item disabled>Option 2</ods-menu-item>
  <ods-menu-item>Option 3</ods-menu-item>
</ods-menu>

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

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem>Option 1</OdsMenuItem>
      <OdsMenuItem disabled>Option 2</OdsMenuItem>
      <OdsMenuItem>Option 3</OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.

Checkbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you’d find in the menu of a native app.

Autosave

Check Spelling

Word Wrap

<ods-menu>
  <ods-menu-item type="checkbox">Autosave</ods-menu-item>
  <ods-menu-item type="checkbox" checked>Check Spelling</ods-menu-item>
  <ods-menu-item type="checkbox">Word Wrap</ods-menu-item>
</ods-menu>

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

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem type="checkbox">Autosave</OdsMenuItem>
      <OdsMenuItem type="checkbox" checked>Check Spelling</OdsMenuItem>
      <OdsMenuItem type="checkbox">Word Wrap</OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

The value attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the sl-select event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item’s value, its checked state, and more.

<ods-menu class="menu-value">
  <ods-menu-item value="opt-1">Option 1</ods-menu-item>
  <ods-menu-item value="opt-2">Option 2</ods-menu-item>
  <ods-menu-item value="opt-3">Option 3</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-item type="checkbox" value="opt-4">Checkbox 4</ods-menu-item>
  <ods-menu-item type="checkbox" value="opt-5">Checkbox 5</ods-menu-item>
  <ods-menu-item type="checkbox" value="opt-6">Checkbox 6</ods-menu-item>
</ods-menu>

<script>
  const menu = document.querySelector('.menu-value');

  menu.addEventListener('ods-select', event => {
    const item = event.detail.item;

    // Log value
    if (item.type === 'checkbox') {
      console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
    } else {
      console.log(`Selected value: ${item.value}`);
    }
  });
</script>

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

const Example = () => {
  function handleSelect(event: any) {
    const item = event.detail.item;

     // Toggle checked state
    if (item.type === 'checkbox' && item.checked) {
      item.checked = true;
    } else {
      item.checked = false;
    }

    // Log value
    console.log(`Selected value: ${item.value} (${item.checked ? 'checked' : 'unchecked'}))`);
  }

  return (
    <OdsMenu className="menu-value" onOdsSelect={handleSelect}>
      <OdsMenuItem value="opt-1">Option 1</OdsMenuItem>
      <OdsMenuItem value="opt-2">Option 2</OdsMenuItem>
      <OdsMenuItem value="opt-3">Option 3</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuItem type="checkbox" value="opt-4">Checkbox 4</OdsMenuItem>
      <OdsMenuItem type="checkbox" value="opt-5">Checkbox 5</OdsMenuItem>
      <OdsMenuItem type="checkbox" value="opt-6">Checkbox 6</OdsMenuItem>
    </OdsMenu>
  );
}

export default Example;

Use menu-item-label and menu-item-sublabel to display a Menu Item with a description.

<ods-menu>
  <ods-menu-item menu-item-label="English" menu-item-sublabel="United States" type="checkbox" checked></ods-menu-item>
  <ods-menu-item menu-item-label="Deutsch" menu-item-sublabel="Germany" type="checkbox"></ods-menu-item>
  <ods-menu-item menu-item-label="Español" menu-item-sublabel="Spain" type="checkbox"></ods-menu-item>
  <ods-menu-item menu-item-label="Français" menu-item-sublabel="France" type="checkbox"></ods-menu-item>
</ods-menu>

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

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuItem menu-item-label="English" menu-item-sublabel="United States" type="checkbox" checked></OdsMenuItem>
      <OdsMenuItem menu-item-label="Deutsch" menu-item-sublabel="Germany" type="checkbox"></OdsMenuItem>
      <OdsMenuItem menu-item-label="Español" menu-item-sublabel="Spain" type="checkbox"></OdsMenuItem>
      <OdsMenuItem menu-item-label="Français" menu-item-sublabel="France" type="checkbox"></OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Importing

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

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 item's label.
prefix	Used to prepend an icon or similar element to the menu item.
suffix	Used to append an icon or similar element to the menu item.
submenu	Used to denote a nested menu.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
type	'normal' \| 'checkbox'	'normal'
checked	boolean	false
value	string	''
loading	boolean	false
disabled	boolean	false
menuItemLabel menu-item-label	string	''
menuItemSubLabel menu-item-sublabel	string	''

Methods

Name	Description	Arguments
getTextLabel()	Returns a text label based on the contents of the menu item's default slot.	--

Parts

Name	Description
base	The component's base wrapper.
checked-icon	The checked icon, which is only visible when the menu item is checked.
prefix	The prefix container.
label	The menu item label.
suffix	The suffix container.
submenu-icon	The submenu icon, visible only when the menu item has a submenu (not yet implemented).

Dependencies

This component automatically imports the following dependencies.

ods-icon
ods-popup

Menu Item

Examples

Prefix & Suffix