@shortcm/menu v0.44.1

Menus

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Design & API Documentation

Installation

npm install @material/menu

Basic Usage

HTML Structure

<div class="mdc-menu mdc-menu-surface" tabindex="-1">
  <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
    <li class="mdc-list-item" role="menuitem">
      <span class="mdc-list-item__text">A Menu Item</span>
    </li>
    <li class="mdc-list-item" role="menuitem">
      <span class="mdc-list-item__text">Another Menu Item</span>
    </li>
  </ul>
</div>

Styles

@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";

JavaScript Instantiation

import {MDCMenu} from '@material/menu';

const menu = new MDCMenu(document.querySelector('.mdc-menu'));
menu.open = true;

See Importing the JS component for more information on how to import JavaScript.

Variants

Selection Group Menu

Menus can contain a group of list items that can represent the selection state of elements within the group.

<div class="mdc-menu mdc-menu-surface" tabindex="-1" id="demo-menu">
  <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
    <li>
      <ul class="mdc-menu__selection-group">
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
            ...
          </span>
          <span class="mdc-list-item__text">Single</span>
        </li>
        <li class="mdc-list-item" role="menuitem">
          <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
           ...
          </span>
          <span class="mdc-list-item__text">1.15</span>
        </li>
      </ul>
    </li>
    <li class="mdc-list-divider" role="separator"></li>
    <li class="mdc-list-item" role="menuitem">
      <span class="mdc-list-item__text">Add space before paragraph</span>
    </li>
    ...
  </ul>
</div>

Disabled Menu Items

Menu items can be disabled by adding the mdc-list-item--disabled modifier class (from MDC List). Disabled menu items will be excluded from keyboard navigation.

Anchors and Positioning

Anchored To Parent

The menu can be positioned to automatically anchor to a parent element when opened.

<div id="toolbar" class="toolbar mdc-menu-surface--anchor">
  <div class="mdc-menu mdc-menu-surface">
  ...
  </div>
</div>

Anchor To Element Within Wrapper

The menu can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.

<div id="demo-menu" class="mdc-menu-surface--anchor">
  <button id="menu-button">Open Menu</button>
  <div class="mdc-menu mdc-menu-surface">
  ...
  </div>
</div>

Fixed Position

The menu can use fixed positioning when being displayed.

<div class="mdc-menu mdc-menu-surface">
...
</div>

// ...
menu.setFixedPosition(true);

Absolute Position

The menu can use absolutely positioned when being displayed.

<div class="mdc-menu mdc-menu-surface">
...
</div>

// ...
menu.hoistMenuToBody(); // Not required if the menu is already positioned on the body.
menu.setAbsolutePosition(100, 100);

Style Customization

CSS Classes

Sass Mixins

See Menu Surface and List documentation for additional style customization options.

MDCMenu Properties and Methods

See Importing the JS component for more information on how to import JavaScript.

See Menu Surface and List documentation for more information on proxied methods and properties.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Menu for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCMenuAdapter

MDCMenuFoundation

Events