Menus

Basic menu

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

Show

Show overlay

<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>


<!-- Overlay -->
<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>

Compact window menu

(Must be compact window size) Menus will default to a bottom sheet when open on compact view. You can disable this.

Default

Prevent bottom sheet

Nested compact

<!-- Prevent menu bottom sheet globally -->
<head>
  <meta name="mc-menu-bottom-sheet" content="disable">
</head>


<!-- default will be a bottom sheet when compact -->
<mc-button id="compactcontrol" class="filled">Default</mc-button>
<mc-menu anchor="compactcontrol">
  <mc-menu-item>
    <mc-icon slot="start">content_copy</mc-icon>
    copy
  </mc-menu-item>
  <mc-menu-item>
    <mc-icon slot="start">content_paste</mc-icon>
    paste
  </mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
</mc-menu>


<!-- Use [prevent-bottom-sheet] to keep a popover -->
<mc-button id="compactpreventcontrol" class="filled">Prevent bottom sheet</mc-button>
<mc-menu anchor="compactpreventcontrol" prevent-bottom-sheet>
  <mc-menu-item>
    <mc-icon slot="start">content_copy</mc-icon>
    copy
  </mc-menu-item>
  <mc-menu-item>
    <mc-icon slot="start">content_paste</mc-icon>
    paste
  </mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
  <mc-menu-item>plain</mc-menu-item>
</mc-menu>


<!-- Nested menus cannot use bottom sheets -->
<mc-button id="nested-compact" class="filled">Nested compact</mc-button>
<mc-menu anchor="nested-compact">
  <mc-menu-item>
    <mc-icon slot="start">content_copy</mc-icon>
    copy
  </mc-menu-item>
  <mc-menu-item>
    <mc-icon slot="start">content_paste</mc-icon>
    paste
  </mc-menu-item>
  <mc-menu-item id="nested-item-compact">Nested item</mc-menu-item>

  <mc-menu anchor="nested-item-compact">
    <mc-menu-item>
      <mc-icon slot="start">content_copy</mc-icon>
      copy
    </mc-menu-item>
    <mc-menu-item>
      <mc-icon slot="start">content_paste</mc-icon>
      paste
    </mc-menu-item>
    <mc-menu-item>plain</mc-menu-item>
    <mc-menu-item>plain</mc-menu-item>
  </mc-menu>
</mc-menu>

Nested menu

Show

<mc-button id="nested" class="filled">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>

Context menu (right click)

Right click me

<!--
  Any element with context-menu="id" will toggle the menu
  Access current target with mc-menu.anchor
-->

<div context-menu="cm1">Right click me</div>
<mc-menu context-menu="cm1">
  <mc-menu-item>plain</mc-menu-item>
</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);