2020-07-15 21:30:37 +00:00
# Menu
[component-header:sl-menu]
2020-09-03 17:05:43 +00:00
Menus provide a list of options for the user to choose from.
2020-07-15 21:30:37 +00:00
2021-09-29 12:03:03 +00:00
You can use [menu items ](/components/menu-item ), [menu labels ](/components/menu-label ), and [dividers ](/components/divider ) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
2020-07-15 21:30:37 +00:00
```html preview
2022-03-02 15:10:41 +00:00
< sl-menu
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); background: var(--sl-panel-background-color); border-radius: var(--sl-border-radius-medium);"
>
2020-07-15 21:30:37 +00:00
< sl-menu-item value = "undo" > Undo< / sl-menu-item >
< sl-menu-item value = "redo" > Redo< / sl-menu-item >
2021-09-29 12:03:03 +00:00
< sl-divider > < / sl-divider >
2020-07-15 21:30:37 +00:00
< sl-menu-item value = "cut" > Cut< / sl-menu-item >
< sl-menu-item value = "copy" > Copy< / sl-menu-item >
< sl-menu-item value = "paste" > Paste< / sl-menu-item >
< sl-menu-item value = "delete" > Delete< / sl-menu-item >
< / sl-menu >
```
2021-11-04 22:12:47 +00:00
```jsx react
2022-03-02 15:10:41 +00:00
import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react';
2021-11-04 22:12:47 +00:00
const App = () => (
2022-03-02 15:10:41 +00:00
< SlMenu
2021-11-04 22:12:47 +00:00
style={{
maxWidth: '200px',
2021-11-18 22:41:03 +00:00
border: 'solid 1px var(--sl-panel-border-color)',
2021-11-04 22:12:47 +00:00
borderRadius: 'var(--sl-border-radius-medium)'
}}
>
< SlMenuItem value = "undo" > Undo< / SlMenuItem >
< SlMenuItem value = "redo" > Redo< / SlMenuItem >
< SlDivider / >
< SlMenuItem value = "cut" > Cut< / SlMenuItem >
< SlMenuItem value = "copy" > Copy< / SlMenuItem >
< SlMenuItem value = "paste" > Paste< / SlMenuItem >
< SlMenuItem value = "delete" > Delete< / SlMenuItem >
2022-03-02 15:10:41 +00:00
< / SlMenu >
2021-11-04 22:12:47 +00:00
);
```
2021-04-09 17:38:01 +00:00
?> 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.
2020-07-15 21:30:37 +00:00
[component-metadata:sl-menu]