Menu · Base UI Solid

A list of actions in a dropdown, enhanced with keyboard navigation.

import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        Song <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.Item class={styles.Item}>Add to Library</Menu.Item>
            <Menu.Item class={styles.Item}>Add to Playlist</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Play Next</Menu.Item>
            <Menu.Item class={styles.Item}>Play Last</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Favorite</Menu.Item>
            <Menu.Item class={styles.Item}>Share</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { Menu } from 'base-ui-solid/menu';

<Menu.FilterProvider>
  <Menu.Root>
    <Menu.Trigger />
    <Menu.Portal>
      <Menu.Backdrop />
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Arrow />
          <Menu.Input />
          <Menu.Clear />
          <Menu.Empty />

          <Menu.List>
            <Menu.Item />
            <Menu.LinkItem />
            <Menu.Separator />

            <Menu.SubmenuRoot>
              <Menu.SubmenuTrigger />
            </Menu.SubmenuRoot>

            <Menu.Group>
              <Menu.GroupLabel />
            </Menu.Group>

            <Menu.RadioGroup>
              <Menu.GroupLabel />
              <Menu.RadioItem>
                <Menu.RadioItemIndicator />
              </Menu.RadioItem>
            </Menu.RadioGroup>

            <Menu.CheckboxItem>
              <Menu.CheckboxItemIndicator />
            </Menu.CheckboxItem>
          </Menu.List>

          <Menu.Viewport />
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menu.FilterProvider>;

Examples

Open on hover

To create a menu that opens on hover, add the openOnHover prop to <Menu.Trigger>. You can additionally configure how quickly the menu opens on hover using the delay prop.

import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  return (
    <Menu.Root>
      <Menu.Trigger openOnHover class={styles.Button}>
        Add to playlist <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.Item class={styles.Item}>Get Up!</Menu.Item>
            <Menu.Item class={styles.Item}>Inside Out</Menu.Item>
            <Menu.Item class={styles.Item}>Night Beats</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>New playlist…</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

Checkbox items

Use the <Menu.CheckboxItem> part to create a menu item that can toggle a setting on or off.

import { createSignal } from 'solid-js';
import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  const [showMinimap, setShowMinimap] = createSignal(true);
  const [showSearch, setShowSearch] = createSignal(true);
  const [showSidebar, setShowSidebar] = createSignal(false);

  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        Workspace <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.CheckboxItem
              checked={showMinimap()}
              onCheckedChange={setShowMinimap}
              class={styles.CheckboxItem}
            >
              <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span class={styles.CheckboxItemText}>Minimap</span>
            </Menu.CheckboxItem>
            <Menu.CheckboxItem
              checked={showSearch()}
              onCheckedChange={setShowSearch}
              class={styles.CheckboxItem}
            >
              <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span class={styles.CheckboxItemText}>Search</span>
            </Menu.CheckboxItem>
            <Menu.CheckboxItem
              checked={showSidebar()}
              onCheckedChange={setShowSidebar}
              class={styles.CheckboxItem}
            >
              <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                <CheckIcon />
              </Menu.CheckboxItemIndicator>
              <span class={styles.CheckboxItemText}>Sidebar</span>
            </Menu.CheckboxItem>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function CheckIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

Radio items

Use the <Menu.RadioGroup> and <Menu.RadioItem> parts to create menu items that work like radio buttons.

import { createSignal } from 'solid-js';
import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  const [value, setValue] = createSignal('date');
  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        Sort <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.RadioGroup value={value()} onValueChange={setValue}>
              <Menu.RadioItem class={styles.RadioItem} value="date">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Date</span>
              </Menu.RadioItem>
              <Menu.RadioItem class={styles.RadioItem} value="name">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Name</span>
              </Menu.RadioItem>
              <Menu.RadioItem class={styles.RadioItem} value="type">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Type</span>
              </Menu.RadioItem>
            </Menu.RadioGroup>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function CheckIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

Close on click

Use the closeOnClick prop to change whether the menu closes when an item is clicked.

Control whether the menu closes on click

// Close the menu when a checkbox item is clicked
<Menu.CheckboxItem closeOnClick />

// Keep the menu open when an item is clicked
<Menu.Item closeOnClick={false} />

Group labels

Use the <Menu.GroupLabel> part to add a label to a <Menu.Group> or <Menu.RadioGroup>.

import { createSignal } from 'solid-js';
import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  const [value, setValue] = createSignal('date');
  const [showMinimap, setShowMinimap] = createSignal(true);
  const [showSearch, setShowSearch] = createSignal(true);
  const [showSidebar, setShowSidebar] = createSignal(false);

  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        View <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.RadioGroup value={value()} onValueChange={setValue}>
              <Menu.GroupLabel class={styles.GroupLabel}>Sort</Menu.GroupLabel>
              <Menu.RadioItem class={styles.RadioItem} value="date">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Date</span>
              </Menu.RadioItem>
              <Menu.RadioItem class={styles.RadioItem} value="name">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Name</span>
              </Menu.RadioItem>
              <Menu.RadioItem class={styles.RadioItem} value="type">
                <Menu.RadioItemIndicator class={styles.RadioItemIndicator}>
                  <CheckIcon />
                </Menu.RadioItemIndicator>
                <span class={styles.RadioItemText}>Type</span>
              </Menu.RadioItem>
            </Menu.RadioGroup>

            <Menu.Separator class={styles.Separator} />

            <Menu.Group>
              <Menu.GroupLabel class={styles.GroupLabel}>Workspace</Menu.GroupLabel>
              <Menu.CheckboxItem
                checked={showMinimap()}
                onCheckedChange={setShowMinimap}
                class={styles.CheckboxItem}
              >
                <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span class={styles.CheckboxItemText}>Minimap</span>
              </Menu.CheckboxItem>
              <Menu.CheckboxItem
                checked={showSearch()}
                onCheckedChange={setShowSearch}
                class={styles.CheckboxItem}
              >
                <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span class={styles.CheckboxItemText}>Search</span>
              </Menu.CheckboxItem>
              <Menu.CheckboxItem
                checked={showSidebar()}
                onCheckedChange={setShowSidebar}
                class={styles.CheckboxItem}
              >
                <Menu.CheckboxItemIndicator class={styles.CheckboxItemIndicator}>
                  <CheckIcon />
                </Menu.CheckboxItemIndicator>
                <span class={styles.CheckboxItemText}>Sidebar</span>
              </Menu.CheckboxItem>
            </Menu.Group>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function CheckIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

To create a submenu, nest another menu inside the parent menu with <Menu.SubmenuRoot>. Use the <Menu.SubmenuTrigger> part for the menu item that opens the nested menu.

Adding a submenu

<Menu.Root>
  <Menu.Trigger />
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Item />

        {/* Submenu */}
        <Menu.SubmenuRoot>
          <Menu.SubmenuTrigger />
          <Menu.Portal>
            <Menu.Positioner>
              <Menu.Popup>
                {/* prettier-ignore */}
                {/* Submenu items  */}
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        </Menu.SubmenuRoot>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenu() {
  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        Song <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
          <Menu.Popup class={styles.Popup}>
            <Menu.Item class={styles.Item}>Add to Library</Menu.Item>

            <Menu.SubmenuRoot>
              <Menu.SubmenuTrigger class={styles.SubmenuTrigger}>
                Add to Playlist
                <CaretRightIcon />
              </Menu.SubmenuTrigger>
              <Menu.Portal>
                <Menu.Positioner
                  class={styles.Positioner}
                  sideOffset={getOffset}
                  alignOffset={getOffset}
                >
                  <Menu.Popup class={styles.Popup}>
                    <Menu.Item class={styles.Item}>Get Up!</Menu.Item>
                    <Menu.Item class={styles.Item}>Inside Out</Menu.Item>
                    <Menu.Item class={styles.Item}>Night Beats</Menu.Item>
                    <Menu.Separator class={styles.Separator} />
                    <Menu.Item class={styles.Item}>New playlist…</Menu.Item>
                  </Menu.Popup>
                </Menu.Positioner>
              </Menu.Portal>
            </Menu.SubmenuRoot>

            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Play Next</Menu.Item>
            <Menu.Item class={styles.Item}>Play Last</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Favorite</Menu.Item>
            <Menu.Item class={styles.Item}>Share</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function getOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
  return side === 'top' || side === 'bottom' ? 4 : -4;
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function CaretRightIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M6 12V4l4.5 4z" />
    </svg>
  );
}

Navigate to another page

Use the <Menu.LinkItem> part to create a link.

A menu item that opens a link

<Menu.LinkItem href="/projects">Go to Projects</Menu.LinkItem>

Open a dialog

In order to open a dialog using a menu, control the dialog state and open it imperatively using the onClick handler on the menu item.

Connecting a dialog to a menu

import { createSignal } from 'solid-js';
import { Dialog } from 'base-ui-solid/dialog';
import { Menu } from 'base-ui-solid/menu';
function ExampleMenu() {
  const [dialogOpen, setDialogOpen] = createSignal(false);
  return [
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner>
          <Menu.Popup>
            {/* Open the dialog when the menu item is clicked */}
            <Menu.Item onClick={() => setDialogOpen(true)}>Open dialog</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>,
    <Dialog.Root open={dialogOpen()} onOpenChange={setDialogOpen}>
      <Dialog.Portal>
        <Dialog.Backdrop />
        <Dialog.Popup>
          {/* prettier-ignore */}
          {/* Rest of the dialog */}
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>,
  ];
}

A menu can be opened by a trigger that lives either inside or outside the <Menu.Root>. Keep the trigger inside <Menu.Root> for simple, tightly coupled layouts like the hero demo at the top of this page. When the trigger and menu content need to live in different parts of the tree (for example, in a card list that controls a menu rendered near the document root), create a handle with Menu.createHandle() and pass it to both the trigger and the root.

Note that only top-level menus can have detached triggers. Submenus must have their triggers defined within the SubmenuRoot part.

The imperative methods on the handle, such as open() and close(), require a <Menu.Root> using the same handle to be mounted. Calls made while no root is attached to the handle — before one mounts, or after it unmounts — are ignored. Each time a root mounts, it starts from fresh state: a call made while no root was attached is not replayed, and no open state carries over from a previous mount.

Detached triggers

const demoMenu = Menu.createHandle();

<Menu.Trigger handle={demoMenu}>
  Actions
</Menu.Trigger>

<Menu.Root handle={demoMenu}>
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Item>Edit</Menu.Item>
        <Menu.Item>Share</Menu.Item>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

const demoMenu = Menu.createHandle();
export default function MenuDetachedTriggersSimpleDemo() {
  return [
    <Menu.Trigger class={styles.IconButton} handle={demoMenu} aria-label="Project actions">
      <EllipsisHorizontalIcon />
    </Menu.Trigger>,
    <Menu.Root handle={demoMenu}>
      <Menu.Portal>
        <Menu.Positioner sideOffset={8} align="start" class={styles.Positioner}>
          <Menu.Popup class={styles.Popup}>
            <Menu.Item class={styles.Item}>Rename</Menu.Item>
            <Menu.Item class={styles.Item}>Duplicate</Menu.Item>
            <Menu.Item class={styles.Item}>Move to folder</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Archive</Menu.Item>
            <Menu.Item class={styles.Item}>Delete</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>,
  ];
}
function EllipsisHorizontalIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & {
    style?: JSX.CSSProperties;
  },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <circle cx="3" cy="8" r="1" />
      <circle cx="8" cy="8" r="1" />
      <circle cx="13" cy="8" r="1" />
    </svg>
  );
}

Multiple triggers

One menu can be opened by several triggers. You can either render multiple <Menu.Trigger> components inside the same <Menu.Root>, or attach several detached triggers to the same handle.

Multiple triggers within the Root part

<Menu.Root>
  <Menu.Trigger>Row actions</Menu.Trigger>
  <Menu.Trigger>Quick actions</Menu.Trigger>
  {/* Rest of the menu */}
</Menu.Root>

Multiple detached triggers

const projectMenu = Menu.createHandle();

<Menu.Trigger handle={projectMenu}>Row actions</Menu.Trigger>
<Menu.Trigger handle={projectMenu}>Quick actions</Menu.Trigger>

<Menu.Root handle={projectMenu}>
  {/* Rest of the menu */}
</Menu.Root>

Menus can render different content depending on which trigger opened them. Pass a payload prop to each <Menu.Trigger> and read it via a function child on <Menu.Root>. Provide a type argument to createHandle() to strongly type the payload.

Detached triggers with payload

const menus = {
  file: ['New', 'Open', 'Save'],
  edit: ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'],
}

const demoMenu = Menu.createHandle<{ items: string[] }>();

<Menu.Trigger handle={demoMenu} payload={{ items: menus.file }}>
  File
</Menu.Trigger>

<Menu.Trigger handle={demoMenu} payload={{ items: menus.edit }}>
  Edit
</Menu.Trigger>

<Menu.Root handle={demoMenu}>
  {(state) => (
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Viewport>
            {(state.payload?.items ?? []).map((item) => (
              <Menu.Item>{item}</Menu.Item>
            ))}
          </Menu.Viewport>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  )}
</Menu.Root>

Controlled mode with multiple triggers

Control a menu’s open state externally with the open and onOpenChange props on <Menu.Root>. When more than one trigger can open the menu, track the active trigger with the triggerId prop on <Menu.Root> and matching id props on each <Menu.Trigger>. The onOpenChange callback receives eventDetails, which includes the DOM element that initiated the change, so you can update your triggerId state when the user activates a different trigger.

import { createSignal } from 'solid-js';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';
/* eslint-disable no-console */
const itemGroups = {
  library: [
    { label: 'Add to library', onClick: () => console.log('Adding to library') },
    { label: 'Add to favorites', onClick: () => console.log('Adding to favorites') },
  ],
  playback: [
    { label: 'Play', onClick: () => console.log('Playing') },
    { label: 'Add to queue', onClick: () => console.log('Adding to queue') },
  ],
  share: [
    { label: 'Share', onClick: () => console.log('Sharing') },
    { label: 'Copy link', onClick: () => console.log('Copying link') },
  ],
} as const;
/* eslint-enable no-console */
type MenuKey = keyof typeof itemGroups;
const demoMenu = Menu.createHandle<MenuKey>();
export default function MenuDetachedTriggersControlledDemo() {
  const [open, setOpen] = createSignal(false);
  const [activeTrigger, setActiveTrigger] = createSignal<string | null>(null);
  const handleOpenChange = (isOpen: boolean, eventDetails: Menu.Root.ChangeEventDetails) => {
    setOpen(isOpen);
    if (isOpen) {
      setActiveTrigger(eventDetails.trigger?.id ?? null);
    }
  };
  return [
    <div class={styles.Container}>
      <Menu.Trigger
        class={styles.Button}
        handle={demoMenu}
        id="menu-trigger-1"
        payload={'library' as const}
      >
        Library
      </Menu.Trigger>

      <Menu.Trigger
        class={styles.Button}
        handle={demoMenu}
        id="menu-trigger-2"
        payload={'playback' as const}
      >
        Playback
      </Menu.Trigger>

      <Menu.Trigger
        class={styles.Button}
        handle={demoMenu}
        id="menu-trigger-3"
        payload={'share' as const}
      >
        Share
      </Menu.Trigger>

      <button
        type="button"
        class={styles.Button}
        onClick={() => {
          setActiveTrigger('menu-trigger-2');
          setOpen(true);
        }}
      >
        Open playback (controlled)
      </button>
    </div>,
    <Menu.Root
      handle={demoMenu}
      open={open()}
      triggerId={activeTrigger()}
      onOpenChange={handleOpenChange}
    >
      {(state) => (
        <Menu.Portal>
          <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
            <Menu.Popup class={styles.Popup}>
              {state.payload &&
                itemGroups[state.payload].map((item) => (
                  <Menu.Item class={styles.Item} onClick={item.onClick}>
                    {item.label}
                  </Menu.Item>
                ))}
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      )}
    </Menu.Root>,
  ];
}

Arrow

Use the <Menu.Arrow> part inside the popup to visually connect the menu to its trigger.

import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function MenuArrowDemo() {
  return (
    <Menu.Root>
      <Menu.Trigger class={styles.Button}>
        Song <CaretDownIcon />
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner
          class={styles.Positioner}
          sideOffset={({ side }) => (side === 'top' ? 12 : 8)}
        >
          <Menu.Popup class={styles.Popup}>
            <Menu.Arrow class={styles.Arrow} />
            <Menu.Item class={styles.Item}>Add to Library</Menu.Item>
            <Menu.Item class={styles.Item}>Add to Playlist</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Play Next</Menu.Item>
            <Menu.Item class={styles.Item}>Play Last</Menu.Item>
            <Menu.Separator class={styles.Separator} />
            <Menu.Item class={styles.Item}>Favorite</Menu.Item>
            <Menu.Item class={styles.Item}>Share</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

When one menu is opened by multiple detached triggers, you can animate the menu as it moves between triggers. This includes animating position, size, and content.

Position and Size

To animate the menu’s position, apply CSS transitions to the left, right, top, and bottom properties of the Positioner part. To animate its size, transition the width and height of the Popup part.

Content

The menu also supports content transitions. This is useful when different triggers display different content within the same menu.

To enable content animations, wrap the menu content in the <Menu.Viewport> part. This part renders a div with data-activation-direction, containing up to two space-separated tokens — a horizontal (left or right) and a vertical (up or down) value — so you can make direction-aware animations.

Inside <Menu.Viewport>, content is wrapped in divs with transition data attributes:

data-current: The currently visible content when no transitions are present or the incoming content.
data-previous: The outgoing content during a transition.

import { For } from 'solid-js';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';
import transitionStyles from './opt/index.module.css';

type MenuContent = {
  heading: string;
  groups: string[][];
};
const MENUS = {
  library: {
    heading: 'Library',
    groups: [
      ['Add to library', 'Add to favorites'],
      ['Create playlist', 'Create station'],
    ],
  },
  playback: {
    heading: 'Playback',
    groups: [
      ['Play now', 'Add to queue'],
      ['Play next', 'Play last', 'Sleep timer'],
    ],
  },
  share: {
    heading: 'Share',
    groups: [
      ['Copy link', 'Copy embed code'],
      ['Share to contacts', 'Share to social'],
    ],
  },
} as const satisfies Record<string, MenuContent>;
type MenuKey = keyof typeof MENUS;
const demoMenu = Menu.createHandle<MenuKey>();
export default function MenuDetachedTriggersFullDemo() {
  return (
    <div class={styles.Container}>
      <Menu.Trigger class={styles.Button} handle={demoMenu} payload={'library' as const}>
        Library
      </Menu.Trigger>
      <Menu.Trigger class={styles.Button} handle={demoMenu} payload={'playback' as const}>
        Playback
      </Menu.Trigger>
      <Menu.Trigger class={styles.Button} handle={demoMenu} payload={'share' as const}>
        Share
      </Menu.Trigger>

      <Menu.Root handle={demoMenu} modal={false}>
        {(state) => (
          <Menu.Portal>
            <Menu.Positioner
              sideOffset={8}
              align="start"
              class={[styles.Positioner, transitionStyles.Positioner]}
            >
              <Menu.Popup class={[styles.Popup, transitionStyles.Popup]}>
                <Menu.Viewport class={transitionStyles.Viewport}>
                  {state.payload &&
                    MENUS[state.payload!].groups.map((group, groupIndex) => [
                      <Menu.Group>
                        {groupIndex === 0 && (
                          <Menu.GroupLabel class={styles.Label}>
                            {MENUS[state.payload!].heading}
                          </Menu.GroupLabel>
                        )}
                        <For each={group}>
                          {(item) => <Menu.Item class={styles.Item}>{item}</Menu.Item>}
                        </For>
                      </Menu.Group>,
                      groupIndex < MENUS[state.payload!].groups.length - 1 && (
                        <Menu.Separator class={styles.Separator} />
                      ),
                    ])}
                </Menu.Viewport>
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        )}
      </Menu.Root>
    </div>
  );
}

FilteringPreview

Wrap <Menu.Root> in <Menu.FilterProvider>, add <Menu.Input> to the popup, and put the items inside <Menu.List>.

Filterable menu

<Menu.FilterProvider>
  <Menu.Root>
    <Menu.Trigger>Actions</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Input aria-label="Filter actions" />
          <Menu.Clear>Clear</Menu.Clear>
          <Menu.Empty>No results.</Menu.Empty>
          <Menu.List>
            <Menu.Item>Rename</Menu.Item>
            <Menu.Item>Delete</Menu.Item>
          </Menu.List>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menu.FilterProvider>

Label the input with aria-label, aria-labelledby, or a visible <label>. Type to narrow the actions, then use the arrow keys to move through matching items.

import { For } from 'solid-js';
import type { JSX } from '@solidjs/web';
import { Menu } from 'base-ui-solid/menu';
import styles from './index.module.css';

export default function ExampleMenuFilter() {
  return (
    <Menu.FilterProvider>
      <Menu.Root>
        <Menu.Trigger class={styles.Trigger}>
          Actions <CaretDownIcon />
        </Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner class={styles.Positioner} sideOffset={8} align="start">
            <Menu.Popup class={styles.Popup}>
              <div class={styles.InputContainer}>
                <Menu.Input
                  class={styles.Input}
                  aria-label="Filter actions"
                  placeholder="e.g. Save"
                />
                <Menu.Clear class={styles.Clear}>
                  <ClearIcon />
                </Menu.Clear>
              </div>
              <Menu.Empty class={styles.Empty}>No actions found.</Menu.Empty>
              <Menu.List class={styles.List}>
                <Menu.Group class={styles.Section}>
                  <Menu.GroupLabel class={styles.GroupLabel}>File</Menu.GroupLabel>
                  <Menu.Item class={styles.Item}>New file</Menu.Item>
                  <Menu.Item class={styles.Item}>Open file</Menu.Item>
                  <Menu.Item class={styles.Item}>Save</Menu.Item>
                  <Menu.Item class={styles.Item}>Save as</Menu.Item>
                  <Menu.Item class={styles.Item}>Duplicate</Menu.Item>
                  <Menu.Item class={styles.Item}>Rename</Menu.Item>
                </Menu.Group>
                <Menu.Group class={styles.Section}>
                  <Menu.GroupLabel class={styles.GroupLabel}>Organize</Menu.GroupLabel>
                  <FilterableSubmenu
                    label="Move to folder"
                    inputLabel="Filter folders"
                    placeholder="e.g. Projects"
                    emptyText="No folders found."
                    options={folderOptions}
                  />
                  <Menu.SubmenuRoot>
                    <Menu.SubmenuTrigger class={styles.SubmenuTrigger}>
                      Share
                      <CaretRightIcon />
                    </Menu.SubmenuTrigger>
                    <Menu.Portal>
                      <Menu.Positioner
                        class={styles.Positioner}
                        sideOffset={getSubmenuOffset}
                        alignOffset={getSubmenuOffset}
                      >
                        <Menu.Popup class={styles.Popup}>
                          <Menu.List class={[styles.List, styles.SubmenuList]}>
                            <For each={sharingOptions}>
                              {(option) => <Menu.Item class={styles.Item}>{option}</Menu.Item>}
                            </For>
                          </Menu.List>
                        </Menu.Popup>
                      </Menu.Positioner>
                    </Menu.Portal>
                  </Menu.SubmenuRoot>
                  <FilterableSubmenu
                    label="Export"
                    inputLabel="Filter export formats"
                    placeholder="e.g. PDF"
                    emptyText="No export formats found."
                    options={exportOptions}
                  />
                  <Menu.Item class={styles.Item}>Download a copy</Menu.Item>
                  <Menu.Item class={styles.Item}>Delete</Menu.Item>
                </Menu.Group>

                <Menu.RadioGroup class={styles.Section} defaultValue="date">
                  <Menu.Separator class={styles.Separator} />
                  <Menu.GroupLabel class={styles.GroupLabel}>Sort by</Menu.GroupLabel>
                  <For
                    each={[
                      ['date', 'Date modified'],
                      ['name', 'Name'],
                      ['size', 'Size'],
                    ]}
                  >
                    {([value, label]) => (
                      <Menu.RadioItem class={styles.ChoiceItem} value={value}>
                        <Menu.RadioItemIndicator class={styles.ChoiceIndicator}>
                          <CheckIcon />
                        </Menu.RadioItemIndicator>
                        <span class={styles.ChoiceText}>{label}</span>
                      </Menu.RadioItem>
                    )}
                  </For>
                </Menu.RadioGroup>

                <Menu.Group class={styles.Section}>
                  <Menu.Separator class={styles.Separator} />
                  <Menu.GroupLabel class={styles.GroupLabel}>View</Menu.GroupLabel>
                  <Menu.CheckboxItem class={styles.ChoiceItem} defaultChecked>
                    <Menu.CheckboxItemIndicator class={styles.ChoiceIndicator}>
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span class={styles.ChoiceText}>Show details</span>
                  </Menu.CheckboxItem>
                  <Menu.CheckboxItem class={styles.ChoiceItem}>
                    <Menu.CheckboxItemIndicator class={styles.ChoiceIndicator}>
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span class={styles.ChoiceText}>Show sidebar</span>
                  </Menu.CheckboxItem>
                  <Menu.CheckboxItem class={styles.ChoiceItem}>
                    <Menu.CheckboxItemIndicator class={styles.ChoiceIndicator}>
                      <CheckIcon />
                    </Menu.CheckboxItemIndicator>
                    <span class={styles.ChoiceText}>Keep available offline</span>
                  </Menu.CheckboxItem>
                </Menu.Group>
              </Menu.List>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>
    </Menu.FilterProvider>
  );
}

interface FilterableSubmenuProps {
  label: string;
  inputLabel: string;
  placeholder: string;
  emptyText: string;
  options: readonly string[];
}

function FilterableSubmenu(props: FilterableSubmenuProps) {
  return (
    <Menu.FilterProvider>
      <Menu.SubmenuRoot>
        <Menu.SubmenuTrigger class={styles.SubmenuTrigger}>
          {props.label}
          <CaretRightIcon />
        </Menu.SubmenuTrigger>
        <Menu.Portal>
          <Menu.Positioner
            class={styles.Positioner}
            sideOffset={getSubmenuOffset}
            alignOffset={getSubmenuOffset}
          >
            <Menu.Popup class={styles.Popup}>
              <div class={styles.InputContainer}>
                <Menu.Input
                  class={styles.Input}
                  aria-label={props.inputLabel}
                  placeholder={props.placeholder}
                />
                <Menu.Clear class={styles.Clear}>
                  <ClearIcon />
                </Menu.Clear>
              </div>
              <Menu.Empty class={styles.Empty}>{props.emptyText}</Menu.Empty>
              <Menu.List class={[styles.List, styles.SubmenuList]}>
                <For each={props.options}>
                  {(option) => <Menu.Item class={styles.Item}>{option}</Menu.Item>}
                </For>
              </Menu.List>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.SubmenuRoot>
    </Menu.FilterProvider>
  );
}

function getSubmenuOffset({ side }: { side: Menu.Positioner.Props['side'] }) {
  return side === 'top' || side === 'bottom' ? 4 : -4;
}

function CaretDownIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M12 6H4l4 4.5z" />
    </svg>
  );
}

function ClearIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m3.5 3.5 9 9m0-9-9 9" />
    </svg>
  );
}

function CaretRightIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M6 12V4l4.5 4z" />
    </svg>
  );
}

function CheckIcon(
  props: Omit<JSX.IntrinsicElements['svg'], 'style'> & { style?: JSX.CSSProperties },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

const sharingOptions = [
  'Email',
  'Messages',
  'AirDrop',
  'Copy link',
  'Invite collaborators',
  'Publish to web',
  'Send a copy',
];

const folderOptions = [
  'Desktop',
  'Documents',
  'Downloads',
  'Projects',
  'Archive',
  'Shared',
  'Trash',
];

const exportOptions = [
  'PDF document',
  'Word document',
  'Plain text',
  'Rich text',
  'Markdown',
  'HTML page',
  'Image',
];

Matching items

Items match their text by default. Use label to override it.

Labels

<Menu.Item label="Move to folder">Move</Menu.Item>

Groups with no matching items get the hidden attribute and stay mounted. If your styles set display on a group, add a [hidden] rule so it still hides.

Hiding styled groups

.Group {
  display: flex;
}

.Group[hidden] {
  display: none;
}

<Menu.Empty> appears when no items match.

By default, an item matches when its text contains the query, ignoring case, accents, and punctuation. Use filter to replace the matching. It receives each item’s text and the trimmed query, and keeps the item when it returns true. Menu.useFilter provides the same locale-aware comparisons.

Custom matching

const { startsWith } = Menu.useFilter();

<Menu.FilterProvider filter={startsWith}>
  <Menu.Root>{/* menu parts */}</Menu.Root>
</Menu.FilterProvider>;

For external filtering, pass filter={null} and render the results yourself, omitting empty groups.

External filtering

import { createSignal } from 'solid-js';

const { contains } = Menu.useFilter();
const [query, setQuery] = createSignal('');
const results = () => actions.filter((action) => contains(action.label, query()));

<Menu.FilterProvider filter={null} value={query()} onValueChange={setQuery}>
  <Menu.Root>{/* render `results` */}</Menu.Root>
</Menu.FilterProvider>;

Controlling the query

value and onValueChange on <Menu.FilterProvider> control the query. It resets to an empty string when the menu closes, reported with the 'popup-close' reason. Cancel that change to keep the query.

Highlighting

Use autoHighlight to highlight the first match while filtering, or autoHighlight="always" to highlight it even when the query is empty. The highlighted item has the data-highlighted attribute, and onItemHighlighted on <Menu.Root> reports each change.

Focus and keyboard

Opening the menu with a click or the keyboard focuses the input. Opening it on hover, touch, or with a pen does not, so the on-screen keyboard stays hidden. The arrow keys move the highlight while the input keeps focus. Tab closes the menu, and Shift+Tab returns focus to the trigger. The popup is a dialog that holds the searchbox input and the menu list.

Submenus

Wrap each searchable <Menu.SubmenuRoot> in its own <Menu.FilterProvider>. Submenus without a provider remain unfiltered.

Filtering with detached triggers

Use the same Menu.createHandle() handle for the root and its detached trigger:

Detached trigger

const handle = Menu.createHandle();

<Menu.Trigger handle={handle}>Actions</Menu.Trigger>
<Menu.FilterProvider>
  <Menu.Root handle={handle}>{/* menu parts */}</Menu.Root>
</Menu.FilterProvider>

Custom keyboard shortcuts

<Menu.Root> accepts an actionsRef whose highlightItem() action moves the highlight to the 'next', 'previous', 'first' or 'last' item, or clears it with 'none'. Use it to bind shortcuts beyond the built-in arrow keys. Menu items receive real DOM focus, so the action moves focus along with the highlight, and 'none' hands focus back to the popup. It wraps around at the ends unless loopFocus is disabled, and does nothing while the menu is closed.

Because the items hold focus while the menu is open, attach the key handler to <Menu.Popup> rather than to the trigger:

Binding a shortcut on the popup

const actionsRef = { current: null as Menu.Root.Actions | null };

<Menu.Root actionsRef={actionsRef}>
  <Menu.Trigger>Open</Menu.Trigger>
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup
        onKeyDown={(event) => {
          if (event.ctrlKey && event.key === 'j') {
            event.preventDefault();
            actionsRef.current?.highlightItem('next');
          }
        }}
      >
        {/* items */}
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>;

In a filterable menu, <Menu.Input> keeps focus while the action moves the highlight, and it treats modified character keys as text editing, so attach the handler to <Menu.Input> instead.

API reference

FilterProviderPreview

Enables filtering for the menu or submenu it wraps. Add Menu.Input to the popup and place its items in Menu.List. Wrap each searchable submenu in its own provider. Doesn’t render its own HTML element.

Prop

Type

Default

defaultValuestring—

The uncontrolled filter query when the menu is initially rendered. To render a controlled query, use the value prop instead.string

valuestring—

The filter query. Use when controlled. When the popup closes, onValueChange is called with an empty query. The controlled value changes only when the consumer updates this prop.string

onValueChangefunction—

Event handler called when the filter query changes.((value: string, eventDetails: Menu.FilterProvider.ChangeEventDetails) => void)

autoHighlightUnionfalse

Whether filtering highlights the first matching item automatically. true: highlight it while the query is not empty.'always': highlight it even when the query is empty. Opening the menu from the keyboard highlights the first item either way, and the arrow keys can move the highlight to another item. With either value, the arrow keys wrap within the list rather than returning to the input, and with 'always' a pointer highlight stays when the pointer leaves.boolean | 'always'

filterfunction—

MenuFilter function used to match items against the query. Receives each item’s label (or its rendered text) and the trimmed query, and keeps the item when it returns true. By default, items match when they contain the query, ignoring case, accents, and punctuation. Pass null when rendering filtered items yourself.((text: string, query: string) => boolean) | null

localeIntl.LocalesArgument—

The locale the default filter uses for string comparison. Defaults to the user’s runtime locale.Intl.LocalesArgument

childrenJSX.Element—

The <Menu.Root> or <Menu.SubmenuRoot> to make filterable.JSX.Element

FilterProvider.State

type MenuFilterProviderState = {};

FilterProvider.ChangeEventReason

type MenuFilterProviderChangeEventReason =
  'input-change' | 'input-clear' | 'clear-press' | 'popup-close';

FilterProvider.ChangeEventDetails

type MenuFilterProviderChangeEventDetails = (
  | { reason: 'clear-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'input-change'; event: Event | InputEvent }
  | { reason: 'input-clear'; event: Event | FocusEvent | InputEvent }
  | { reason: 'popup-close'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
};

Root

Groups all parts of the menu. Doesn’t render its own HTML element.

Prop

Type

Default

defaultOpenbooleanfalse

Whether the menu is initially open. To render a controlled menu, use the open prop instead.boolean

openboolean—

Whether the menu is currently open.boolean

onOpenChangefunction—

Event handler called when the menu is opened or closed.((open: boolean, eventDetails: Menu.Root.ChangeEventDetails) => void)

highlightItemOnHoverbooleantrue

Whether moving the pointer over items should highlight them. Disabling this prop allows CSS :hover to be differentiated from the :focus (data-highlighted) state.boolean

actionsRefRefObject<Menu.Root.Actions | null>—

A ref to imperative actions. unmount: Ends the closing phase of the menu after an externally controlled closing animation finishes. Call preventUnmountOnClose() in onOpenChange first, otherwise the menu completes closing on its own. Whether it leaves the DOM is decided by keepMounted on the portal.close: Closes the menu imperatively when called.highlightItem: Moves or clears the highlight while the menu is open. 'next' and 'previous' move sequentially through the items and wrap unless loopFocus is disabled. 'first' and 'last' highlight the first or last item. 'none' clears the highlight and hands focus back to the popup. Calling this action does not open the menu. To highlight an item after opening it, call the action from onOpenChangeComplete when open is true. Highlight changes requested through this action report the reason 'imperative-action' to onItemHighlighted.RefObject<Menu.Root.Actions | null>

closeParentOnEscbooleanfalse

When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.boolean

defaultTriggerIdUnion—

ID of the trigger that the menu is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open menu.string | null

handleMenu.Handle<Payload>—

A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu’s open state.Menu.Handle<Payload>

loopFocusbooleantrue

Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.boolean

modalbooleantrue

Determines if the menu enters a modal state when open. true: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.false: user interaction with the rest of the document is allowed. On touch devices, a true modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. Nested menus ignore this prop, and menus opened by hover are never modal.boolean

onItemHighlightedfunction—

Callback fired when an item is highlighted or unhighlighted. Receives the highlighted item element (or undefined if no item is highlighted) and details containing the reason for the change, the event, and the item’s text label. The reason can be: 'keyboard': the highlight changed due to keyboard navigation.'pointer': the highlight changed due to pointer hovering. The event may be a MouseEvent rather than a PointerEvent.'imperative-action': the highlight changed via actionsRef's highlightItem.'none': the highlight changed for another reason, such as automatic highlighting while filtering, the item list changing, or the popup opening or closing.((highlightedItem: HTMLElement | undefined, eventDetails: Menu.Root.HighlightEventDetails) => void)

onOpenChangeCompletefunction—

Event handler called after any animations complete when the menu is opened or closed.((open: boolean) => void)

triggerIdUnion—

ID of the trigger that the menu is associated with. This is useful in conjunction with the open prop to create a controlled menu. There’s no need to specify this prop when the menu is uncontrolled (that is, when the open prop is not set).string | null

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

orientationMenu.Root.Orientation'vertical'

The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.Menu.Root.Orientation

childrenUnion—

The content of the menu. This can be a regular Solid JSX or a render function that receives the payload of the active trigger.JSX.Element | PayloadChildRenderFunction<Payload>

Root.State

type MenuRootState = {};

Root.Actions

type MenuRootActions = {
  unmount: () => void;
  close: () => void;
  highlightItem: (target: Menu.Root.HighlightItemTarget) => void;
};

Root.ChangeEventReason

type MenuRootChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none';

Root.ChangeEventDetails

type MenuRootChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** Prevents the popup from unmounting until the `unmount` action is called. */
  preventUnmountOnClose: () => void;
};

Root.HighlightEventReason

type MenuRootHighlightEventReason = 'keyboard' | 'pointer' | 'imperative-action' | 'none';

Root.HighlightEventDetails

type MenuRootHighlightEventDetails =
  | { reason: 'none'; event: Event; label: string | undefined }
  | { reason: 'keyboard'; event: KeyboardEvent; label: string | undefined }
  | { reason: 'imperative-action'; event: Event; label: string | undefined }
  | { reason: 'pointer'; event: MouseEvent | PointerEvent; label: string | undefined };

Root.Orientation

type MenuRootOrientation = 'horizontal' | 'vertical';

Root.HighlightItemTarget

type MenuRootHighlightItemTarget = 'next' | 'previous' | 'first' | 'last' | 'none';

Trigger

A button that opens the menu. Renders a <button> element.

Prop

Type

Default

handleMenu.Handle<Payload>—

A handle to associate the trigger with a menu.Menu.Handle<Payload>

nativeButtonbooleantrue

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).boolean

payloadPayload—

A payload to pass to the menu when it is opened.Payload

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

openOnHoverboolean—

Whether the menu should also open when the trigger is hovered.boolean

delaynumber100

How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the openOnHover prop.number

closeDelaynumber0

How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the openOnHover prop.number

childrenJSX.Element—

-JSX.Element

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-popup-open-—

Present when the corresponding menu is open.-

data-pressed-—

Present when the trigger is pressed.-

data-disabled-—

Present when the trigger is disabled.-

Attribute	Description	-
`data-popup-open`	Present when the corresponding menu is open.
`data-pressed`	Present when the trigger is pressed.
`data-disabled`	Present when the trigger is disabled.

Trigger.State

type MenuTriggerState = {
  /** Whether the menu is currently open and was opened by this trigger. */
  open: boolean;
  /** Whether the trigger is disabled. */
  disabled: boolean;
};

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

Prop

Type

Default

containerUnion—

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

keepMountedbooleanfalse

Whether to keep the portal mounted in the DOM while the popup is hidden.boolean

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Portal.State

type MenuPortalState = {};

Backdrop

An overlay displayed beneath the menu popup. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-open-—

Present when the menu is open.-

data-closed-—

Present when the menu is closed.-

data-starting-style-—

Present when the menu begins animating in.-

data-ending-style-—

Present when the menu is animating out.-

Attribute	Description	-
`data-open`	Present when the menu is open.
`data-closed`	Present when the menu is closed.
`data-starting-style`	Present when the menu begins animating in.
`data-ending-style`	Present when the menu is animating out.

Backdrop.State

type MenuBackdropState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
};

Positioner

Positions the menu popup against the trigger. Renders a <div> element.

Prop

Type

Default

disableAnchorTrackingbooleanfalse

Whether to disable the popup from tracking any layout shift of its positioning anchor.boolean

alignAlign'center'

How to align the popup relative to the specified side. Submenus and menubars default to 'start'.Align

alignOffsetUnion0

Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.number | OffsetFunction

sideSide'bottom'

Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus and vertical menubars default to 'inline-end'.Side

sideOffsetUnion0

Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a data object parameter with the following properties: data.anchor: the dimensions of the anchor element with properties width and height.data.positioner: the dimensions of the positioner element with properties width and height.data.side: which side of the anchor element the positioner is aligned against.data.align: how the positioner is aligned relative to the specified side.number | OffsetFunction

arrowPaddingnumber5

Minimum distance to maintain between the arrow and the edges of the popup. Use it to prevent the arrow element from hanging out of the rounded corners of a popup.number

anchorfunction—

collisionAvoidanceCollisionAvoidance—

Determines how to handle collisions when positioning the popup. side controls overflow on the preferred placement axis (top/bottom or left/right): 'flip': keep the requested side when it fits; otherwise try the opposite side (top and bottom, or left and right).'shift': never change side; keep the requested side and move the popup within the clipping boundary so it stays visible.'none': do not correct side-axis overflow. align controls overflow on the alignment axis (start/center/end): 'flip': keep side, but swap start and end when the requested alignment overflows.'shift': keep side and requested alignment, then nudge the popup along the alignment axis to fit.'none': do not correct alignment-axis overflow. fallbackAxisSide controls fallback behavior on the perpendicular axis when the preferred axis cannot fit: 'start': allow perpendicular fallback and try the logical start side first (top before bottom, or left before right in LTR).'end': allow perpendicular fallback and try the logical end side first (bottom before top, or right before left in LTR).'none': do not fallback to the perpendicular axis. When side is 'shift', explicitly setting align only supports 'shift' or 'none'. If align is omitted, it defaults to 'flip'.CollisionAvoidance

collisionBoundaryBoundary'clipping-ancestors'

An element or a rectangle that delimits the area that the popup is confined to.Boundary

collisionPaddingPadding5

Additional space to maintain from the edge of the collision boundary.Padding

stickybooleanfalse

Whether to maintain the popup in the viewport after the anchor element was scrolled out of view.boolean

positionMethodUnion'absolute'

Determines which CSS position property to use.'absolute' | 'fixed'

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-open-—

Present when the menu popup is open.-

data-closed-—

Present when the menu popup is closed.-

data-anchor-hidden-—

Present when the anchor is hidden.-

data-alignUnion—

Indicates how the popup is aligned relative to the specified side.'start' | 'center' | 'end'

data-sideUnion—

Attribute	Description	-
`data-open`	Present when the menu popup is open.
`data-closed`	Present when the menu popup is closed.
`data-anchor-hidden`	Present when the anchor is hidden.
`data-align`	Indicates how the popup is aligned relative to the specified side.
`data-side`	Indicates which side the popup is positioned relative to the anchor.

CSS variables

Name

Type

Default

--anchor-heightnumber—

The anchor’s height.number

--anchor-widthnumber—

The anchor’s width.number

--available-heightnumber—

The available height between the anchor and the edge of the viewport.number

--available-widthnumber—

The available width between the anchor and the edge of the viewport.number

--positioner-heightnumber—

The height of the menu’s positioner. It is important to set height to this value when using CSS to animate size changes.number

--positioner-widthnumber—

The width of the menu’s positioner. It is important to set width to this value when using CSS to animate size changes.number

--transform-originstring—

The coordinates that this element is anchored to. Used for animations and transitions.string

CSS Variable	Description	-
`--anchor-height`	The anchor’s height.
`--anchor-width`	The anchor’s width.
`--available-height`	The available height between the anchor and the edge of the viewport.
`--available-width`	The available width between the anchor and the edge of the viewport.
`--positioner-height`	The height of the menu’s positioner. It is important to set `height` to this value when using CSS to animate size changes.
`--positioner-width`	The width of the menu’s positioner. It is important to set `width` to this value when using CSS to animate size changes.
`--transform-origin`	The coordinates that this element is anchored to. Used for animations and transitions.

Positioner.State

type MenuPositionerState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the anchor element is hidden. */
  anchorHidden: boolean;
  /** Whether the component is nested. */
  nested: boolean;
  /** Whether CSS transitions should be disabled. */
  instant: string | undefined;
};

A container for the menu items. Renders a <div> element.

Prop

Type

Default

finalFocusfunction—

Determines the element to focus when the menu is closed. false: Do not move focus.true: Move focus based on the default behavior (trigger or previously focused element).RefObject: Move focus to the ref element.function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | void | HTMLElement | null)

childrenJSX.Element—

-JSX.Element

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-open-—

Present when the menu is open.-

data-closed-—

Present when the menu is closed.-

data-alignUnion—

Indicates how the popup is aligned relative to specified side.'start' | 'center' | 'end'

data-instantUnion—

Present if animations should be instant.'click' | 'dismiss' | 'group' | 'trigger-change'

data-sideUnion—

data-starting-style-—

Present when the menu begins animating in.-

data-ending-style-—

Present when the menu is animating out.-

Attribute	Description	-
`data-open`	Present when the menu is open.
`data-closed`	Present when the menu is closed.
`data-align`	Indicates how the popup is aligned relative to specified side.
`data-instant`	Present if animations should be instant.
`data-side`	Indicates which side the popup is positioned relative to the anchor.
`data-starting-style`	Present when the menu begins animating in.
`data-ending-style`	Present when the menu is animating out.

Popup.State

type MenuPopupState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the menu is currently open. */
  open: boolean;
  /** Whether the component is nested. */
  nested: boolean;
  /** Whether transitions should be skipped. */
  instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
};

Viewport

A viewport for displaying content transitions. This component is only required if one popup can be opened by multiple triggers, its content changes based on the trigger, and switching between them is animated. Renders a <div> element.

Prop

Type

Default

childrenJSX.Element—

The content to render inside the transition container.JSX.Element

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-activation-direction` `${'left' | 'right' | ''} ${'down' | 'up' | ''}` `—

Indicates the direction from which the popup was activated. This can be used to create directional animations based on how the popup was triggered. Contains space-separated values for both horizontal and vertical axes.` `${'left' | 'right' | ''} ${'down' | 'up' | ''}` `

data-current-—

Applied to the direct child of the viewport when no transitions are present or the new content when it’s entering.-

data-instantUnion—

Present if animations should be instant.'click' | 'dismiss' | 'group' | 'trigger-change'

data-previous-—

Applied to the direct child of the viewport that contains the exiting content when transitions are present.-

data-transitioning-—

Indicates that the viewport is currently transitioning between old and new content.-

Attribute	Description	-
`data-activation-direction`	Indicates the direction from which the popup was activated. This can be used to create directional animations based on how the popup was triggered. Contains space-separated values for both horizontal and vertical axes.
`data-current`	Applied to the direct child of the viewport when no transitions are present or the new content when it’s entering.
`data-instant`	Present if animations should be instant.
`data-previous`	Applied to the direct child of the viewport that contains the exiting content when transitions are present.
`data-transitioning`	Indicates that the viewport is currently transitioning between old and new content.

CSS variables

Name

Type

Default

--popup-height—

The height of the parent popup. This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.

--popup-width—

The width of the parent popup. This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.

CSS Variable	Description	-
`--popup-height`	The height of the parent popup. This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.
`--popup-width`	The width of the parent popup. This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered. It can be used to freeze the dimensions of the popup when animating between different content.

Viewport.State

type MenuViewportState = {
  /** The activation direction of the transitioned content. */
  activationDirection: string | undefined;
  /** Whether the viewport is currently transitioning between contents. */
  transitioning: boolean;
  /** Present if animations should be instant. */
  instant: 'dismiss' | 'click' | 'group' | 'trigger-change' | undefined;
};

The Viewport is optional — reach for it only when a single popup is opened by multiple triggers, its content differs per trigger, and the switch between them is animated. When used, set width: var(--positioner-width) and height: var(--positioner-height) on the Positioner so its box is frozen to the measured size during the transition; otherwise content-driven resizing can make the popup thrash or flip to another side.

Arrow

Displays an element positioned against the menu anchor. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-open-—

Present when the menu popup is open.-

data-closed-—

Present when the menu popup is closed.-

data-uncentered-—

Present when the menu arrow is uncentered.-

data-alignUnion—

Indicates how the popup is aligned relative to specified side.'start' | 'center' | 'end'

data-sideUnion—

Attribute	Description	-
`data-open`	Present when the menu popup is open.
`data-closed`	Present when the menu popup is closed.
`data-uncentered`	Present when the menu arrow is uncentered.
`data-align`	Indicates how the popup is aligned relative to specified side.
`data-side`	Indicates which side the popup is positioned relative to the anchor.

Arrow.State

type MenuArrowState = {
  /** Whether the menu is currently open. */
  open: boolean;
  /** The side of the anchor the component is placed on. */
  side: Side;
  /** The alignment of the component relative to the anchor. */
  align: Align;
  /** Whether the arrow cannot be centered on the anchor. */
  uncentered: boolean;
};

Input

A search field that filters the menu items. Requires the menu to be wrapped in Menu.FilterProvider. Renders an <input> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-highlighted-—

Present while the input shows its focus ring. Cleared when keyboard navigation highlights an item.-

Attribute	Description	-
`data-highlighted`	Present while the input shows its focus ring. Cleared when keyboard navigation highlights an item.

Input.State

type MenuInputState = {
  /**
   * Whether the input shows its focus ring.
   * Cleared when keyboard navigation highlights an item.
   */
  highlighted: boolean;
};

Clear

A button that clears the input text. Requires the menu to be wrapped in Menu.FilterProvider. Renders a <button> element when the input has text.

Prop

Type

Default

nativeButtonbooleantrue

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).boolean

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-disabled-—

Present when the button is disabled.-

Attribute	Description	-
`data-disabled`	Present when the button is disabled.

Clear.State

type MenuClearState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
};

Empty

A message shown when the menu has no matching items. Requires the menu to be wrapped in Menu.FilterProvider. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Empty.State

type MenuEmptyState = {};

List

Groups menu items so other content, such as a filter input, can share the popup. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

List.State

type MenuListState = {};

Item

An individual interactive item in the menu. Renders a <div> element.

Prop

Type

Default

labelstring—

Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.string

onClickfunction—

The click handler for the menu item.((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)

closeOnClickbooleantrue

Whether to close the menu when the item is clicked.boolean

nativeButtonbooleanfalse

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.boolean

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-highlighted-—

Present when the menu item is highlighted.-

data-disabled-—

Present when the menu item is disabled.-

Attribute	Description	-
`data-highlighted`	Present when the menu item is highlighted.
`data-disabled`	Present when the menu item is disabled.

Item.State

type MenuItemState = {
  /** Whether the item should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
};

LinkItem

A link in the menu that can be used to navigate to a different page or section. Renders an <a> element.

Prop

Type

Default

labelstring—

Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.string

closeOnClickbooleanfalse

Whether to close the menu when the item is clicked.boolean

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-highlighted-—

Present when the link is highlighted.-

Attribute	Description	-
`data-highlighted`	Present when the link is highlighted.

LinkItem.State

type MenuLinkItemState = {
  /** Whether the item is highlighted. */
  highlighted: boolean;
};

SubmenuRoot

Groups all parts of a submenu. Doesn’t render its own HTML element.

Prop

Type

Default

defaultOpenbooleanfalse

Whether the menu is initially open. To render a controlled menu, use the open prop instead.boolean

openboolean—

Whether the menu is currently open.boolean

onOpenChangefunction—

Event handler called when the menu is opened or closed.((open: boolean, eventDetails: Menu.SubmenuRoot.ChangeEventDetails) => void)

highlightItemOnHoverbooleantrue

Whether moving the pointer over items should highlight them. Disabling this prop allows CSS :hover to be differentiated from the :focus (data-highlighted) state.boolean

actionsRefRefObject<Menu.Root.Actions | null>—

closeParentOnEscbooleanfalse

When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.boolean

loopFocusbooleantrue

Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.boolean

onItemHighlightedfunction—

onOpenChangeCompletefunction—

Event handler called after any animations complete when the menu is opened or closed.((open: boolean) => void)

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

orientationMenu.Root.Orientation'vertical'

The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.Menu.Root.Orientation

childrenJSX.Element—

The content of the submenu.JSX.Element

SubmenuRoot.State

type MenuSubmenuRootState = {};

SubmenuRoot.ChangeEventReason

type MenuSubmenuRootChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none';

SubmenuRoot.ChangeEventDetails

type MenuSubmenuRootChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** Prevents the popup from unmounting until the `unmount` action is called. */
  preventUnmountOnClose: () => void;
};

SubmenuTrigger

A menu item that opens a submenu. Renders a <div> element.

Prop

Type

Default

labelstring—

Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.string

onClickfunction—

-((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)

nativeButtonbooleanfalse

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.boolean

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

openOnHoverbooleantrue

Whether the menu should also open when the trigger is hovered.boolean

delaynumber100

How long to wait before the menu may be opened on hover. Specified in milliseconds. Requires the openOnHover prop.number

closeDelaynumber0

How long to wait before closing the menu that was opened on hover. Specified in milliseconds. Requires the openOnHover prop.number

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-popup-open-—

Present when the corresponding submenu is open.-

data-highlighted-—

Present when the submenu trigger is highlighted.-

data-disabled-—

Present when the submenu trigger is disabled.-

Attribute	Description	-
`data-popup-open`	Present when the corresponding submenu is open.
`data-highlighted`	Present when the submenu trigger is highlighted.
`data-disabled`	Present when the submenu trigger is disabled.

SubmenuTrigger.State

type MenuSubmenuTriggerState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** Whether the menu is currently open. */
  open: boolean;
};

Group

Groups related menu items with the corresponding label. Renders a <div> element.

Prop

Type

Default

childrenJSX.Element—

The content of the component.JSX.Element

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Group.State

type MenuGroupState = {};

GroupLabel

An accessible label that is automatically associated with its parent group. Renders a <div> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

GroupLabel.State

type MenuGroupLabelState = {};

RadioGroup

Groups related radio items. Renders a <div> element.

Prop

Type

Default

defaultValueany—

The uncontrolled value of the radio item that should be initially selected. To render a controlled radio group, use the value prop instead.any

valueany—

The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the defaultValue prop instead.any

onValueChangefunction—

Function called when the selected value changes.((value: any, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void)

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

childrenJSX.Element—

The content of the component.JSX.Element

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

RadioGroup.State

type MenuRadioGroupState = {
  /** Whether the component is disabled. */
  disabled: boolean;
};

RadioGroup.ChangeEventReason

type MenuRadioGroupChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none';

RadioGroup.ChangeEventDetails

type MenuRadioGroupChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** Prevents the popup from unmounting until the `unmount` action is called. */
  preventUnmountOnClose: () => void;
};

RadioItem

A menu item that works like a radio button in a given group. Renders a <div> element.

Prop

Type

Default

labelstring—

Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.string

value*any—

Value of the radio item. This is the value that will be set in the Menu.RadioGroup when the item is selected.any

onClickfunction—

The click handler for the menu item.((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)

closeOnClickbooleanfalse

Whether to close the menu when the item is clicked.boolean

nativeButtonbooleanfalse

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.boolean

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-checked-—

Present when the menu radio item is selected.-

data-unchecked-—

Present when the menu radio item is not selected.-

data-highlighted-—

Present when the menu radio item is highlighted.-

data-disabled-—

Present when the menu radio item is disabled.-

Attribute	Description	-
`data-checked`	Present when the menu radio item is selected.
`data-unchecked`	Present when the menu radio item is not selected.
`data-highlighted`	Present when the menu radio item is highlighted.
`data-disabled`	Present when the menu radio item is disabled.

RadioItem.State

type MenuRadioItemState = {
  /** Whether the radio item should ignore user interaction. */
  disabled: boolean;
  /** Whether the radio item is currently highlighted. */
  highlighted: boolean;
  /** Whether the radio item is currently selected. */
  checked: boolean;
};

RadioItemIndicator

Indicates whether the radio item is selected. Renders a <span> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

keepMountedbooleanfalse

Whether to keep the HTML element in the DOM when the radio item is inactive.boolean

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-checked-—

Present when the menu radio item is selected.-

data-unchecked-—

Present when the menu radio item is not selected.-

data-disabled-—

Present when the menu radio item is disabled.-

data-starting-style-—

Present when the radio indicator begins animating in.-

data-ending-style-—

Present when the radio indicator is animating out.-

Attribute	Description	-
`data-checked`	Present when the menu radio item is selected.
`data-unchecked`	Present when the menu radio item is not selected.
`data-disabled`	Present when the menu radio item is disabled.
`data-starting-style`	Present when the radio indicator begins animating in.
`data-ending-style`	Present when the radio indicator is animating out.

RadioItemIndicator.State

type MenuRadioItemIndicatorState = {
  /** Whether the radio item is currently selected. */
  checked: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
};

CheckboxItem

A menu item that toggles a setting on or off. Renders a <div> element.

Prop

Type

Default

labelstring—

Overrides the text used for keyboard text navigation and filtering. Falls back to the rendered text when not provided.string

defaultCheckedbooleanfalse

Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the checked prop instead.boolean

checkedboolean—

Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the defaultChecked prop instead.boolean

onCheckedChangefunction—

Event handler called when the checkbox item is ticked or unticked.((checked: boolean, eventDetails: Menu.CheckboxItem.ChangeEventDetails) => void)

onClickfunction—

The click handler for the menu item.((event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>) => void)

closeOnClickbooleanfalse

Whether to close the menu when the item is clicked.boolean

nativeButtonbooleanfalse

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.boolean

disabledbooleanfalse

Whether the component should ignore user interaction.boolean

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-checked-—

Present when the menu checkbox item is checked.-

data-unchecked-—

Present when the menu checkbox item is not checked.-

data-highlighted-—

Present when the menu checkbox item is highlighted.-

data-disabled-—

Present when the menu checkbox item is disabled.-

Attribute	Description	-
`data-checked`	Present when the menu checkbox item is checked.
`data-unchecked`	Present when the menu checkbox item is not checked.
`data-highlighted`	Present when the menu checkbox item is highlighted.
`data-disabled`	Present when the menu checkbox item is disabled.

CheckboxItem.State

type MenuCheckboxItemState = {
  /** Whether the checkbox item should ignore user interaction. */
  disabled: boolean;
  /** Whether the checkbox item is currently highlighted. */
  highlighted: boolean;
  /** Whether the checkbox item is currently ticked. */
  checked: boolean;
};

CheckboxItem.ChangeEventReason

type MenuCheckboxItemChangeEventReason =
  | 'trigger-hover'
  | 'trigger-focus'
  | 'trigger-press'
  | 'outside-press'
  | 'focus-out'
  | 'list-navigation'
  | 'escape-key'
  | 'item-press'
  | 'close-press'
  | 'sibling-open'
  | 'cancel-open'
  | 'imperative-action'
  | 'none';

CheckboxItem.ChangeEventDetails

type MenuCheckboxItemChangeEventDetails = (
  | { reason: 'none'; event: Event }
  | { reason: 'trigger-hover'; event: MouseEvent }
  | { reason: 'trigger-focus'; event: FocusEvent }
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'list-navigation'; event: KeyboardEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'item-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'sibling-open'; event: Event }
  | { reason: 'cancel-open'; event: MouseEvent }
  | { reason: 'imperative-action'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  /** Prevents the popup from unmounting until the `unmount` action is called. */
  preventUnmountOnClose: () => void;
};

CheckboxItemIndicator

Indicates whether the checkbox item is ticked. Renders a <span> element.

Prop

Type

Default

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

keepMountedbooleanfalse

Whether to keep the HTML element in the DOM when the checkbox item is not checked.boolean

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-checked-—

Present when the menu checkbox item is checked.-

data-unchecked-—

Present when the menu checkbox item is not checked.-

data-disabled-—

Present when the menu checkbox item is disabled.-

data-starting-style-—

Present when the indicator begins animating in.-

data-ending-style-—

Present when the indicator is animating out.-

Attribute	Description	-
`data-checked`	Present when the menu checkbox item is checked.
`data-unchecked`	Present when the menu checkbox item is not checked.
`data-disabled`	Present when the menu checkbox item is disabled.
`data-starting-style`	Present when the indicator begins animating in.
`data-ending-style`	Present when the indicator is animating out.

CheckboxItemIndicator.State

type MenuCheckboxItemIndicatorState = {
  /** Whether the checkbox item is currently ticked. */
  checked: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the item is highlighted. */
  highlighted: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
};

Separator

A separator element accessible to screen readers. Renders a <div> element.

Prop

Type

Default

orientationOrientation'horizontal'

The orientation of the separator.Orientation

classfunction—

CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)

stylefunction—

Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)

renderfunction—

Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)

Data attributes

Name

Type

Default

data-orientationUnion—

Indicates the orientation of the separator.'horizontal' | 'vertical'

Attribute	Description	-
`data-orientation`	Indicates the orientation of the separator.

Separator.State

type MenuSeparatorState = {
  /** The orientation of the separator. */
  orientation: Orientation;
};

useFilter

When filtering items yourself, Menu.useFilter matches text according to the user’s locale.

**Parameters:** | Parameter | Type | Default | Description | | :-------- | :------------------ | :------ | :---------- | | options? | MenuFilterOptions | {} | - | **Return Value:**

useFilter

type ReturnValue = MenuFilter;

createHandle

Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.

createHandle

type ReturnValue = Menu.Handle<Payload>;

Handle

Controls a Menu imperatively and associates detached Menu.Trigger components with a Menu.Root. Create one with Menu.createHandle() and pass it to the handle prop of the root and of any triggers rendered outside of it. The imperative methods take effect only while a root using this handle is mounted; calls made before a root attaches (or after it unmounts) are ignored. Opens the menu and associates it with the trigger with the given id. This method should only be called in an event handler or an effect (not during rendering). Closes the menu. This method should only be called in an event handler or an effect (not during rendering).

Prop

Type

Default

isOpenboolean—

Whether the menu is currently open. Returns false while no root is attached to the handle.boolean

Handle.1

function open(triggerId: string): void;

Handle.2

function close(): void;