NavigationAvailable

Context Menu

A contextual menu opened with a pointer or keyboard.

Choose an action.

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/context-menu.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { useState } from 'react';
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuItem,
  ContextMenuSeparator,
} from '@/components/ui/context-menu';

export default function Demo() {
  const [action, setAction] = useState('Choose an action.');
  return (
    <div className="grid gap-4">
      <ContextMenu>
        <ContextMenuTrigger
          className="grid min-h-36 w-full place-items-center rounded-lg border-2 border-dashed border-ink p-6"
          render={<button type="button" aria-label="Document context menu" />}
        >
          Right click or use the context menu key
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuLabel>Document</ContextMenuLabel>
            <ContextMenuItem onClick={() => setAction('Duplicate selected')}>
              Duplicate
            </ContextMenuItem>
            <ContextMenuItem onClick={() => setAction('Archive selected')}>
              Archive
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem disabled>Move to team</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
      <output className="bl-type-small">{action}</output>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check closed, open, highlighted, selected and disabled states where supported.
Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
open	boolean	uncontrolled	Controls menu visibility.
onOpenChange	function	—	Reports open-state changes.

Accessibility

Rules that should remain intact when adapting the component to a product.

Preserve menu item keyboard navigation and disabled state. Context menu actions also need a discoverable alternative in the product.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.