Components

ContextMenu

An action menu that opens at the pointer on right click or long press on an area.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { ContextMenu } from '@bigbang/ui';
Source: ContextMenu.tsx
Storybook: ContextMenu · Playground

ContextMenu is in the @bigbang/ui package. Its parts are the DropdownMenu parts.

import { ContextMenu } from '@bigbang/ui';

<ContextMenu trigger={<Card>…</Card>}>
  <ContextMenu.Item icon="pencil" onSelect={edit}>Edit</ContextMenu.Item>
  <ContextMenu.Separator />
  <ContextMenu.Item icon="trash" tone="danger" onSelect={remove}>Delete</ContextMenu.Item>
</ContextMenu>;

Props

triggerRequired

Description: The area that opens the menu on right click or long press, such as a table row or a card.
Type: ReactElement

childrenRequired

Description: Items, groups, separators and submenus built from the ContextMenu.* parts, the same parts as DropdownMenu.
Type: ReactNode

open

Description: Controlled open state. Pass it with onOpenChange.
Type: boolean

defaultOpen

Description: Open state on first render when the menu is uncontrolled.
Type: boolean
Default: false

onOpenChange

Description: Called with the new open state.
Type: (open: boolean) => void

disabled

Description: Stops the area from opening the menu.
Type: boolean
Default: false

Parts

ContextMenu.Item, LinkItem, CheckboxItem, RadioGroup, RadioItem, Group, Separator, Submenu: the same as the DropdownMenu parts; their props are on the DropdownMenu page.

Data attributes

data-component="context-menu": on the menu; data-component="context-menu-trigger": on the area.