Context Menu · Astralis UI

Client component

A Menu opened by right-click and anchored at the pointer instead of a trigger button. Everything else is Menu: the same items, roving focus, typeahead, Escape/outside dismissal and styling.

Right-click this area, or focus it and press Shift+F10

import { ContextMenu, Center, Text } from "astralis-ui";

export function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenu.Trigger>
        <Center
          w="full"
          maxW="md"
          h="32"
          rounded="lg"
          border="normal"
          borderStyle="dashed"
          borderColor="base"
          style={{ userSelect: "none" }}
          tabIndex={0}
        >
          <Text size="sm" color="muted">
            Right-click this area, or focus it and press Shift+F10
          </Text>
        </Center>
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item shortcut="⌘C">Copy</ContextMenu.Item>
        <ContextMenu.Item shortcut="⌘V">Paste</ContextMenu.Item>
        <ContextMenu.Item>Rename</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item danger>Delete</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu>
  );
}

Right-click here

sideOffset

closeOnSelect

import { Center, ContextMenu, Text } from "astralis-ui";

<ContextMenu>
  <ContextMenu.Trigger>
    <Center h="24" rounded="lg" border="normal" borderStyle="dashed" borderColor="base" tabIndex={0}>
      <Text size="sm" color="muted">Right-click here</Text>
    </Center>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Copy</ContextMenu.Item>
    <ContextMenu.Item>Paste</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item danger>Delete</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>

Import#

import { ContextMenu } from "astralis-ui";

How it anchors#

Right-clicking places an invisible 1px anchor at the pointer and opens the menu against it. A right-click somewhere else first dismisses (outside pointer-down), then reopens fresh at the new position, matching platform context-menu behavior.

Props#

Menu's props, minus side and align, because the pointer is the anchor:

Prop	Type	Default	Description
`open · defaultOpen · onOpenChange`	`boolean · boolean · (open: boolean) => void`	`None · false · None`	Controlled / initial state, and the change callback.
`sideOffset`	`number`	`2`	Gap between the pointer and the menu, in pixels.
`closeOnSelect`	`boolean`	`true`	Closes the menu after an item is activated.

Parts#

Prop	Type	Default	Description
`ContextMenu.Trigger`	`children: ReactElement`	None	Wraps the element that opens the menu on right-click. Make it focusable for keyboard users.
`ContextMenu.Content / Item / Label / Separator / Group`	`as on Menu`	None	Identical to Menu's parts, including Item's onSelect, icon, shortcut and danger.

Keyboard#

The menu opens from the browser's contextmenu event, which the keyboard fires too. For that to work the trigger element has to be focusable, as the area in the demo above is.

Key	Action
`Shift+F10` / `Menu` key	Open the menu from the focused trigger
`↑` `↓`	Move focus between items (wraps)
`Home` / `End`	First / last item
type characters	Jump to the item starting with what you typed
`Enter` / `Space`	Activate the focused item
`Esc`	Close
`Tab`	Close