Menu

Root of the Menu compound component, a list of actions or options that opens from a trigger. Manages the open state and, when disabled, disables the trigger and every item. Doesn't render its own HTML element.

Button that opens the menu when clicked. Renders a <button> element.

Combines Menu.PortalPrimitive, Menu.PositionerPrimitive, and Menu.PopupPrimitive into a single part. Use portalElement or positionerElement to replace the portal or positioner. Renders a <div> element.

Portal container that renders the menu outside the normal DOM hierarchy. Renders a <div> element.

Positions the menu popup against its trigger and keeps it inside the viewport. Renders a <div> element.

The menu panel that holds the menu items. Renders a <div> element.

Interactive item in the menu that runs an action when selected. Renders a <div> element.

Line that visually separates groups of menu items. Renders a <div> element.

Groups related menu items under a Menu.GroupLabel. Renders a <div> element.

Label for a menu group, announced to assistive technologies. Renders a <div> element.

Root of a nested submenu inside a menu. Place Menu.SubmenuTriggerItem and Menu.SubmenuPopup inside it. Doesn't render its own HTML element.

Menu item that opens a submenu, with a chevron icon at the end. Renders a <div> element.

Combines Menu.PortalPrimitive, Menu.PositionerPrimitive, and Menu.PopupPrimitive into a single part that opens to the right of its trigger item. Use portalElement or positionerElement to replace the portal or positioner. Renders a <div> element.

The submenu panel that holds the nested menu items. Returns focus to Menu.SubmenuTriggerItem when it closes. Renders a <div> element.

Combines Menu.CheckboxItemPrimitive and Menu.CheckboxItemIndicatorPrimitive into a single part, with the check mark after the label. Renders a <div> element.

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

Check mark shown while the checkbox item is checked. Renders a <span> element.

Groups radio items so that only one of them can be selected at a time. Renders a <div> element.

Combines Menu.RadioItemPrimitive and Menu.RadioItemIndicatorPrimitive into a single part, with the check mark after the label. Renders a <div> element.

Menu item that works like a radio button inside Menu.RadioGroup. Renders a <div> element.

Check mark shown while the radio item is selected. Renders a <span> element.