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 Radix UI.

Installation

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

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

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

Usage

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

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 {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "@/components/ui/context-menu";
<ContextMenu >
  <ContextMenuTrigger asChild>
    <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
      Right click this area
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Reload</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>;

With Checkboxes

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
  ContextMenuSeparator,
  ContextMenuCheckboxItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
} from "@/components/ui/context-menu";
<ContextMenu>
  <ContextMenuTrigger asChild>
    <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
      Right click here
    </div>
  </ContextMenuTrigger>
  <ContextMenuContent className="w-52">
    <ContextMenuItem inset>
      Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset disabled>
      Forward <ContextMenuShortcut>⌘]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset>
      Reload <ContextMenuShortcut>⌘R</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent className="w-44">
        <ContextMenuItem>Save Page...</ContextMenuItem>
        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
        <ContextMenuItem>Name Window...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Developer Tools</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel inset>People</ContextMenuLabel>
    <ContextMenuRadioGroup value="pedro">
      <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
      <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Radix UI.

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.