menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Menu

Menus are divided into simple menus and cascading menus. Simple menus are suitable for mobile and tablet devices, while cascading menus are suitable for desktop devices.

Usage

  1. Call via Attributes
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components - Menu

Style

Simple menu

Adding the disabled attribute to a menu item can disable that item.

Add the <li class="mdui-divider"></li> element to add a divider.

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

Add the class .mdui-menu-cascade to the <ul class="mdui-menu"> element to turn it into a cascading menu suitable for desktop devices.

Nesting menus can be achieved by adding another menu inside a <li class="mdui-menu-item"></li> element; it theoretically supports infinite levels of nesting.

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

The <span class="mdui-menu-item-more"></span> element adds a right-pointing arrow to a menu item, used on menu items that contain 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>

Usage

Call via Attributes

With this approach, no JavaScript code needs to be written. Simply add the mdui-menu="options" attribute to a controlling element (for example, a button). When calling it via custom attributes, an additional target parameter is required to specify the menu being controlled; its value should be the CSS selector of the controlled menu.

Note: To ensure correct positioning, the menu and its trigger element must be siblings 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 the component:

// anchorSelector represents the CSS selector or DOM element of the element that triggers 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

Param

Param NameTypeDefaultDescription
positionstringautoThe position of the menu relative to the element that triggers it.
  • top: The menu is above the trigger element.
  • bottom: The menu is below the trigger element.
  • center: The menu is vertically centered in the window.
  • auto: Automatically determine the position. Priority: bottom > top > center.
alignstringautoThe alignment of the menu with the element that triggers it.
  • left: The menu is left-aligned with the trigger element.
  • right: The menu is right-aligned with the trigger element.
  • center: The menu is horizontally centered in the window.
  • auto: Automatically determine the position. Priority: left > right > center.
gutterint16The minimum spacing between the menu and the window border, in px.
fixedbooleanfalseThe positioning method of the menu
  • true: The menu uses fixed positioning. When the page scrolls, the menu stays fixed and does not move with the scroll bar.
  • false: The menu uses absolute positioning. When the page scrolls, the menu moves with the page.
coveredbooleanautoWhether the menu covers the element that triggers it.
  • true: Overlay the menu on top of the trigger element.
  • false: Do not overlay the menu on the trigger element.
  • auto: Simple menus overlay the trigger element, while cascading menus do not.
subMenuTriggerstringhoverThe trigger method for submenus.
  • click: Trigger the submenu on click.
  • hover: Trigger the submenu on mouse hover.
subMenuDelayint200The trigger delay for submenus (in milliseconds); this parameter is only valid when subMenuTrigger is hover.

Method

Method NameDescription
open()Open the menu.
close()Close the menu.
toggle()Toggle the open state of the menu.

Event

Event NameDescriptionTargetParams
open.mdui.menuTriggered when the menu starts its opening animation.<ul class="mdui-menu"></ul>event._detail.inst: Instance
opened.mdui.menuTriggered when the menu finishes its opening animation.
close.mdui.menuTriggered when the menu starts its closing animation.
closed.mdui.menuTriggered when the menu finishes its closing animation.

CSS Classes

Class NameDescription
.mdui-menuDefine a menu component.
.mdui-menu-cascadeDefine a cascading menu.
.mdui-menu-itemDefine a menu item.
.mdui-menu-item-iconDefine a menu icon.
.mdui-menu-item-helperDefine help text for a menu item.
.mdui-menu-item-moreThe right-pointing arrow for menu items with submenus.
arrow_backPrevious
Dialog
arrow_forwardNext
Progress Bar