Contextmenu — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download context-menu -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  ContextMenuTrigger,
  ContextMenu,
  ContextMenuItem,
} from "@/components/ui/context-menu";
<ContextMenuTrigger>
  <div className="grid h-36 w-72 place-items-center rounded-lg border border-dashed">
    Right click here
  </div>
  <ContextMenu>
    <ContextMenuItem>Reload</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>;

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

ContextMenuTrigger
ContextMenuGroup
ContextMenuPortal
ContextMenuSub
ContextMenuRadioGroup
ContextMenuSubTrigger
ContextMenuSubContent
ContextMenuContent
ContextMenuItem
ContextMenuCheckboxItem
ContextMenuRadioItem
ContextMenuLabel
ContextMenuSeparator
ContextMenuShortcut

Examples

Default

import {
  ContextMenuTrigger,
  ContextMenu,
  ContextMenuItem,
} from "@/components/ui/context-menu";
const Target = () => (
  <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click this area
  </div>
);
<ContextMenuTrigger>
  <Target />
  <ContextMenu>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Reload</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>;

With Checkboxes

import {
  ContextMenuTrigger,
  ContextMenu,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuItem,
  ContextMenuShortcut,
} from "@/components/ui/context-menu";
const Target = () => (
  <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click this area
  </div>
);
<ContextMenuTrigger>
  <Target />
  <ContextMenu className="w-52">
    <ContextMenuLabel>Actions</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

ContextMenuItem

Prop	Type	Default	Description
`inset`	`boolean`	`—`
`variant`	`"default" \| "destructive"`	`"default"`

ContextMenuLabel

Prop	Type	Default	Description
`inset`	`boolean`	`—`

ContextMenuSubTrigger

Prop	Type	Default	Description
`inset`	`boolean`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.