Menu

Keep the trigger and menu as separate elements. Runtime code owns visibility, anchored coordinates, viewport collision, portal or top-layer rendering, keyboard behavior, focus, and cleanup.

<div class="app-menu-anchor">
  <button
    type="button"
    aria-haspopup="menu"
    aria-controls="actions-menu"
    aria-expanded="true"
    data-sui-trigger="menu"
    data-sui-target="#actions-menu">
    Actions
  </button>

  <div class="sui-menu" id="actions-menu" data-sui-component="menu">
    <div class="sui-menu__list" role="menu">...</div>
  </div>
</div>

Use role="menu" only for application menus that implement the expected keyboard behavior. Static navigation can use regular lists and links.

The default surface uses --sui-menu-inline-size: 260px and a viewport-safe --sui-menu-max-inline-size. Use .sui-menu--fluid only when an in-flow menu should fill its container; custom widths can override either property per instance.

<div class="sui-menu">
  <div class="sui-menu__list" role="menu" aria-label="Actions">
    <button class="sui-menu__item" type="button" role="menuitem">
      <span class="sui-menu__leading"><span class="sui-icon sui-icon--file-system-folder-outline"></span></span>
      <span class="sui-menu__content"><span class="sui-menu__label">Menu item</span></span>
      <span class="sui-menu__trailing"><span class="sui-icon sui-icon--arrows-angle-right"></span></span>
    </button>
  </div>
</div>

<div class="sui-menu sui-menu--fluid">...</div>

<div
  class="sui-menu"
  style="--sui-menu-inline-size: 320px; --sui-menu-max-inline-size: 90vw">
  ...
</div>

Floating And Fluid Width

Floating From A Narrow Trigger

Fluid Container

Surface

Slots

States

Dark Theme

CSS API