Context Menu

A menu that grows from wherever the pointer was, on a right-click or a long press.

Right-click, or long-press, here

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/context-menu

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { ContextMenu } from "@/components/liquikit/context-menu"
import { Menu } from "@/components/liquikit/menu"

<ContextMenu.Root>
  <ContextMenu.Trigger>Right-click here</ContextMenu.Trigger>
  <ContextMenu.Popup>
    <Menu.Item>Get Info</Menu.Item>
    <Menu.Item>Rename</Menu.Item>
  </ContextMenu.Popup>
</ContextMenu.Root>

The items are the ones from Menu.

API Reference#

ContextMenu.Root

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's context menu, plus className and style.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's context menu, plus className and style.

Combobox Dialog