Context Menu

Overview

Hux UI provides a comprehensive context menu system with smart positioning and cross-platform support:

HuxContextMenu - Main wrapper widget with smart positioning
HuxContextMenuItem - Individual menu items with icons and states
HuxContextMenuDivider - Visual separators for menu groups

Component Variants

Simple context menu with basic actions:

HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => print('Copy action'),
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => print('Paste action'),
    ),
  ],
  child: Text('Right-click me!'),
)

Organized menu with visual separators:

HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => print('Copy action'),
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => print('Paste action'),
    ),
    const HuxContextMenuDivider(),
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => print('Delete action'),
      isDestructive: true,
    ),
  ],
  child: Container(
    padding: const EdgeInsets.all(20),
    child: const Text('Right-click me!'),
  ),
)

Menu with disabled and destructive actions:

HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'Edit',
      icon: FeatherIcons.edit2,
      onTap: () => print('Edit action'),
    ),
    HuxContextMenuItem(
      text: 'Duplicate',
      icon: FeatherIcons.copy,
      onTap: () => print('Duplicate action'),
      isDisabled: true, // Disabled item
    ),
    const HuxContextMenuDivider(),
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => print('Delete action'),
      isDestructive: true, // Destructive action
    ),
  ],
  child: Icon(Icons.more_vert),
)

Context menu for file operations:

HuxContextMenu(
  menuItems: [
    HuxContextMenuItem(
      text: 'New File',
      icon: FeatherIcons.filePlus,
      onTap: () => _createNewFile(),
    ),
    HuxContextMenuItem(
      text: 'Open',
      icon: FeatherIcons.folderOpen,
      onTap: () => _openFile(),
    ),
    const HuxContextMenuDivider(),
    HuxContextMenuItem(
      text: 'Rename',
      icon: FeatherIcons.edit2,
      onTap: () => _renameFile(),
    ),
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => _deleteFile(),
      isDestructive: true,
    ),
  ],
  child: FileIcon(),
)

Basic Usage

Features

Smart Positioning - Automatic menu positioning to prevent screen overflow
Cross-Platform - Works on desktop, mobile, and web
Web Optimization - Proper browser context menu prevention
Consistent Design - Follows Hux UI design system
Theme Aware - Adapts to light and dark themes

Components

HuxContextMenu

Main wrapper that handles context menu display and positioning. Properties:

menuItems - List of menu items and dividers
child - Widget that triggers the context menu

HuxContextMenuItem

Individual menu item with icon, text, and interaction handling. Properties:

text - Menu item label
icon - Optional icon (FeatherIcons recommended)
onTap - Action callback
isDisabled - Whether the item is disabled
isDestructive - Whether the item represents a destructive action

HuxContextMenuDivider

Visual separator for organizing menu items into groups.

const HuxContextMenuDivider()

Advanced Example

HuxContextMenu(
  menuItems: [
    // File operations
    HuxContextMenuItem(
      text: 'New File',
      icon: FeatherIcons.filePlus,
      onTap: () => _createNewFile(),
    ),
    HuxContextMenuItem(
      text: 'Open',
      icon: FeatherIcons.folderOpen,
      onTap: () => _openFile(),
    ),
    const HuxContextMenuDivider(),
    
    // Edit operations
    HuxContextMenuItem(
      text: 'Cut',
      icon: FeatherIcons.scissors,
      onTap: () => _cutSelection(),
      isDisabled: !_hasSelection,
    ),
    HuxContextMenuItem(
      text: 'Copy',
      icon: FeatherIcons.copy,
      onTap: () => _copySelection(),
      isDisabled: !_hasSelection,
    ),
    HuxContextMenuItem(
      text: 'Paste',
      icon: FeatherIcons.clipboard,
      onTap: () => _pasteClipboard(),
      isDisabled: !_hasClipboardContent,
    ),
    const HuxContextMenuDivider(),
    
    // Destructive operations
    HuxContextMenuItem(
      text: 'Delete',
      icon: FeatherIcons.trash2,
      onTap: () => _deleteSelection(),
      isDestructive: true,
      isDisabled: !_hasSelection,
    ),
  ],
  child: YourContentWidget(),
)

Platform Support

Desktop - Right-click support with proper positioning
Mobile - Long-press gesture support
Web - Proper browser context menu prevention

Context menus automatically prevent the browser’s default context menu on web platforms using the universal_html package.

Examples

File Manager

See context menus in a file management interface

Text Editor

Learn how to implement editor context menus

Right-click any component in the example app to see context menus in action!

Getting Started

Components

Advanced

Overview

Component Variants

Basic Context Menu

Context Menu with Dividers

Context Menu with Disabled Items

File Context Menu

Basic Usage

Features

Components

HuxContextMenu

HuxContextMenuItem

HuxContextMenuDivider

Advanced Example

Platform Support

Examples

File Manager

Text Editor

​Overview

​Component Variants

​Basic Context Menu

​Context Menu with Dividers

​Context Menu with Disabled Items

​File Context Menu

​Basic Usage

​Features

​Components

​HuxContextMenu

​HuxContextMenuItem

​HuxContextMenuDivider

​Advanced Example

​Platform Support

​Examples

File Manager

Text Editor

Overview

Component Variants

Basic Context Menu

Context Menu with Dividers

Context Menu with Disabled Items

File Context Menu

Basic Usage

Features

Components

HuxContextMenu

HuxContextMenuItem

HuxContextMenuDivider

Advanced Example

Platform Support

Examples