Basic: The simplest usage of ContextMenu.

Features:

- Right-click triggered context menu - Virtual positioning at mouse cursor location - Keyboard navigation support - Automatic dismissal on click outside

Implementation notes:

- Uses floating-ui/react for positioning and interactions - Fully reuses Dropdown sub-components (Content, Item, etc.) - Supports all standard menu features like dividers and variants

WithDisabled: Demonstrates disabled ContextMenu functionality.

Features:

- Shows how to disable the entire context menu - Right-click events are prevented when disabled=true - Visual feedback through data attributes for styling - Useful for conditional menu availability - Supports both ContextMenu.Trigger and triggerRef approaches

Implementation:

- Set disabled={true} to prevent context menu activation - Can use CSS selectors like [data-disabled] for styling - Both Trigger and triggerRef approaches support disabled state

WithDisabledItems: Demonstrates disabled menu items.

Features:

- Visual disabled state - Prevents interaction with disabled items - Maintains keyboard navigation flow - Useful for conditional menu states

LightVariant: Demonstrates ContextMenu with light variant styling.

Features:

- Light variant visual style - Standard menu items - Divider separation - Danger variant item support

Shows complex menu structure with labels and dividers.

Features:

- Section labels for grouping - Visual dividers for separation - Different item variants (danger, highlight) - Hierarchical menu organization

Use cases:

- File manager context menus - Complex application menus - Settings and configuration menus

WithSelection: Demonstrates selection functionality with visual indicators.

Features:

- Visual selection indicator (check mark) - Controlled selection state - Selection persists between menu opens - Automatic menu closure on selection

Use cases:

- Radio button-like selection in menus - Theme or preference selection - Single-choice menu scenarios

NestedSubmenus: Demonstrates nested context menus with multiple levels.

Features:

- Multiple levels of nested submenus - Hover-based submenu activation (hover over submenu triggers) - Keyboard navigation across nested levels (use arrow keys) - Automatic submenu positioning (prevents overflow) - Mixed content (regular items + submenus)

Implementation:

- Uses nested ContextMenu components for submenus - SubTrigger components indicate expandable items (show arrow icon) - Supports unlimited nesting depth - Maintains consistent interaction patterns

Use cases:

- File explorer context menus - Complex application menus - Hierarchical command structures - Multi-level category selections

ContextMenuNestedDropdown: Demonstrates ContextMenu and Dropdown working together using triggerRef.

Features:

- Left-click opens Dropdown menu - Right-click opens ContextMenu - Both menus share the same trigger element - No component wrapping conflicts - Uses triggerRef to avoid nesting issues

Use cases:

- Elements that need both click and right-click menus - Complex UI interactions requiring multiple menu types

NestedSubmenuWithLongList: Demonstrates scrolling functionality in nested submenus with long lists.

Features:

- First level menu with standard items - Nested submenu with a long list that exceeds screen height - Scroll arrows appear when content exceeds available height - Scrolling works properly in nested menus - Height constraints are properly applied - Multiple nested submenus with long lists

Use cases:

- File explorer with many files/folders - Long category lists in nested menus - Any scenario requiring scrollable nested menus

NestedContextMenuInPopover: Demonstrates ContextMenu nested inside a Popover component.

Features:

- ContextMenu works within Popover content - Uses triggerRef to bind context menu to element - disabledNested prop prevents nested menu conflicts - Right-click opens context menu inside popover

Use cases:

- Rich popover content with context menu support - Complex UI interactions within modal/popover contexts

WithTriggerRef: Demonstrates using triggerRef to avoid component wrapping conflicts.

This approach solves complex nesting scenarios by:

- Using a ref to directly bind the context menu to any DOM element - Avoiding wrapper components that might interfere with other libraries - Providing maximum flexibility for integration

Features:

- Left-click opens Dropdown normally - Right-click opens ContextMenu via triggerRef - No component wrapping conflicts - Clean separation of concerns

WithTriggerSelector: Demonstrates using triggerSelector (CSS selector) instead of triggerRef.

Features:

- Supports any valid CSS selector (#id, .class, [data-*], etc.) - Same functionality as triggerRef - triggerRef takes priority if both are provided

Use cases:

- When you cannot access the element via ref (e.g., third-party components) - When the trigger element is rendered elsewhere in the DOM - When you prefer a simpler, selector-based approach

SharedMenuContent: Demonstrates how to share menu content between Dropdown and ContextMenu.

Features:

- Same menu content works in both Dropdown and ContextMenu - Uses Dropdown components (Content, Item, etc.) for compatibility - Reduces code duplication and ensures consistency - Demonstrates the "write once, use everywhere" approach

Business value:

- Complete component reuse between Dropdown and ContextMenu - ContextMenu internally reuses all Dropdown sub-components - Both components share the same interaction patterns

Empty: Demonstrates empty state display when no items are available.

Features:

- Show custom empty message when menu has no items - Useful for dynamic menu content scenarios