Context Menu

A custom context menu triggered by right-clicking or long-pressing an element.

Usage

import { ContextMenu } from "@rhinolabs/ui"

export default function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenu.Trigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenu.Trigger>
      <ContextMenu.Content>
        <ContextMenu.Item>
          Profile
          <ContextMenu.Shortcut>⌘P</ContextMenu.Shortcut>
        </ContextMenu.Item>
        <ContextMenu.Item>Settings</ContextMenu.Item>
        <ContextMenu.Item>Logout</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu>
  )
}

Examples

With Submenus

Context menu with nested options.

<ContextMenu>
  <ContextMenu.Trigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Back</ContextMenu.Item>
    <ContextMenu.Item>Forward</ContextMenu.Item>
    <ContextMenu.Item>Reload</ContextMenu.Item>
    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
      <ContextMenu.SubContent>
        <ContextMenu.Item>Save Page As...</ContextMenu.Item>
        <ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
        <ContextMenu.Item>Name Window...</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>
  </ContextMenu.Content>
</ContextMenu>

With Checkbox and Radio Items

Context menu with selectable options.

<ContextMenu>
  <ContextMenu.Trigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.CheckboxItem checked>Show Toolbar</ContextMenu.CheckboxItem>
    <ContextMenu.CheckboxItem>Show Bookmarks</ContextMenu.CheckboxItem>
    <ContextMenu.Separator />
    <ContextMenu.RadioGroup value="pedro">
      <ContextMenu.Label>People</ContextMenu.Label>
      <ContextMenu.RadioItem value="pedro">Pedro</ContextMenu.RadioItem>
      <ContextMenu.RadioItem value="colm">Colm</ContextMenu.RadioItem>
    </ContextMenu.RadioGroup>
  </ContextMenu.Content>
</ContextMenu>

Props

ContextMenu

The root component that accepts all standard div attributes.

ContextMenuItem

Prop	Type	Description
inset	boolean	Whether to inset the item content
disabled	boolean	Whether the item is disabled
onSelect	(event: Event) => void	Selection callback

ContextMenuCheckboxItem

Prop	Type	Description
checked	boolean	The checked state
onCheckedChange	(checked: boolean) => void	Checked state change callback

Design Considerations

• Keep menu items organized logically
• Use separators to group related items
• Include keyboard shortcuts when applicable
• Maintain consistent styling
• Consider touch device interactions

Accessibility

• Supports keyboard navigation
• Provides ARIA labels
• Maintains focus management
• Handles screen reader announcements
• Supports keyboard shortcuts