Navigation

Context Menu

Displays a menu to the user, opened on right-click or a long press.

Preview

'use client';

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@brika/clay/components/context-menu';
/** Right-click (or long-press on mobile) the target area to open the menu. */
export default function ContextMenuDefaultDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-24 w-48 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-input text-muted-foreground text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          New file
          <ContextMenuShortcut>Cmd+N</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Rename
          <ContextMenuShortcut>F2</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More options</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Properties</ContextMenuItem>
            <ContextMenuItem>Compress</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

01 Installation

Install

Pull Context Menu from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { ContextMenu } from "@brika/clay";

tsxGranular1 line

import { ContextMenu } from "@brika/clay/components/context-menu";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxContext Menu.tsx43 lines

'use client';

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@brika/clay/components/context-menu';
/** Right-click (or long-press on mobile) the target area to open the menu. */
export default function ContextMenuDefaultDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-24 w-48 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-input text-muted-foreground text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          New file
          <ContextMenuShortcut>Cmd+N</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Rename
          <ContextMenuShortcut>F2</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>More options</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Properties</ContextMenuItem>
            <ContextMenuItem>Compress</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

03 Examples

Context Menu, every way

Checkbox

ContextMenuCheckboxItem maintains a checked state for toggleable settings.

GitHub

'use client';

import { useState } from 'react';
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@brika/clay/components/context-menu';
/** ContextMenuCheckboxItem maintains a checked state for toggleable settings. */
export default function ContextMenuCheckboxDemo() {
  const [showGrid, setShowGrid] = useState(true);
  const [snapToGrid, setSnapToGrid] = useState(false);
  const [showRulers, setShowRulers] = useState(false);

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-24 w-48 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-input text-muted-foreground text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuLabel>View options</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
          Show grid
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={snapToGrid} onCheckedChange={setSnapToGrid}>
          Snap to grid
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
          Show rulers
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Radio

ContextMenuRadioGroup enforces a single active choice across a set of items.

GitHub

'use client';

import { useState } from 'react';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@brika/clay/components/context-menu';
/** ContextMenuRadioGroup enforces a single active choice across a set of items. */
export default function ContextMenuRadioDemo() {
  const [density, setDensity] = useState('comfortable');

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-24 w-48 cursor-context-menu items-center justify-center rounded-lg border border-dashed border-input text-muted-foreground text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuLabel>Row density</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value={density} onValueChange={setDensity}>
          <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
          <ContextMenuRadioItem value="comfortable">Comfortable</ContextMenuRadioItem>
          <ContextMenuRadioItem value="spacious">Spacious</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

04 Accessibility

Accessibility

Trigger carries aria-haspopup="menu" automatically.
Keyboard: Shift+F10 or the context-menu key opens the menu on the focused trigger.
Arrow keys navigate items; Enter/Space activate; Escape dismisses.
Destructive items should use variant="destructive" so the visual indication matches AT context.

05 API reference

API reference

Props specific to Context Menu. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<ContextMenu />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuCheckboxItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuItem />

2 props

inset
boolean
When true, adds extra leading padding to align with items that have icons.
variantdefault 'default'
'default' | 'destructive'
"default" or "destructive", destructive renders in red.

<ContextMenuLabel />

1 prop

inset
boolean
No description.

<ContextMenuPortal />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuRadioGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuRadioItem />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuSeparator />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuShortcut />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuSub />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuSubContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ContextMenuSubTrigger />

1 prop

inset
boolean
No description.

<ContextMenuTrigger />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.