Context Menu

A menu opened by right-click, positioned at the pointer. It has no element to anchor to — the anchor is a point — so it clamps against the viewport rather than flipping.

src/components/ui/context-menu.tsx

About

From the component's own source, where it was written.

A menu opened by right-click, positioned at the pointer.

Unlike the other layers this has no element to anchor to — the anchor is a point. It clamps against the viewport itself rather than flipping, since a context menu should open down-and-right from the cursor whenever it fits.

Install

npx astralyx-ui add context-menu

Usage

import { ContextMenu } from '@/components/ui/context-menu'

<ContextMenu items={items}>
  <div>Right-click me</div>
</ContextMenu>

Composer

Change the props and the source below follows.

Right-click anywhere here

Props

destructive item

tsx

<ContextMenu
  items={[
    { id: 'edit', label: 'Rename', icon: <Pencil />, shortcut: '⌘E' },
    { id: 'del', label: 'Delete', destructive: true, separatorBefore: true },
  ]}
>
  <Card>…</Card>
</ContextMenu>

Examples

On a card

tsx

<ContextMenu items={items}><Card>…</Card></ContextMenu>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ContextMenu`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
children	ReactNode	required	The region that responds to right-click.
items	ContextMenuItem[]	required	{ id, label, icon?, shortcut?, disabled?, destructive?, separatorBefore?, onSelect? }

Types

`ContextMenuItem`

A menu opened by right-click, positioned at the pointer.

Field	Type	Description
id	string	—
label	string	—
icon?	ReactNode	—
shortcut?	string	—
disabled?	boolean	—
destructive?	boolean	—
separatorBefore?	boolean	—
onSelect?	() => void	—

Behaviour

Topic	Detail	Description
positioning	clamped	Opens down-and-right from the cursor, pulled back inside the viewport when it would overflow.