Menu

The Menu component provides a vertically arranged series of options.

For dropdown menus, utilize the <mdui-dropdown> component.

Usage

Import the component:

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

Import the TypeScript type:

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Example:

Item 1 Item 2
<mdui-menu>
  <mdui-menu-item>Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

Examples

Dropdown Menu

To create a dropdown menu, use the <mdui-dropdown> component.

Dense Style

For a dense menu style, add the dense attribute to <mdui-menu>.

Disabled Items

To disable menu items, add the disabled attribute to <mdui-menu-item>.

Single Selection

For single selection, set the selects attribute to single on <mdui-menu>. The value of <mdui-menu> is the value of the selected <mdui-menu-item>.

Multiple Selection

For multiple selection, set the selects attribute to multiple on <mdui-menu>. The value of <mdui-menu> is an array of the selected <mdui-menu-item> values.

Note: For multiple selection, the value of <mdui-menu> is an array and can only be read and set via JavaScript property.

Icons

To add Material Icons on the left and right, add icon, end-icon attributes to <mdui-menu-item>. Use end-text attribute to add text on the right side. Alternatively, use icon, end-icon, end-text slots for the same purpose.

Setting icon attribute to an empty string creates space for an icon on the left, aligning it with other items.

For single or multiple selection, use selected-icon attribute or selected-icon slot to define the icon for selected state.

To turn the menu item into a link, use the href attribute on the <mdui-menu-item> component. download, target, and rel attributes are available for link-related functionality.

Submenu

To specify submenu items, use the submenu slot within <mdui-menu-item>.

Set submenu-trigger attribute on <mdui-menu> to define the trigger method for the submenu.

When submenu-trigger="hover" is set, use submenu-open-delay and submenu-close-delay attributes on <mdui-menu> to set the delay for opening and closing the submenu.

Custom Content

To fully customize the menu item content, use the custom slot in <mdui-menu-item>.

AttributePropertyReflectTypeDefault

The value of the menu item.

Disables the menu item.

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

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

Specifies the right text. Alternatively, use slot="end-text".

Specifies the Material Icons name for the selected state. Alternatively, use slot="selected-icon".

Opens the submenu.

The URL for the hyperlink. If specified, the component renders as an <a> element and can use link-related attributes.

Instructs the browser to treat the linked URL as a download.

Note: This is only available when href is specified.

Defines where to display the linked URL. Possible values:

  • _blank: Opens in a new tab or window.
  • _parent: Opens in the parent browsing context or _self if no parent exists.
  • _self: Opens in the current browsing context. (Default).
  • _top: Opens in the topmost browsing context or _self if no ancestors exist.

Note: This is only available when href is specified.

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

  • alternate: Alternate versions of the current document.
  • author: Author of the current document or article.
  • bookmark: Permanent link for the nearest ancestor section.
  • external: The referenced document is not part of the same site as the current document.
  • help: Link to context-sensitive help.
  • license: Indicates that the main content of the current document is covered by the copyright license described by the referenced document.
  • me: Indicates that the current document represents the person who owns the linked content.
  • next: Indicates that the current document is part of a series and the next document in the series is the referenced document.
  • nofollow: Indicates that the current document's original author or publisher does not endorse the referenced document.
  • noreferrer: No Referer header will be included. Also has the same effect as noopener.
  • opener: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
  • prev: Indicates that the current document is part of a series and the previous document in the series is the referenced document.
  • search: Links to a resource that can be used to search through the current document and its related pages.
  • tag: Gives a tag (identified by the given address) that applies to the current document.

Note: This is only available when href is specified.

Determines if the element should be focused when the page loads.

Specifies the order in which the element receives focus when navigating with the Tab key.

NameParametersReturns

Simulates a mouse click on the element.

Sets focus on the element. An optional parameter can be an object with a preventScroll property. If preventScroll is set to true, the page will not scroll to bring the focused element into view.

Removes focus from the element.

Name

Emitted when the menu item gains focus.

Emitted when the menu item loses focus.

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

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

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

Emitted after the submenu has closed and the animations are completed.

Name

Menu item text.

Left icon.

Right icon.

Right text.

Icon for the selected state.

Submenu.

Any custom content.

Name

Menu item container.

Left icon.

Text content.

Right icon.

Right text.

Icon for the selected state.

Submenu element.

AttributePropertyReflectTypeDefault

Defines the selectable state of menu items. Defaults to non-selectable. Possible values:

  • single: Only one item can be selected at a time.
  • multiple: Multiple items can be selected.

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

Note: The HTML attribute is always a string and can only be set as an initial value when selects="single". The JavaScript property value is a string when selects="single" and an array of strings when selects="multiple". In selects="multiple", this value can only be modified by changing the JavaScript property.

Indicates whether the menu items use a compact layout.

Defines the trigger method for submenus. Supports multiple values separated by spaces. Possible values:

  • click: Open submenu when clicking on a menu item.
  • hover: Open submenu when hovering over a menu item.
  • focus: Open submenu when focusing on a menu item.
  • manual: Only programmatically open and close submenus, no other trigger methods can be specified.

Specifies the delay (in milliseconds) for opening a submenu via hover.

Specifies the delay (in milliseconds) for closing a submenu via hover.

NameParametersReturns

Sets focus on the element.

Remove focus from the element.

Name

Emitted when the selected state of menu items changes

Name

Submenu items (<mdui-menu-item>), dividers (<mdui-divider>), and other elements.

Name

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

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons