ContextMenu

Introduction

The ContextMenu component provides a customizable right-click (context menu) experience for any element. It wraps its children and displays a floating menu at the cursor position when the user right-clicks. The menu supports icons, dividers, nested submenus, disabled items, and inherits all features from the Dropdown component. This is ideal for file managers, editors, dashboards, or any UI where contextual actions are needed.

Import

import { ContextMenu } from '@odyssee/components';

LiveCodeEditor examples

Basic Context Menu

Code Éditable

Résultat

Context Menu with Icons

Code Éditable

Résultat

Nested Context Menu

Code Éditable

Résultat

Disabled Items

Code Éditable

Résultat

Context Menu on Cards

Code Éditable

Résultat

Props

Prop	Type	Default	Description
items	Dropdown.Item[]	—	Array of menu items (see Dropdown documentation for item shape, supports icons, submenus, etc.)
children	HTMLElement | HTMLElement[]	—	The element(s) that will trigger the context menu on right-click.
menuClassName	string	—	Additional CSS classes for the menu container.
onOpen	() => void	—	Callback fired when the menu opens.
onClose	() => void	—	Callback fired when the menu closes.

Dropdown.Item shape (for items):

• label: string — The text of the menu item.
• icon: JSX.Element (optional) — Icon to display before the label.
• onClick: () => void (optional) — Click handler for the item.
• disabled: boolean (optional) — If true, the item is disabled.
• divider: boolean (optional) — If true, renders a divider instead of an item.
• submenu: Dropdown.Item[] (optional) — Nested submenu items.
• className: string (optional) — Additional classes for the item.

Implementation notes

• ContextMenu is a wrapper around the Dropdown component, providing a right-click trigger and cursor-based positioning.
• The menu is rendered in a portal attached to the document body for correct positioning and stacking.
• Supports nested submenus, icons, dividers, and disabled items via the Dropdown.Item API.
• The menu automatically closes on click outside or when pressing Escape.
• The menu's position is adjusted if it would overflow the viewport.
• All menu content and behavior are fully customizable via the items prop.

Accessibility

• The context menu is rendered as a role="menu" element for assistive technologies.
• Keyboard navigation is supported within the menu (inherited from Dropdown).
• The trigger element(s) should be focusable for best accessibility.
• The menu closes automatically on outside click or Escape key.
• Ensure all menu actions are accessible via keyboard and screen readers.

Best practices

• Use clear, concise labels for menu items.
• Group related actions and use dividers for clarity.
• Avoid placing destructive actions (like "Delete") next to frequent actions.
• Use icons to visually distinguish actions when appropriate.
• Keep menus short and relevant to the context.
• Always provide a fallback for critical actions outside the context menu.

Related links

• Dropdown documentation
• Popover documentation
• Tooltip documentation
• Odyssee Components documentation