Menu

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

• Follows: Menus - Material Design 3
• Inherits: Menu

Interactive Demo

Usage

<span style="position: relative; display: inline-block">
  <md-button id="some-menu-btn">Menu with Anchor Set</md-button>
  <md-menu id="some-menu" for="some-menu-btn">
    <md-menu-item id="item-new-text-file">New Text File</md-menu-item>
    <md-menu-item id="item-new-file">New File...</md-menu-item>
    <md-menu-item id="item-new-window">New Window</md-menu-item>
    <md-divider></md-divider>
    <md-menu-item id="item-open-file">Open File...</md-menu-item>
    <md-menu-item id="item-open-folder">Open Folder...</md-menu-item>
    <md-divider></md-divider>
    <md-menu-item id="item-save">Save</md-menu-item>
    <md-menu-item id="item-save-as">Save As...</md-menu-item>
  </md-menu>
</span>

<label style="display: block">event:
  <input type="text" readonly id="some-menu-fires" />
</label>

<script>
  const menuButton = document.getElementById('some-menu-btn');
  const menuOutput = document.getElementById('some-menu-fires');
  const menu = document.getElementById('some-menu');

  menuButton.addEventListener('click', () => {
    menu.open = !menu.open;
  });

  menu.addEventListener('select', (e) => {
    menuOutput.value = `select: { index: ${e.detail.index}, item: #${e.detail.item.id}\n}`;
  });
</script>

Properties

Methods

Events