# Menu Item
[component-header:sl-menu-item]
Menu items provide options for the user to pick from in a menu.
```html preview
Option 1
Option 2
Option 3
Checked
Disabled
Prefix Icon
Suffix Icon
```
```jsx react
import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
Checked
Disabled
Prefix Icon
Suffix Icon
);
```
## Examples
### Checked
Use the `checked` attribute to draw menu items in a checked state.
```html preview
Option 1
Option 2
Option 3
```
```jsx react
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
### Disabled
Add the `disabled` attribute to disable the menu item so it cannot be selected.
```html preview
Option 1
Option 2
Option 3
```
```jsx react
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Option 1
Option 2
Option 3
);
```
### Prefix & Suffix
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
```html preview
Home
Messages
12
Settings
```
```jsx react
import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => (
Home
Messages
12
Settings
);
```
### 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 `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.
```html preview
```
```jsx react
import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
const App = () => {
function handleSelect(event) {
const item = event.detail.item;
// Toggle checked state
item.checked = !item.checked;
// Log value
console.log(`Selected value: ${item.value}`);
}
return (
Option 1
Option 2
Option 3
);
};
```
[component-metadata:sl-menu-item]