menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

menu

The menu is divided into simple menu and cascading menu. The simple menu is suitable for mobile phones and tablets, and the cascading menu is suitable for desktop devices.

Call method

  1. Called by custom attributes
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Menu

style

Simple menu

Add on the menu item disabled Properties can disable a menu item.

Add to <li class="mdui-divider"></li> Elements can add dividers.

codeplay_arrow
Example
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Simple menu with icons

codeplay_arrow
Example
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">remove_red_eye</i>Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">file_download</i>Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i>Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Cascading menu

in <ul class="mdui-menu"> Add a class to the element .mdui-menu-cascade The menu can be changed into a cascading menu suitable for desktop devices.

Pass in <li class="mdui-menu-item"></li> The way of adding menus in the element can realize the nesting of the menus, and theoretically, it can support unlimited nesting.

<span class="mdui-menu-item-helper"></span> The element adds a short description to the menu item.

<span class="mdui-menu-item-more"></span> The element adds a right-pointing arrow to the menu item, which is used on menu items with submenus.

codeplay_arrow
Example
<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">format_bold</i>
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">format_italic</i>
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">check</i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Call method

Called by custom attributes

There is no need to write JavaScript code to use this method. Just in a controlling element（For example: button）Add on mdui-menu="options" Attributes. When calling through custom attributes, you need to add an additional target The parameter is used to specify the controlled menu, and its value is the CSS selector of the controlled menu.

note：In order for the menu to be positioned correctly, the menu and the element that triggers the menu must be located at the same level under the same parent element.

codeplay_arrow
Example
<button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-attr'}">open</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>
codeplay_arrow
Example
<button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#demo-attr-cascade'}">cascade menu</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">format_bold</i>
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">format_italic</i>
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">check</i>Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Add space before paragraph</a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Add space after paragraph</a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">check</i>
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Call via JavaScript

Instantiate components:

// anchorSelector represents the CSS selector or DOM element of the element that triggered the menu
// menuSelector represents the CSS selector or DOM element of the menu
// options represents the configuration parameters of the component, see the parameter list below
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
run

parameter

parameter name Types of Defaults description
position string auto The position of the menu relative to the element that triggered it.
  • top: The menu is above the element that triggered it.
  • bottom: The menu is below the element that triggered it.
  • center: The menu is centered vertically in the window.
  • auto: Automatically determine the location. The priority is:bottom > top > center。
align string auto The way the menu aligns with the element that triggered it.
  • left: The menu is left aligned with the element that triggered it.
  • right: The menu is right-aligned with the element that triggered it.
  • center: The menu is centered horizontally in the window.
  • auto: Automatically determine the location: priority is:left > right > center
gutter int 16 The minimum distance between the menu and the window border, the unit is px.
fixed boolean false How to locate the menu
  • true：The menu uses fixed positioning. When the page is scrolled, the menu will remain at a fixed position in the window and will not scroll with the scroll bar.
  • false: The menu uses absolute positioning. When the page scrolls, the menu will scroll along with the page.
covered boolean auto Whether the menu is overlaid on the element that triggered it.
  • true: Make the menu overlay the element that triggered it.
  • false: Make the menu not cover the element that triggered it.
  • auto: A simple menu overrides the element that triggered it. The cascading menu does not cover the element that triggered it.
subMenuTrigger string hover The trigger mode of the submenu.
  • click: Trigger a submenu when clicked.
  • hover: Trigger the submenu when the mouse is hovering.
subMenuDelay int 200 The trigger delay time of the submenu (unit: milliseconds). This parameter is valid only when subMenuTrigger: hover.

method

Method name description
open() Open the menu.
close() Close the menu.
toggle() Toggles the open state of the menu.

event

event description the goal event
open.mdui.menu The event will be triggered when the menu starts to open the animation. <ul class="mdui-menu"></ul> event._detail.inst：实例
opened.mdui.menu The event will be triggered when the menu ends and the animation is opened.
close.mdui.menu The event will be triggered when the menu starts to close the animation.
closed.mdui.menu When the menu ends and closes the animation, the event will be triggered.

List of CSS class names

Class name effect
.mdui-menu Define a menu component.
.mdui-menu-cascade Define the cascading menu.
.mdui-menu-item Define menu items.
.mdui-menu-item-icon Define the menu icon.
.mdui-menu-item-helper Define the help text for the menu.
.mdui-menu-item-more Right arrow for menu items with submenus.
arrow_back Previous
Dialog box
arrow_forward Next
Progress indicator
Set document theme

Theme color

Main color

Accent color