Menu
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 <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>
Source
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>
Source
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>
Source
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>
Source
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 accessed and updated in JavaScript.
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>
Source
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 the icon attribute to an empty string reserves space for a left-side icon so the item aligns with the others.
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>
SourceFor single or multiple selection, use the selected-icon attribute or slot to define the selected-state icon.
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>
Source
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>
Source
Use the submenu slot in <mdui-menu-item> to define submenu items.
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>
SourceUse the submenu-trigger attribute on <mdui-menu> to define how the submenu opens.
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>
SourceWhen 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>
Source
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>
Source| 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 link. When set, the component renders as an <a> element and supports link-related attributes.
|
Downloads the linked URL.
Note: Only available when href is specified.
|
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.
|
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.
|
Whether the element is focused when the page loads.
|
The element's tab order when navigating with the Tab key.
|
| Name | Parameters | Returns |
|---|
Simulates a mouse click on the element.
|
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.
|
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 |
|---|
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.
|
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.
|
Indicates whether the menu items use a compact layout.
|
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.
|
The delay (in milliseconds) before a submenu opens on hover.
|
The delay (in milliseconds) before a submenu closes on hover.
|
| Name | Parameters | Returns |
|---|
Sets focus on the element.
|
Removes 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 corner radius of the component. You can use a specific pixel value, but it is recommended to reference design tokens.
|
