ContextMenu
A right-click menu family for compact action, selection, and nested action surfaces.
Preview defaults the menu open so the row styling and density are visible immediately; dismiss it and right-click the trigger to reopen it.
Right click thread
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuTrigger,
} from "raft-ui";
<ContextMenu>
<ContextMenuTrigger />
<ContextMenuContent>
<ContextMenuLabel />
<ContextMenuItem>
<ContextMenuShortcut />
</ContextMenuItem>
<ContextMenuSeparator />
</ContextMenuContent>
</ContextMenu>API#WIP
...propsBase UI ContextMenu.Root.Props
Owns right-click open state, focus roving, keyboard navigation, and dismissal.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.Root.Props | — | Owns right-click open state, focus roving, keyboard navigation, and dismissal. |
...propsBase UI ContextMenu.Trigger.Props
Right-click or long-press target. Renders a div and keeps text selection off.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.Trigger.Props | — | Right-click or long-press target. Renders a div and keeps text selection off. |
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.
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | RefObject | null | — | Custom portal container for framed previews or contained overlays. |
...props | Base UI ContextMenu.Portal.Props | — | Portals the menu to the body or a custom container. |
...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.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base 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. |
...propsComponentPropsWithRef<"div">
Static panel shell for docs previews and non-portaled comparison panes.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Static panel shell for docs previews and non-portaled comparison panes. |
...propsBase UI ContextMenu.Item.Props
Action row. Compose leading icons, label text, and trailing shortcuts as children.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.Item.Props | — | Action row. Compose leading icons, label text, and trailing shortcuts as children. |
...propsStyledProps<ComponentPropsWithRef<"span">>
Small muted label above grouped items or inside an item.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | StyledProps<ComponentPropsWithRef<"span">> | — | Small muted label above grouped items or inside an item. |
...propsdiv props
Section label for grouped rows.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Section label for grouped rows. |
...propsKbd props
Right-aligned keyboard hint composed inside a menu row.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Kbd props | — | Right-aligned keyboard hint composed inside a menu row. |
...propsBase UI ContextMenu.Separator.Props
Group separator mapped from the source ContextMenuDivider primitive.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.Separator.Props | — | Group separator mapped from the source ContextMenuDivider primitive. |
...propsStyledProps<ComponentPropsWithRef<"div">>
Footer region with a top hairline for auxiliary controls.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | StyledProps<ComponentPropsWithRef<"div">> | — | Footer region with a top hairline for auxiliary controls. |
...propsBase UI ContextMenu.RadioGroup.Props
Single-selection group inside the menu.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.RadioGroup.Props | — | Single-selection group inside the menu. |
...propsBase UI ContextMenu.RadioItem.Props
Selectable row with a trailing check indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.RadioItem.Props | — | Selectable row with a trailing check indicator. |
...propsBase UI ContextMenu.RadioItemIndicator.Props
Radio dot shown inside a selected ContextMenuRadioItem.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.RadioItemIndicator.Props | — | Radio dot shown inside a selected ContextMenuRadioItem. |
...propsBase UI ContextMenu.CheckboxItem.Props
Toggleable row with a trailing check indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.CheckboxItem.Props | — | Toggleable row with a trailing check indicator. |
...propsBase UI ContextMenu.CheckboxItemIndicator.Props
Check indicator shown inside a checked ContextMenuCheckboxItem.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.CheckboxItemIndicator.Props | — | Check indicator shown inside a checked ContextMenuCheckboxItem. |
...propsBase UI ContextMenu.SubmenuRoot.Props
Nested context-menu branch for secondary action groups.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.SubmenuRoot.Props | — | Nested context-menu branch for secondary action groups. |
...propsBase UI ContextMenu.SubmenuTrigger.Props
Row that opens a nested menu. Compose the chevron as the trailing icon.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI ContextMenu.SubmenuTrigger.Props | — | Row that opens a nested menu. Compose the chevron as the trailing icon. |