Ember UI LogoEmber UI
Components

Context Menu

A context-menu component

Preview

Right click here
import {  ContextMenu,  ContextMenuCheckboxItem,  ContextMenuContent,  ContextMenuItem,  ContextMenuLabel,  ContextMenuRadioGroup,  ContextMenuRadioItem,  ContextMenuSeparator,  ContextMenuShortcut,  ContextMenuSub,  ContextMenuSubContent,  ContextMenuSubTrigger,  ContextMenuTrigger,} from "@/registry/axon/ui/context-menu";export default function ContextMenuDemo() {  return (    <ContextMenu>      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">        Right click here      </ContextMenuTrigger>      <ContextMenuContent className="w-52">        <ContextMenuItem inset>          Back          <ContextMenuShortcut>⌘[</ContextMenuShortcut>        </ContextMenuItem>        <ContextMenuItem disabled inset>          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>            <ContextMenuSeparator />            <ContextMenuItem variant="destructive">Delete</ContextMenuItem>          </ContextMenuSubContent>        </ContextMenuSub>        <ContextMenuSeparator />        <ContextMenuCheckboxItem checked>          Show Bookmarks        </ContextMenuCheckboxItem>        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>        <ContextMenuSeparator />        <ContextMenuRadioGroup value="pedro">          <ContextMenuLabel inset>People</ContextMenuLabel>          <ContextMenuRadioItem value="pedro">            Pedro Duarte          </ContextMenuRadioItem>          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>        </ContextMenuRadioGroup>      </ContextMenuContent>    </ContextMenu>  );}

Installation

CLI

npx shadcn@latest add @emberui/context-menu
yarn shadcn@latest add @emberui/context-menu
pnpm dlx shadcn@latest add @emberui/context-menu
bunx --bun shadcn@latest add @emberui/context-menu

Reference

This component is based on the shadcn/ui Context Menu component.

On this page