Menu Item
<mo-menu-item> | MOMenuItem
Menu items are used inside a menu to represent an action or link.
<mo-menu style="max-width: 200px;"> <mo-menu-item>Option 1</mo-menu-item> <mo-menu-item>Option 2</mo-menu-item> <mo-menu-item>Option 3</mo-menu-item> <mo-divider></mo-divider> <mo-menu-item type="checkbox" checked>Checked</mo-menu-item> <mo-menu-item disabled>Disabled</mo-menu-item> <mo-divider></mo-divider> <mo-menu-item> Prefix Icon <mo-icon slot="prefix" name="arrow-right"></mo-icon> </mo-menu-item> <mo-menu-item> Suffix Icon <mo-icon slot="suffix" name="arrow-left"></mo-icon> </mo-menu-item> </mo-menu>
import { MODivider, MOIcon, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <MOMenu style={{ maxWidth: '200px' }}> <MOMenuItem>Option 1</MOMenuItem> <MOMenuItem>Option 2</MOMenuItem> <MOMenuItem>Option 3</MOMenuItem> <MODivider /> <MOMenuItem type="checkbox" checked>Checked</MOMenuItem> <MOMenuItem disabled>Disabled</MOMenuItem> <MODivider /> <MOMenuItem> Prefix Icon <MOIcon slot="prefix" name="arrow-right" /> </MOMenuItem> <MOMenuItem> Suffix Icon <MOIcon slot="suffix" name="arrow-left" /> </MOMenuItem> </MOMenu> );
Since Modes UI 3.0, the mo-menu-item
is no longer used for the options inside an
mo-select
. Use the mo-option
instead.
Examples
Prefix & Suffix
Add content to the start and end of menu items using the prefix
and suffix
slots.
<mo-menu style="max-width: 250px;"> <mo-menu-item> <mo-icon slot="prefix" name="home"></mo-icon> Home </mo-menu-item> <mo-menu-item> <mo-icon slot="prefix" name="email"></mo-icon> Messages <mo-badge slot="suffix" variant="primary" pill>12</mo-badge> </mo-menu-item> <mo-divider></mo-divider> <mo-menu-item> <mo-icon slot="prefix" name="settings"></mo-icon> Settings </mo-menu-item> </mo-menu>
import { MOBadge, MODivider, MOIcon, MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <MOMenu style={{ maxWidth: '250px' }}> <MOMenuItem> <MOIcon slot="prefix" name="house" /> Home </MOMenuItem> <MOMenuItem> <MOIcon slot="prefix" name="email" /> Messages <MOBadge slot="suffix" variant="primary" pill> 12 </MOBadge> </MOMenuItem> <MODivider /> <MOMenuItem> <MOIcon slot="prefix" name="settings" /> Settings </MOMenuItem> </MOMenu> );
Disabled
Add the disabled
attribute to disable the menu item so it cannot be selected.
<mo-menu style="max-width: 200px;"> <mo-menu-item>Option 1</mo-menu-item> <mo-menu-item disabled>Option 2</mo-menu-item> <mo-menu-item>Option 3</mo-menu-item> </mo-menu>
import { MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react'; const App = () => ( <MOMenu style={{ maxWidth: '200px' }}> <MOMenuItem>Option 1</MOMenuItem> <MOMenuItem disabled>Option 2</MOMenuItem> <MOMenuItem>Option 3</MOMenuItem> </MOMenu> );
Checkbox Menu Items
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.
<mo-menu style="max-width: 200px;"> <mo-menu-item type="checkbox">Autosave</mo-menu-item> <mo-menu-item type="checkbox" checked>Check Spelling</mo-menu-item> <mo-menu-item type="checkbox">Word Wrap</mo-menu-item> </mo-menu>
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 type="checkbox">Autosave</MOMenuItem> <MOMenuItem type="checkbox" checked> Check Spelling </MOMenuItem> <MOMenuItem type="checkbox">Word Wrap</MOMenuItem> </MOMenu> );
Value & Selection
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 mo-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 type=“checkbox” checked state, and more.
<mo-menu class="menu-value" style="max-width: 200px;"> <mo-menu-item type="checkbox" value="opt-1">Option 1</mo-menu-item> <mo-menu-item type="checkbox" value="opt-2">Option 2</mo-menu-item> <mo-menu-item type="checkbox" value="opt-3">Option 3</mo-menu-item> </mo-menu> <script> const menu = document.querySelector('.menu-value'); menu.addEventListener('mo-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 { MOMenu, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react'; const App = () => { function handleSelect(event) { const item = event.detail.item; // Toggle type="checkbox" checked state item.checked = !item.checked; // Log value console.log(`Selected value: ${item.value}`); } return ( <MOMenu style={{ maxWidth: '200px' }} onMoSelect={handleSelect}> <MOMenuItem type="checkbox" value="opt-1">Option 1</MOMenuItem> <MOMenuItem type="checkbox" value="opt-2">Option 2</MOMenuItem> <MOMenuItem type="checkbox" value="opt-3">Option 3</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.
To import this component using a bundler:
import '@metsooutotec/modes-web-components/dist/components/menu-item/menu-item.js';
To import this component as a React component:
import MOMenuItem from '@metsooutotec/modes-web-components/dist/react/menu-item/';
To import this component using a script tag:
<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/menu-item/menu-item.js"></script>
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. |
Learn more about using slots.
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
type
|
The type of menu item to render. To use checked , this value must be set to
checkbox .
|
'normal' | 'checkbox'
|
'normal'
|
|
checked
|
Draws the item in a checked state. |
|
boolean
|
false
|
selected
|
Draws the item in a selected state. Not recommended due to accessibility concerns, the checked state is preferred. This is meant to be used within the header menu. |
|
boolean
|
false
|
value
|
A unique value to store in the menu item. This can be used as a way to identify menu items when selected. |
string
|
''
|
|
loading
|
Draws the menu item in a loading state. |
|
boolean
|
false
|
disabled
|
Draws the menu item in a disabled state. |
|
boolean
|
false
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Methods
Name | Description | Arguments |
---|---|---|
getTextLabel() |
Returns a text label based on the contents of the menu item’s default slot. | - |
Learn more about methods.
Parts
Name | Description |
---|---|
base |
The component’s internal wrapper. |
prefix |
The prefix container. |
label |
The menu item label. |
suffix |
The suffix container. |
Learn more about customizing CSS parts.