Menu Components

Usage

<!-- Basic Menu -->
<c-button.filled id="my-trigger">Open Menu</c-button.filled>
<c-menu.container anchor="#my-trigger">
  <c-menu.item>Profile</c-menu.item>
  <c-menu.item>Settings</c-menu.item>
  <c-menu.item>Sign out</c-menu.item>
</c-menu.container>

<!-- Menu with Icons and Shortcuts -->
<c-menu.container anchor="#trigger-id" placement="bottom-end">
  <c-menu.item>
    <c-slot name="leading">
      <span class="material-symbols">edit</span>
    </c-slot>
    Edit
    <c-slot name="trailing">
      <span class="text-xs text-on-surface-variant">Ctrl+E</span>
    </c-slot>
  </c-menu.item>
  <c-menu.item>
    <c-slot name="leading">
      <span class="material-symbols">delete</span>
    </c-slot>
    Delete
  </c-menu.item>
</c-menu.container>

<!-- Scrollable Menu -->
<c-menu.container anchor="#trigger-id" max_height="200px">
  <c-menu.item>Long List Item 1</c-menu.item>
  <c-menu.item>Long List Item 2</c-menu.item>
  <!-- More items... -->
</c-menu.container>

Attributes

Menu Container

Attribute
Type
Default
Description
anchor string required CSS selector for the element that triggers the menu
placement string "bottom-start" Menu position relative to anchor: bottom-start, bottom-end, top-start, top-end, right-start, left-start
max_height string "300px" Maximum height of the menu before scrolling
slot slot required Menu items content

Menu Item

Attribute
Type
Default
Description
leading slot none Content to display before the item text (icons, avatars)
trailing slot none Content to display after the item text (shortcuts, badges)
slot slot required Primary text content of the menu item

Keyboard Navigation

Menus support full keyboard navigation for accessibility:

Key
Action
↓ Move focus to next menu item
↑ Move focus to previous menu item
Enter Activate focused menu item
Space Activate focused menu item
Esc Close menu and return focus to trigger
Tab Close menu and move focus to next element