Context Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Right click here

"use client";

import { ContextMenu } from "@smartacteam/ambient-web/context-menu";

export function ContextMenuDemo() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger className="flex h-37.5 w-75 items-center justify-center rounded-md border border-dashed border-stroke-default text-sm text-text-primary">
        Right click here
      </ContextMenu.Trigger>
      <ContextMenu.Content className="w-52">
        <ContextMenu.Item inset>
          Back
          <ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
        </ContextMenu.Item>
        <ContextMenu.Item inset disabled>
          Forward
          <ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
        </ContextMenu.Item>
        <ContextMenu.Item inset>
          Reload
          <ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
        </ContextMenu.Item>
        <ContextMenu.SubmenuRoot>
          <ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
          <ContextMenu.Content className="w-44">
            <ContextMenu.Item>Save Page...</ContextMenu.Item>
            <ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
            <ContextMenu.Item>Name Window...</ContextMenu.Item>
            <ContextMenu.Separator />
            <ContextMenu.Item>Developer Tools</ContextMenu.Item>
            <ContextMenu.Separator />
            <ContextMenu.Item variant="destructive">Delete</ContextMenu.Item>
          </ContextMenu.Content>
        </ContextMenu.SubmenuRoot>
        <ContextMenu.Separator />
        <ContextMenu.CheckboxItem checked>
          Show Bookmarks
        </ContextMenu.CheckboxItem>
        <ContextMenu.CheckboxItem>Show Full URLs</ContextMenu.CheckboxItem>
        <ContextMenu.Separator />
        <ContextMenu.Group>
          <ContextMenu.GroupLabel inset>People</ContextMenu.GroupLabel>
        </ContextMenu.Group>
        <ContextMenu.RadioGroup value="pedro">
          <ContextMenu.RadioItem value="pedro">
            Pedro Duarte
          </ContextMenu.RadioItem>
          <ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
        </ContextMenu.RadioGroup>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
}

Usage

import { ContextMenu } from "@smartacteam/ambient-web/context-menu";

<ContextMenu.Root>
  <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Profile</ContextMenu.Item>
    <ContextMenu.Item>Billing</ContextMenu.Item>
    <ContextMenu.Item>Team</ContextMenu.Item>
    <ContextMenu.Item>Subscription</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>