Menu
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
For dropdown menus, utilize the <mdui-dropdown> component.
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>
open dropdown
Item 1
Item 2
<mdui-dropdown>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
Code
For a dense menu style, add the dense attribute to <mdui-menu>.
Item 1
Item 2
Item 3
<mdui-menu dense>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
<mdui-menu-item>Item 3</mdui-menu-item>
</mdui-menu>
Code
To disable menu items, add the disabled attribute to <mdui-menu-item>.
Item 1
Item 2
Item 3
<mdui-menu>
<mdui-menu-item disabled>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
<mdui-menu-item>Item 3</mdui-menu-item>
</mdui-menu>
Code
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>.
Item 1
Item 2
<mdui-menu selects="single" value="item-2">
<mdui-menu-item value="item-1">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-menu>
Code
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.
Item 1
Item 2
Item 3
<mdui-menu selects="multiple" class="example-multiple">
<mdui-menu-item value="item-1">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">Item 2</mdui-menu-item>
<mdui-menu-item value="item-3">Item 3</mdui-menu-item>
</mdui-menu>
<script>
// Set default selection to item-1 and item-2
const menu = document.querySelector(".example-multiple");
menu.value = ["item-1", "item-2"];
</script>
Code
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.
Item 1
Item 2
Ctrl+X
Item 3
<mdui-menu>
<mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Item 1</mdui-menu-item>
<mdui-menu-item>
Item 2
<mdui-icon slot="icon" name="visibility"></mdui-icon>
<mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
<span slot="end-text">Ctrl+X</span>
</mdui-menu-item>
<mdui-menu-item icon="">Item 3</mdui-menu-item>
</mdui-menu>
CodeFor single or multiple selection, use selected-icon attribute or selected-icon slot to define the icon for selected state.
Item 1
Item 2
<mdui-menu selects="multiple">
<mdui-menu-item value="item-1" selected-icon="cloud_done">Item 1</mdui-menu-item>
<mdui-menu-item value="item-2">
<mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
Item 2
</mdui-menu-item>
</mdui-menu>
Code
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.
Item 1
Item 2
<mdui-menu>
<mdui-menu-item href="https://www.mdui.org" target="_blank">Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
Code
To specify submenu items, use the submenu slot within <mdui-menu-item>.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu>
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
CodeSet submenu-trigger attribute on <mdui-menu> to define the trigger method for the submenu.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu submenu-trigger="click">
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
CodeWhen 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.
Line spacing
Single
1.5
Double
Custom: 1.2
Paragraph style
<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
<mdui-menu-item>
Line spacing
<mdui-menu-item slot="submenu">Single</mdui-menu-item>
<mdui-menu-item slot="submenu">1.5</mdui-menu-item>
<mdui-menu-item slot="submenu">Double</mdui-menu-item>
<mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
</mdui-menu-item>
<mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>
Code
To fully customize the menu item content, use the custom slot in <mdui-menu-item>.
ABS
Absolute value of the number
ACOS
Arc cosine of the number, in radians
ACOSH
Inverse hyperbolic cosine of the number
<style>
.custom-item {
padding: 4px 12px;
}
.custom-item .secondary {
display: none;
color: #888;
font-size: 13px;
}
.custom-item:hover .secondary {
display: block
}
</style>
<mdui-menu>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ABS</div>
<div class="secondary">Absolute value of the number</div>
</div>
</mdui-menu-item>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ACOS</div>
<div class="secondary">Arc cosine of the number, in radians</div>
</div>
</mdui-menu-item>
<mdui-menu-item>
<div slot="custom" class="custom-item">
<div>ACOSH</div>
<div class="secondary">Inverse hyperbolic cosine of the number</div>
</div>
</mdui-menu-item>
</mdui-menu>
Code| Attribute | Property | Reflect | Type | Default |
|---|
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.
|
| Name | Parameters | Returns |
|---|
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.
|
| Attribute | Property | Reflect | Type | Default |
|---|
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.
|
| Name | Parameters | Returns |
|---|
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.
|