# Menu Component Menus present a list of choices in a temporary surface. They appear when users interact with a button, action, or other control. For dropdown menus, use the [``](/en/docs/2/components/dropdown) component. ## Usage {#usage} Import the component: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Import the TypeScript type: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Example: ```html Item 1 Item 2 ``` ## Examples {#examples} ### Dropdown Menu {#example-dropdown} To create a dropdown menu, use the [``](/en/docs/2/components/dropdown) component. ```html Open dropdown Item 1 Item 2 ``` ### Dense Style {#example-dense} For a dense menu style, add the `dense` attribute to ``. ```html Item 1 Item 2 Item 3 ``` ### Disabled Items {#example-disabled} To disable menu items, add the `disabled` attribute to ``. ```html Item 1 Item 2 Item 3 ``` ### Single Selection {#example-selects-single} For single selection, set the `selects` attribute to `single` on ``. The `value` of `` is the `value` of the selected ``. ```html Item 1 Item 2 ``` ### Multiple Selection {#example-selects-multiple} For multiple selection, set the `selects` attribute to `multiple` on ``. The `value` of `` is an array of the selected `` values. Note: For multiple selection, the `value` of `` is an array and can only be accessed and updated in JavaScript. ```html Item 1 Item 2 Item 3 ``` ### Icons {#example-icon} To add Material Icons on the left and right, add `icon`, `end-icon` attributes to ``. Use `end-text` attribute to add text on the right side. Alternatively, use `icon`, `end-icon`, `end-text` slots for the same purpose. Setting the `icon` attribute to an empty string reserves space for a left-side icon so the item aligns with the others. ```html Item 1 Item 2 Ctrl+X Item 3 ``` For single or multiple selection, use the `selected-icon` attribute or slot to define the selected-state icon. ```html Item 1 Item 2 ``` ### Link {#example-link} To turn the menu item into a link, use the `href` attribute on the `` component. `download`, `target`, and `rel` attributes are available for link-related functionality. ```html Item 1 Item 2 ``` ### Submenu {#example-submenu} Use the `submenu` slot in `` to define submenu items. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` Use the `submenu-trigger` attribute on `` to define how the submenu opens. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` When `submenu-trigger="hover"` is set, use `submenu-open-delay` and `submenu-close-delay` attributes on `` to set the delay for opening and closing the submenu. ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` ### Custom Content {#example-custom} To fully customize the menu item content, use the `custom` slot in ``. ```html
ABS
Absolute value of the number
ACOS
Arc cosine of the number, in radians
ACOSH
Inverse hyperbolic cosine of the number
 ``` ## mdui-menu-item API ### Properties
Attribute Property Reflect Type Default Description
value value true string

The value of the menu item.
disabled disabled true boolean false

Disables the menu item.
icon icon true string

Specifies the Material Icons name for the left icon. Alternatively, use slot="icon". An empty string reserves space for an icon.
end-icon endIcon true string

Specifies the Material Icons name for the right icon. Alternatively, use slot="end-icon".
end-text endText true string

Specifies the right text. Alternatively, use slot="end-text".
selected-icon selectedIcon true string

Specifies the Material Icons name for the selected state. Alternatively, use slot="selected-icon".
submenu-open submenuOpen true boolean false

Opens the submenu.
href href true string

The URL for the link. When set, the component renders as an <a> element and supports link-related attributes.
download download true string

Downloads the linked URL.

Note: Only available when href is specified.
target target true '_blank' | '_parent' | '_self' | '_top'

Controls where the linked URL opens. Possible values:

  • _blank: Opens in a new tab or window.
  • _parent: Opens in the parent browsing context, or _self if there is no parent.
  • _self: Opens in the current browsing context (default).
  • _top: Opens in the topmost browsing context, or _self if there are no ancestors.

Note: Only available when href is specified.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Specifies the relationship of the linked URL as space-separated link types. Possible values:

  • alternate: An alternate version of the current document.
  • author: The author of the current document or article.
  • bookmark: The permalink for the nearest ancestor section.
  • external: The referenced document is not part of the same site as the current document.
  • help: A link to context-sensitive help.
  • license: Content covered by the copyright license described by the referenced document.
  • me: Links to content owned by the current document's author.
  • next: The next document in the series.
  • nofollow: Not endorsed by the original author or publisher.
  • noreferrer: Prevents the Referer header from being sent. Same effect as noopener.
  • opener: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when target="_blank" is specified).
  • prev: The previous document in the series.
  • search: Links to a resource that can be used to search through the current document and its related pages.
  • tag: Marks the current document with the given tag.

Note: Only available when href is specified.
autofocus autofocus true boolean false

Whether the element is focused when the page loads.
tabindex tabIndex false number

The element's tab order when navigating with the Tab key.
### Methods
Name Description
click(): void

Simulates a mouse click on the element.
focus(options?: FocusOptions): void

Sets focus on the element. An optional object parameter may include a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.
blur(): void

Removes focus from the element.
### Events
Name Description
focus

Emitted when the menu item gains focus.
blur

Emitted when the menu item loses focus.
submenu-open

Emitted when the submenu starts to open. Can be prevented with event.preventDefault().
submenu-opened

Emitted after the submenu has opened and the animations are completed.
submenu-close

Emitted when the submenu starts to close. Can be prevented with event.preventDefault().
submenu-closed

Emitted after the submenu has closed and the animations are completed.
### Slots
Name Description
(default)

Menu item text.
icon

Left icon.
end-icon

Right icon.
end-text

Right text.
selected-icon

Icon for the selected state.
submenu

Submenu.
custom

Any custom content.
### CSS Parts
Name Description
container

Menu item container.
icon

Left icon.
label

Text content.
end-icon

Right icon.
end-text

Right text.
selected-icon

Icon for the selected state.
submenu

Submenu element.
## mdui-menu API ### Properties
Attribute Property Reflect Type Default Description
selects selects true 'single' | 'multiple'

Controls whether menu items can be selected. They are not selectable by default. Possible values:

  • single: Only one item can be selected at a time.
  • multiple: Multiple items can be selected.
value value false string | string[]

The value of the selected <mdui-menu-item>.

Note: The HTML attribute always accepts a string and can only be used as an initial value when selects="single". The JavaScript property is a string when selects="single" and an array of strings when selects="multiple". When selects="multiple", update the JavaScript property to change this value.
dense dense true boolean false

Indicates whether the menu items use a compact layout.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Defines how submenus open. Multiple space-separated values are supported. Possible values:

  • click: Opens the submenu when the menu item is clicked.
  • hover: Opens the submenu when hovering over a menu item.
  • focus: Opens the submenu when the menu item receives focus.
  • manual: Submenus can only be opened and closed programmatically; no other trigger methods can be specified.
submenu-open-delay submenuOpenDelay true number 200

The delay (in milliseconds) before a submenu opens on hover.
submenu-close-delay submenuCloseDelay true number 200

The delay (in milliseconds) before a submenu closes on hover.
### Methods
Name Description
focus(options?: FocusOptions): void

Sets focus on the element.
blur(): void

Removes focus from the element.
### Events
Name Description
change

Emitted when the selected state of menu items changes.
### Slots
Name Description
(default)

Submenu items (<mdui-menu-item>), dividers (<mdui-divider>), and other elements.
### CSS Custom Properties
Name Description
--shape-corner

The corner radius of the component. You can use a specific pixel value, but it is recommended to reference design tokens.