ContextMenu

A right-click menu family for compact action, selection, and nested action surfaces.

GitHub

Preview#

Preview defaults the menu open so the row styling, density, and theme differences are visible immediately; dismiss it and right-click the trigger to reopen it.

Right click thread

Anatomy#

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "raft-ui";

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuLabel />
    <ContextMenuItem>
      <ContextMenuShortcut />
    </ContextMenuItem>
    <ContextMenuSeparator />
  </ContextMenuContent>
</ContextMenu>

Usage#

Radio group#

Right click notification

Checkboxes#

Right click list

API#WIP

ContextMenu#

PropTypeDefaultDescription
...propsBase UI ContextMenu.Root.Props—Owns right-click open state, focus roving, keyboard navigation, and dismissal.

ContextMenuTrigger#

PropTypeDefaultDescription
...propsBase UI ContextMenu.Trigger.Props—Right-click or long-press target. Renders a div and keeps text selection off.

ContextMenuPortal#

PropTypeDefaultDescription
containerHTMLElement | RefObject | null—Custom portal container for framed previews or contained overlays.
...propsBase UI ContextMenu.Portal.Props—Portals the menu to the body or a custom container.

ContextMenuContent#

PropTypeDefaultDescription
...propsBase UI Popup + Positioner props—Portaled floating menu shell. Keeps the menu near the context point while shifting it inside the collision boundary with 8px of padding.

ContextMenuPopup#

PropTypeDefaultDescription
...propsComponentPropsWithRef<"div">—Static panel shell for docs previews and non-portaled comparison panes.

ContextMenuItem#

PropTypeDefaultDescription
...propsBase UI ContextMenu.Item.Props—Action row. Compose leading icons, label text, and trailing shortcuts as children.

ContextMenuItemLabel#

PropTypeDefaultDescription
...propsStyledProps<ComponentPropsWithRef<"span">>—Small muted label above grouped items or inside an item.

ContextMenuLabel#

PropTypeDefaultDescription
...propsdiv props—Section label for grouped rows.

ContextMenuShortcut#

PropTypeDefaultDescription
...propsKbd props—Right-aligned keyboard hint composed inside a menu row.

ContextMenuSeparator#

PropTypeDefaultDescription
...propsBase UI ContextMenu.Separator.Props—Group separator mapped from the source ContextMenuDivider primitive.

ContextMenuRadioGroup#

PropTypeDefaultDescription
...propsBase UI ContextMenu.RadioGroup.Props—Single-selection group inside the menu.

ContextMenuRadioItem#

PropTypeDefaultDescription
...propsBase UI ContextMenu.RadioItem.Props—Selectable row with a trailing check indicator.

ContextMenuRadioItemIndicator#

PropTypeDefaultDescription
...propsBase UI ContextMenu.RadioItemIndicator.Props—Radio dot shown inside a selected ContextMenuRadioItem.

ContextMenuCheckboxItem#

PropTypeDefaultDescription
...propsBase UI ContextMenu.CheckboxItem.Props—Toggleable row with a trailing check indicator.

ContextMenuCheckboxItemIndicator#

PropTypeDefaultDescription
...propsBase UI ContextMenu.CheckboxItemIndicator.Props—Check indicator shown inside a checked ContextMenuCheckboxItem.

ContextMenuSubmenu#

PropTypeDefaultDescription
...propsBase UI ContextMenu.SubmenuRoot.Props—Nested context-menu branch for secondary action groups.

ContextMenuSubmenuTrigger#

PropTypeDefaultDescription
...propsBase UI ContextMenu.SubmenuTrigger.Props—Row that opens a nested menu. Compose the chevron as the trailing icon.