--- meta: title: Menu description: Menus provide a list of options for the user to choose from. layout: component --- ```html:preview Menu Item 1 Menu Item 2 Menu Item 3 Menu Item 4 Menu Item 5 One Two Three ``` Menus are typically used in combination with dropdowns to display a list of actions or options. They support keyboard navigation, submenus, icons, checkboxes, disabled items, and more. ## Examples ### Basic Menu A basic menu with simple text items. ```html:preview Cut Copy Paste ``` ### Menu with Dropdown Menus are commonly used inside dropdowns to create action menus or context menus. ```html:preview Actions Edit Duplicate Archive Delete ``` ### Menu Items with Icons Use the `prefix` slot to add icons to menu items. ```html:preview Edit Copy Paste Delete ``` ### Menu Items with Value Use the `value` attribute to associate a value with each menu item. This is useful for identifying which item was selected. ```html:preview Select Action Edit Copy Delete
Last selected: None
``` ### Disabled Menu Items Use the `disabled` attribute to disable menu items. ```html:preview Enabled Item Disabled Item Another Enabled Item Another Disabled Item ``` ### Checkbox Menu Items Use `type="checkbox"` to create checkbox menu items. Use the `checked` attribute to set the initial state. ```html:preview Bold Italic Underline Strikethrough ``` ### Checkbox Position Use the `checked-position` attribute to control where the checkbox icon appears. The default is `left`, but you can set it to `right`. ```html:preview Left Position (default) Right Position ``` ### Menu Items with Links Menu items can function as links by using the `href` attribute. Use `target` to control where the link opens. ```html:preview Open Example Open in New Tab ``` ### Submenus Menu items can contain submenus. Hover over or navigate to a menu item with a submenu to expand it. Submenus support the same features as regular menus. ```html:preview New File Open File Recent Files document1.txt document2.txt document3.txt Save File ``` ### Nested Submenus Submenus can be nested multiple levels deep. ```html:preview File Edit Undo Redo Find Find in File Find in Project Replace Replace in File Replace in Project View ``` ### Loading State Use the `loading` attribute to show a loading state on menu items. ```html:preview Regular Item Loading Item Another Item ``` ### Menu Item Colors Use the `color` attribute to apply semantic colors to menu items. ```html:preview Default Primary Secondary Info Success Warning Error ``` ### Keyboard Navigation Menus support full keyboard navigation: - **Arrow Up/Down** - Navigate between menu items - **Home/End** - Jump to first/last menu item - **Enter/Space** - Select the current menu item - **Arrow Right** - Open a submenu - **Arrow Left** - Close a submenu and return to parent - **Escape** - Close the menu ```html:preview Navigate with Keyboard Edit Copy More Options Option 1 Option 2 Option 3 Disabled Item Delete ``` ### Dividers You can add visual separators between menu items using HTML elements with `role="separator"`. ```html:preview Cut Copy Paste
Select All
Delete ``` ### Complex Menu with Multiple Features A comprehensive example showing various menu features together. ```html:preview File Options New File Open File Recent Files document1.txt document2.txt document3.txt
Save Save As...
Auto Save Show Line Numbers
Export Export as PDF Export as HTML
Close File
Last action: None
``` ### Events Menus emit the following events: - `zn-select` - Emitted when a menu item is selected. The event detail includes the selected item. - `zn-menu-ready` - Emitted when the menu's items have been slotted and the roving tab index is initialized. ```html:preview Actions Action 1 Action 2 Action 3 ``` ### Menu Item Events Individual menu items emit their own events: - `zn-menu-select` - Emitted when the menu item is selected. The event detail includes the item's value and element. ```html:preview Select Item First Item Second Item Third Item
Menu item events:
``` ### Suffix Slot Use the `suffix` slot to add content to the right side of menu items, such as keyboard shortcuts or badges. ```html:preview Copy Ctrl+C Cut Ctrl+X Paste Ctrl+V ``` ### Programmatic Control You can programmatically control menu items using their methods. ```html:preview Item 1 Item 2 Item 3
Focus Item 2 Click Item 3
Status: Ready
```