Menus

Basic menu

Menus can be connected top controls by adding a selector or nesting them inside.

Show

content_copy copy

content_paste paste

plain

Show overlay

content_copy copy

content_paste paste

plain

<mc-button id=controlid>Control</mc-button>
<mc-menu anchor=controlid>
  <mc-menu-item>
    <mc-icon slot=start>content_copy</mc-icon>
    copy
  </mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
</mc-menu>



<mc-button id=overlayid>Control</mc-button>
<mc-menu anchor=overlayid overlay>
  <mc-menu-item>
    <mc-icon slot=start>content_copy</mc-icon>
    copy
  </mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
</mc-menu>

Nested menu

Show

content_copy copy

content_paste paste

Nested item

content_copy copy

content_paste paste

plain

<mc-button class=filled id=nested>Show</mc-button>
<mc-menu anchor=nested>
  <mc-menu-item id=nested-item>Nested item</mc-menu-item>

  <mc-menu anchor=nested-item>
    <mc-menu-item>plain</mc-menu-item>
  </mc-menu>
</mc-menu>

Style

CSS variables that allow you override default values

/* Optional variables for overriding */

--mc-menu-container-color: var(--mc-surface-container);
--mc-menu-shape: var(--mc-shape-extra-small);
--mc-menu-item-text-color-local: var(--mc-on-surface);

Basic menu

Nested menu

Context menu (right click)

Style