It displays a menu located at the pointer, triggered by a right-click or a long-press.

This component is made on top of Radix UIs Context Menu Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@rafty/ui";

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuItem />
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent>
        <ContextMenuItem />
        <ContextMenuSeparator />
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem />
    <ContextMenuSeparator />
    <ContextMenuLabel />
    <ContextMenuRadioGroup>
      <ContextMenuRadioItem />
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>;

Usage

Unlike other similar components like Dialog, Menu, etc., it is not made of a button component. You can use any element as its trigger.

Right Click here

<ContextMenu>
  <ContextMenuTrigger className="dark:border-secondary-700 flex h-[200px] w-full items-center justify-center border-2 border-dotted">
    Right Click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Back
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>
        More Tools
      </ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>
          Save Page As...
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Developer Tools
        </ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>
      People
    </ContextMenuLabel>
    <ContextMenuRadioGroup value="2">
      <ContextMenuRadioItem value="1">
        Jack
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="2">
        Denial
      </ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Size

There are 3 size options in Context Menu: sm, md (default), & lg.s

Right Click here

<ContextMenu size="sm">
  <ContextMenuTrigger className="dark:border-secondary-700 flex h-[200px] w-full items-center justify-center border-2 border-dotted">
    Right Click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Back
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>
        More Tools
      </ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>
          Save Page As...
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Developer Tools
        </ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>
      People
    </ContextMenuLabel>
    <ContextMenuRadioGroup value="2">
      <ContextMenuRadioItem value="1">
        Jack
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="2">
        Denial
      </ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Barebone

Pass isBarebone prop to remove all style in context-menu.

Right Click here

<ContextMenu isBarebone>
  <ContextMenuTrigger className="dark:border-secondary-700 flex h-[200px] w-full items-center justify-center border-2 border-dotted">
    Right Click here
  </ContextMenuTrigger>
  <ContextMenuContent className="dark:bg-secondary-800 w-[200px] space-y-1.5  rounded-md bg-white p-1 text-sm focus:outline-none">
    <ContextMenuItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 py-1focus:outline-none cursor-pointer  rounded-md px-6 py-1 ">
      Back
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger className="hover:bg-secondary-200 dark:hover:bg-secondary-700 flex w-full cursor-pointer items-center justify-between rounded-md px-6 py-1 hover:border-none focus:outline-none">
        More Tools
      </ContextMenuSubTrigger>
      <ContextMenuSubContent className="dark:bg-secondary-800 w-[180px]  cursor-pointer space-y-2 rounded-md bg-white p-1 text-sm focus:outline-none">
        <ContextMenuItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-6 py-1 hover:border-none focus:outline-none">
          Save Page As...
        </ContextMenuItem>
        <ContextMenuSeparator className="dark:border-secondary-700 border-secondary-200 border" />
        <ContextMenuItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-6 py-1 hover:border-none focus:outline-none">
          Developer Tools
        </ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator className="dark:border-secondary-700 border-secondary-200 border" />
    <ContextMenuCheckboxItem
      checked
      className="hover:bg-secondary-200 dark:hover:bg-secondary-700 flex cursor-pointer items-center rounded-md px-6 py-1 hover:border-none focus:outline-none"
    >
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-6 py-1 hover:border-none focus:outline-none">
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator className="dark:border-secondary-700  border-secondary-200 border" />
    <ContextMenuLabel className="dark:text-secondary-400 cursor-context-menu rounded-md px-6  text-xs hover:border-none focus:outline-none">
      People
    </ContextMenuLabel>
    <ContextMenuRadioGroup value="2">
      <ContextMenuRadioItem
        className="hover:bg-secondary-200 dark:hover:bg-secondary-700 cursor-pointer rounded-md px-6 py-1 hover:border-none focus:outline-none "
        value="1"
      >
        Jack
      </ContextMenuRadioItem>
      <ContextMenuRadioItem
        className="hover:bg-secondary-200 dark:hover:bg-secondary-700 flex cursor-pointer items-center rounded-md px-6 py-1 hover:border-none focus:outline-none"
        value="2"
      >
        Denial
      </ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Unstyled

Right Click here

<ContextMenu>
  <ContextMenuTrigger className="dark:border-secondary-700 flex h-[200px] w-full items-center justify-center border-2 border-dotted">
    Right Click here
  </ContextMenuTrigger>
  <ContextMenuContent
    className="dark:bg-secondary-800 w-[200px] rounded-md bg-white p-1 text-sm "
    isUnstyled
  >
    <ContextMenuItem>
      Back
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>
        More Tools
      </ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>
          Save Page As...
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Developer Tools
        </ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem>
      Show Full URLs
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuLabel>
      People
    </ContextMenuLabel>
    <ContextMenuRadioGroup value="2">
      <ContextMenuRadioItem value="1">
        Jack
      </ContextMenuRadioItem>
      <ContextMenuRadioItem value="2">
        Denial
      </ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Trigger

ContextMenuTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Content

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Item

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Group

Property	Description	Type	Default
asChild		`boolean`	false

Label

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

CheckboxItem

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

RadioGroup

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

RadioItem

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Saperator

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Sub Trigger

ContextMenuSubTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`

Sub Content

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`