---
title: "Context Menu"
description: "A floating right-click style menu with items, keyboard shortcuts, dividers and a danger variant."
---

A floating right-click style menu with items, keyboard shortcuts, dividers and a danger variant. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Context Menu — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add context-menu
```

npm dependencies: class-variance-authority.

Files written — React: components/ui/context-menu.tsx. Vue: components/ui/context-menu/ContextMenu.vue, components/ui/context-menu/ContextMenuItem.vue, components/ui/context-menu/ContextMenuShortcut.vue, components/ui/context-menu/ContextMenuDivider.vue, components/ui/context-menu/index.ts.

## Usage

React:

```tsx
import { ContextMenu } from "@/components/ui/context-menu"
```

Vue:

```ts
import { ContextMenu, ContextMenuItem, ContextMenuShortcut, ContextMenuDivider } from "@/components/ui/context-menu"
```

## API reference

**`ContextMenu`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

The registry exports `ContextMenu`, `ContextMenuItem`, `ContextMenuShortcut`, `ContextMenuDivider`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Open the menu from both pointer and keyboard input, move focus into it, support arrow-key navigation, and restore focus to the trigger when it closes.

## Tokens

Context Menu reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.