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

Installation

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

pnpm exec frontfriend download context-menu -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { ContextMenu } from "@/components/ui/context-menu";
import { ContextMenuTrigger } from "@/components/ui/context-menu";
import { ContextMenuContent } from "@/components/ui/context-menu";
import { ContextMenuItem } from "@/components/ui/context-menu";
import * as UI from "@/components/ui/context-menu";

const Component = UI.ContextMenu;

const args = {
  "label": "Right click here",
  "item": "Reload",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ContextMenu
    ><ContextMenuTrigger>{{ args.label }}</ContextMenuTrigger
    ><ContextMenuContent
      ><ContextMenuItem>{{ args.item }}</ContextMenuItem></ContextMenuContent
    ></ContextMenu
  >
</template>

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

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

Subcomponents

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

Examples

Default

<script setup lang="ts">
import { ContextMenu } from "@/components/ui/context-menu";
import { ContextMenuTrigger } from "@/components/ui/context-menu";
import { ContextMenuContent } from "@/components/ui/context-menu";
import { ContextMenuItem } from "@/components/ui/context-menu";
import * as UI from "@/components/ui/context-menu";

const Component = UI.ContextMenu;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ContextMenu
    ><ContextMenuTrigger as-child
      ><div
        class="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
  >
</template>

With Checkboxes

<script setup lang="ts">
import { ContextMenu } from "@/components/ui/context-menu";
import { ContextMenuTrigger } from "@/components/ui/context-menu";
import { ContextMenuContent } from "@/components/ui/context-menu";
import { ContextMenuItem } from "@/components/ui/context-menu";
import { ContextMenuShortcut } from "@/components/ui/context-menu";
import { ContextMenuSub } from "@/components/ui/context-menu";
import { ContextMenuSubTrigger } from "@/components/ui/context-menu";
import { ContextMenuSubContent } from "@/components/ui/context-menu";
import { ContextMenuSeparator } from "@/components/ui/context-menu";
import { ContextMenuCheckboxItem } from "@/components/ui/context-menu";
import { ContextMenuLabel } from "@/components/ui/context-menu";
import { ContextMenuRadioGroup } from "@/components/ui/context-menu";
import { ContextMenuRadioItem } from "@/components/ui/context-menu";
import * as UI from "@/components/ui/context-menu";

const Component = UI.ContextMenu;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ContextMenu
    ><ContextMenuTrigger as-child
      ><div
        class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
      >
        Right click here
      </div></ContextMenuTrigger
    ><ContextMenuContent class="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 class="w-44"
          ><ContextMenuItem>Save Page...</ContextMenuItem
          ><ContextMenuItem>Create Shortcut...</ContextMenuItem
          ><ContextMenuItem>Name Window...</ContextMenuItem
          ><ContextMenuSeparator /><ContextMenuItem
            >Developer Tools</ContextMenuItem
          ></ContextMenuSubContent
        ></ContextMenuSub
      ><ContextMenuSeparator /><ContextMenuCheckboxItem :model-value="true"
        >Show Bookmarks
        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut></ContextMenuCheckboxItem
      ><ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem
      ><ContextMenuSeparator /><ContextMenuLabel inset>People</ContextMenuLabel
      ><ContextMenuRadioGroup model-value="pedro"
        ><ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem
        ><ContextMenuRadioItem value="colm"
          >Colm Tuite</ContextMenuRadioItem
        ></ContextMenuRadioGroup
      ></ContextMenuContent
    ></ContextMenu
  >
</template>

API reference

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

ContextMenuItem

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`
`variant`	`"default" \| "destructive"`	`—`

ContextMenuLabel

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`

ContextMenuSeparator

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

ContextMenuShortcut

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

ContextMenuSubContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

ContextMenuSubTrigger

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`

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