Context Menu

Reference

• Root

  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.

  • Attributes

    • direction

      enum

      /

      default: ltr

      The reading direction of the context menu. Affects the positioning of submenus and keyboard navigation behavior.

    • modal

      boolean

      /

      default: true

      When true, interaction with elements outside the context menu will be disabled and only menu content will be visible to screen readers.

  • Events

    • onOpenChange

      Event handler called when the open state of the context menu changes.

• Trigger

  Area that listens for right click or long press events to open the context menu. Provides the interaction point for displaying the menu.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from triggering the context menu in this area.

• Portal

  Renders the context menu content into the CSS top layer, ensuring proper stacking context and visibility above other page elements.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • position

      enum

      /

      default: fixed

      Determines how the context menu content will be placed on the page. fixed will prevent clipping, but will slightly lag on scroll events.

• 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

    • align-offset

      number

      /

      default: 0

      The offset in pixels from the start or end alignment positions.

    • aria-label

      string

      /

      default: -

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

    • aria-labelled-by

      string

      /

      default: -

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

    • avoid-collisions

      boolean

      /

      default: true

      When true, automatically adjusts positioning to prevent collisions with viewport boundaries.

    • collision-padding

      number

      /

      default: 0

      The distance in pixels from viewport edges where collision detection should occur.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • loop

      boolean

      /

      default: false

      When true, keyboard navigation will loop from last item to first and vice versa.

  • Events

    • onClickOutside

      Event handler called when a click occurs outside the context menu content.

    • onCloseTransitionEnd

      Event handler called when the closing transition completes.

    • onEscapeKeydown

      Event handler called when the Escape key is pressed while the context menu is active.

    • onOpenTransitionEnd

      Event handler called when the opening transition completes.

  • Classes

    • close-transition

      Applied during the closing transition of the context menu.

    • left

      Applied when the context menu content is positioned to the left of the trigger point.

    • left-in

      Applied when content is positioned on the left side during the opening transition.

    • left-out

      Applied when content is positioned on the left side during the closing transition.

    • open

      Applied when the context menu is in an open state.

    • open-transition

      Applied during the opening transition of the context menu.

    • right

      Applied when the context menu content is positioned to the right of the trigger point.

    • right-in

      Applied when content is positioned on the right side during the opening transition.

    • right-out

      Applied when content is positioned on the right side during the closing transition.

• Item

  A menu item within the context menu.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from selecting this item.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying element for DOM manipulation.

    • text-value

      string

      /

      default: -

      Optional text used for typeahead purposes. By default, the typeahead behavior will use the content of the item. Use this when the content is complex or you have non-textual content inside.

  • Events

    • onSelect

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

  • Classes

    • disabled

      Applied when the item is in a disabled state.

    • open

      Applied when the item is used as a trigger and its assigned sub-menu is open.

• Link Item

  A selectable link item within the context menu. Manages selection state and keyboard navigation while providing proper ARIA attributes for accessibility.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from selecting this item.

    • download

      string

      /

      default: -

      Download attribute that is forwarded to the underlying a element.

    • href

      string

      /

      default: -

      Specifies the URL or destination that the link points to. For more information, see the MDN documentation.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying element for DOM manipulation.

    • prerender

      string

      /

      default: -

      Controls the prerendering behavior of the linked content. none disables prerendering, moderate provides balanced prerendering and eager prerenders as soon as possible. For more information see the Nordcraft documentation.

    • rel

      string

      /

      default: noopener noreferrer

      Specifies the relationship between the current document and the linked document. For security best practices and more information, see the MDN documentation.

    • target

      string

      /

      default: _blank

      Determines where the linked content will be displayed. For detailed information about target values and their behaviors, see the MDN documentation.

    • text-value

      string

      /

      default: -

      Optional text used for typeahead purposes. By default, the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.

  • Events

    • onSelect

      Event handler called when the item is clicked or on keydown (Space / Enter).

  • Classes

    • disabled

      Applied when the item is in a disabled state.

    • open

      Applied when the item is used as a trigger and its assigned submenu is open.

• Checkbox Item

  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.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying element for DOM manipulation.

    • text-value

      string

      /

      default: -

      Optional text used for typeahead purposes. By default, the typeahead behavior will use the content of the item.

  • Events

    • onCheckedChange

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

  • Classes

    • checked

      Applied when the item is in a checked state.

    • disabled

      Applied when the item is in a disabled state.

    • indeterminate

      Applied when the item is in an indeterminate state.

• Checkbox Indicator

  Visual indicator that displays when its parent checkbox item is checked or indeterminate. Can be styled directly or used as a wrapper for an icon.

  • Classes

    • checked

      Applied when the parent checkbox item is in a checked state.

    • indeterminate

      Applied when the parent checkbox item is in an indeterminate state.

• 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.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying element for DOM manipulation.

    • text-value

      string

      /

      default: -

      Optional text used for typeahead purposes. By default, the typeahead behavior will use the content of the 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.

  • Classes

    • checked

      Applied when the radio item is in a selected state.

    • disabled

      Applied when the radio item is in a disabled state.

• Radio Group Indicator

  Visual indicator that displays when its parent radio item is selected. Can be styled directly or used as a wrapper for an icon.

  • Classes

    • checked

      Applied when the parent radio item is in a selected state.

• Sub

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

  • Attributes

    • default-open

      boolean

      /

      default: false

      The initial open state of the submenu when rendered. Use when you do not need to control its open state.

    • open

      boolean

      /

      default: -

      The controlled open state of the submenu. Must be used in conjunction with onOpenChange.

  • Events

    • onOpenChange

      Event handler called when the open state of the submenu changes.

• Sub Trigger

  A wrapper component that must contain an sc-context-menu-item. Controls the visibility of its submenu and automatically receives appropriate ARIA attributes.

  • Attributes

    • disabled

      boolean

      /

      default: false

      When true, prevents the user from opening the submenu through this trigger.

• Sub Portal

  Renders the submenu content into the CSS top layer, ensuring proper stacking context and visibility above other page elements.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • position

      enum

      /

      default: fixed

      Determines how the submenu content will be placed on the page. fixed will prevent clipping, but will slightly lag on scroll events.

• Sub Content

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

  • Attributes

    • align

      enum

      /

      default: start

      The preferred alignment against the trigger. May adjust automatically when collisions occur.

    • align-offset

      number

      /

      default: 0

      The offset in pixels from the start or end alignment positions.

    • 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.

    • arrow-padding

      number

      /

      default: 0

      The padding between the arrow and the edges of the content. Prevents arrow overflow with rounded corners.

    • avoid-collisions

      boolean

      /

      default: true

      When true, automatically adjusts positioning to prevent collisions with viewport boundaries.

    • collision-padding

      number

      /

      default: 0

      The distance in pixels from viewport edges where collision detection should occur.

    • fallback-sides

      string[]

      /

      default: -

      Alternative sides to try when the content doesn't fit in its primary position.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • loop

      boolean

      /

      default: false

      When true, keyboard navigation will loop from last item to first and vice versa.

    • side-offset

      number

      /

      default: 0

      The distance in pixels between the submenu content and its trigger element.

  • Events

    • onClickOutside

      Event handler called when a click occurs outside the submenu content.

    • onCloseTransitionEnd

      Event handler called when the closing transition completes.

    • onEscapeKeydown

      Event handler called when the Escape key is pressed while the submenu is active.

    • onOpenTransitionEnd

      Event handler called when the opening transition completes.

  • Classes

    • bottom

      Applied when the submenu content is positioned at the bottom of its trigger.

    • bottom-in

      Applied when submenu content is positioned at the bottom during the opening transition.

    • bottom-out

      Applied when submenu content is positioned at the bottom during the closing transition.

    • close-transition

      Applied during the closing transition of the submenu.

    • left

      Applied when the submenu content is positioned to the left of its trigger.

    • left-in

      Applied when submenu content is positioned on the left side during the opening transition.

    • left-out

      Applied when submenu content is positioned on the left side during the closing transition.

    • open

      Applied when the submenu is in an open state.

    • open-transition

      Applied during the opening transition of the submenu.

    • right

      Applied when the submenu content is positioned to the right of its trigger.

    • right-in

      Applied when submenu content is positioned on the right side during the opening transition.

    • right-out

      Applied when submenu content is positioned on the right side during the closing transition.

    • top

      Applied when the submenu content is positioned at the top of its trigger.

    • top-in

      Applied when submenu content is positioned at the top during the opening transition.

    • top-out

      Applied when submenu content is positioned at the top during the closing transition.

• Arrow

  An optional visual indicator that points to the trigger element. Must be rendered inside sc-context-menu-sub-content. Helps visually connect the submenu with its trigger.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying element for DOM manipulation.

  • Classes

    • bottom

      Applied when the arrow is positioned at the bottom of the content.

    • left

      Applied when the arrow is positioned on the left side of the content.

    • right

      Applied when the arrow is positioned on the right side of the content.

    • top

      Applied when the arrow is positioned at the top of the content.