showFloatingMenu

showFloatingMenu(opts): () => void

Defined in: components/menu.ts:286

Open a floating dropdown menu anchored to an element. Portals to document.body (never clipped), positions itself (flipping up when there’s no room below), and closes on Escape, Tab, item selection, or any click outside the panel and anchor. Returns a close() function.

Menus are usually opened through menuButton or addContextMenu; reach for this primitive when you need to trigger a menu from some other event, anchored to an arbitrary element.

Parameters

opts

FloatingMenuOptions

Returns

() => void

Example

// An @-mention picker: typing "@" in the input pops up a user menu.
const users = ['Alice', 'Bob', 'Charlie', 'Dutley']
A("input placeholder=Comment…", () => {
  A("keydown=", (e: KeyboardEvent) => {
    if (e.key !== "@") return;
    S.showFloatingMenu({
      anchor: e.currentTarget as HTMLElement,
      items: users.map((u) => ({ label: u, click: () => S.alert(`Mentioned ${u}!`) })),
    });
  });
});