Context Menu

Reference

• Context Menu

  The root container that manages the state and behavior of the context menu system. Coordinates the interaction between triggers and contents. Handles right-click and long press events to display the menu at the appropriate position.

• Content

  The container that holds the context menu items. Manages keyboard interactions, focus behavior and positioning relative to the trigger point. Implements proper ARIA attributes for accessibility and handles collision detection with viewport boundaries.

  • Attributes

    • aria-label

      string

      /

      default: -

      Accessible label for the context menu content when a visible label is not present.

• Item

  An interactive menu item that can trigger an action when selected. Supports disabled states and keyboard navigation with proper ARIA attributes for accessibility.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from selecting this item.

    • shortcut

      string

      /

      default: -

      Displays a keyboard shortcut hint for the menu item. This is purely informational and does not trigger the shortcut functionality.

  • Events

    • onSelect

      Event handler called when the item is clicked or has a keydown event (Space or Enter).

• Checkbox

  A menu item that can be checked, unchecked or set to an indeterminate state. Implements proper ARIA attributes for accessibility.

  • Attributes

    • checked

      boolean

      /

      default: -

      The controlled checked state of the item. Must be used in conjunction with onCheckedChange.

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from interacting with this item.

  • Events

    • onCheckedChange

      Event handler called when the checked state of the item changes.

• Radio Group

  A container for grouping multiple radio items. Ensures that only one item in the group can be selected at a time.

  • Attributes

    • value

      string

      /

      default: -

      The value of the currently selected radio item in the group. Must be used in conjunction with onValueChange.

  • Events

    • onValueChange

      Event handler called when the selected value in the radio group changes.

• Radio Group Item

  A selectable item within a radio group that can only be selected exclusively within its group. Implements proper ARIA attributes for accessibility.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from selecting this item.

    • value

      string

      /

      default: -

      The unique value of the item. Used to identify the selected item within the radio group.

  • Events

    • onSelect

      Event handler called when the user selects the item.

• Sub

  Container component that manages the state and behavior of a submenu. Coordinates the interaction between trigger and content components.

• Sub Content

  The container that holds the submenu content. Manages keyboard interactions, positioning behavior and implements proper ARIA attributes for accessibility.

  • Attributes

    • aria-label

      string

      /

      default: -

      Accessible label for the submenu content when a visible label is not present.

    • aria-labelled-by

      string

      /

      default: -

      References the ID of the element that labels the submenu content.