Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Menu

Menu enhances application-menu markup with trigger state, open/close lifecycle, roving focus, disabled item handling, selection events, Escape and outside dismissal.

Playground

Open the menu, use ArrowUp/ArrowDown to move focus, Enter or Space to select, and Escape or outside click to close.

Hooks

Menu behavior is opt-in. Static navigation lists should remain semantic lists and links without these hooks.

Hook Role
data-sui-menu Menu root initialized by the component registry.
data-sui-trigger="menu" Control that opens and closes the target menu surface.
data-sui-target Target id or selector resolved by the trigger.
role="menu" or data-sui-menu-content Menu surface whose visibility is synchronized by the runtime.
role="menuitem" or data-sui-menu-item Focusable, activatable menu item.

Events

Open and close before events are cancellable. Selection remains event-driven so applications own the action.

sui:menu:before-open
sui:menu:open
sui:menu:before-close
sui:menu:close
sui:menu:select

Markup

<section data-sui-menu>
  <button data-sui-trigger="menu" data-sui-target="actions-menu">
    Actions
  </button>
  <div class="sui-menu" id="actions-menu" data-sui-menu-content hidden>
    <button class="sui-menu__item" data-sui-menu-item data-sui-value="rename">
      Rename
    </button>
  </div>
</section>