Skip to main content

Starwind UI v3.0 is now available! Migration guide

On this page

Context Menu Primitive

View Markdown

Context Menu is a Starwind Runtime primitive in the composite-menu-overlay contract family. Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.

Anatomy

Use the Astro primitive adapter to render ContextMenu anatomy with the Runtime wiring included.

---
import { ContextMenu } from "@starwind-ui/astro/context-menu";
---


<ContextMenu.Root>
  <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
  <ContextMenu.Positioner>
    <ContextMenu.Popup>
      <ContextMenu.Item>Copy</ContextMenu.Item>
    </ContextMenu.Popup>
  </ContextMenu.Positioner>
</ContextMenu.Root>

Floating Behavior

FactValue
Anchor partanchor
Positioner partpositioner
Popup partpopup
Portal partportal
Option propsside, align, sideOffset, avoidCollisions

API Reference

Root

The main element that owns the Context Menu Runtime instance.

Default element
div
Discovery hook
data-sw-context-menu
Role
-

Props

Prop Type Default Toggle
open boolean -
Description
Controls whether Context Menu is open.
Kind
control
Targets
root
Full type
boolean
React

Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.

  • open
  • defaultOpen
  • onOpenChange
Astro

Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • open
  • defaultOpen
  • starwind:open-change
  • setOpen
Runtime / HTML

Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • data-default-open
  • starwind:open-change
  • setOpen
defaultOpen boolean false
Description
Sets whether Context Menu starts open.
Kind
control
Targets
root
Full type
boolean
React

Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.

  • open
  • defaultOpen
  • onOpenChange
Astro

Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • open
  • defaultOpen
  • starwind:open-change
  • setOpen
Runtime / HTML

Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • data-default-open
  • starwind:open-change
  • setOpen
disabled boolean false
Description
Disables the Root part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
modal boolean true
Description
Makes Context Menu behave as a modal overlay.
Kind
option
Targets
root
Full type
boolean
closeDelay number 200
Description
Sets how long Context Menu waits before closing.
Kind
option
Targets
root, submenuRoot
Full type
number
onCloseComplete (open: boolean, details: ContextMenuCloseCompleteDetails) => void -
Description
Runs after Context Menu has finished closing.
Kind
callback
Targets
root
Full type
(open: boolean, details: ContextMenuCloseCompleteDetails) => void
onOpenChange (open: boolean, details: ContextMenuOpenChangeDetails) => void -
Description
Runs when Context Menu opens or closes.
Kind
callback
Targets
root
Full type
(open: boolean, details: ContextMenuOpenChangeDetails) => void
React

Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.

  • open
  • defaultOpen
  • onOpenChange
Astro

Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • open
  • defaultOpen
  • starwind:open-change
  • setOpen
Runtime / HTML

Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • data-default-open
  • starwind:open-change
  • setOpen

Events

Event Callback Value Toggle
openChange onOpenChange open: boolean
Description
Fires when Context Menu opens or closes.
DOM event
starwind:open-change
Details type
ContextMenuOpenChangeDetails
Timing
before-state-commit
Cancelable
Yes
Cancellation sequence
  1. Check internal eligibility and intent.
  2. Create one details object for the proposal.
  3. Call the Runtime callback with the details object when the controller exposes one.
  4. Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.
  5. Read details.isCanceled, including cancellation caused by preventDefault().
  6. Apply the accepted state.
  7. Notify Runtime subscribers and other accepted-only observers.
closeComplete onCloseComplete open: boolean
Description
Fires after Context Menu has finished closing.
DOM event
starwind:close-complete
Details type
ContextMenuCloseCompleteDetails
Timing
after-state-commit
Cancelable
No

State

State Type Props Toggle
open boolean open / defaultOpen
Description
Tracks whether Context Menu is open.
Initial attribute
data-default-open
Runtime getter
getOpen
Runtime setter
setOpen
React

Use open for controlled state and defaultOpen for default state, and onOpenChange for change proposals.

  • open
  • defaultOpen
  • onOpenChange
Astro

Use open or defaultOpen for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • open
  • defaultOpen
  • starwind:open-change
  • setOpen
Runtime / HTML

Use data-default-open for initial state, listen for starwind:open-change, and call setOpen for later updates.

  • data-default-open
  • starwind:open-change
  • setOpen
checked boolean checked / defaultChecked
Description
Tracks whether Context Menu is checked.
Initial attribute
data-default-checked
Runtime getter
-
Runtime setter
-
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
radioValue string value / defaultValue
Description
Tracks the selected radio value for Context Menu.
Initial attribute
data-value
Runtime getter
-
Runtime setter
-
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-context-menu - Marks the Root part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Root part.
Metadata
Attribute Value Description
data-sw-menu - Identifies Root metadata for styling and selectors.
data-default-open - Reflects the default open prop on the Root part.
data-disabled - Reflects the disabled prop on the Root part.
data-modal - Reflects the modal prop on the Root part.
data-close-delay - Reflects the close delay prop on the Root part.

Trigger

The control that opens, closes, or targets the Context Menu content.

Default element
div
Discovery hook
data-sw-context-menu-trigger
Role
-

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Trigger part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-context-menu-trigger - Marks the Trigger part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Trigger part.
Metadata
Attribute Value Description
data-sw-menu-trigger - Identifies Trigger metadata for styling and selectors.
data-disabled - Reflects the disabled prop on the Trigger part.

Anchor

The virtual anchor used to position Context Menu content.

Default element
span
Discovery hook
data-sw-context-menu-anchor
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-context-menu-anchor - Marks the Anchor part so Starwind Runtime can find it.

Portal

Moves Context Menu overlay content to the document body when needed.

Default element
div
Discovery hook
data-sw-menu-portal
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-portal - Marks the Portal part so Starwind Runtime can find it.

Positioner

Positions the Context Menu content relative to its trigger.

Default element
div
Discovery hook
data-sw-menu-positioner
Role
-

Props

Prop Type Default Toggle
side "top" | "right" | "bottom" | "left" "bottom"
Description
Sets the preferred side for Context Menu content.
Kind
option
Targets
positioner, popup
Full type
"top" | "right" | "bottom" | "left"
align "start" | "center" | "end" "start"
Description
Sets how Context Menu content aligns to its trigger.
Kind
option
Targets
positioner, popup
Full type
"start" | "center" | "end"
sideOffset number 4
Description
Sets the distance between Context Menu content and its trigger.
Kind
option
Targets
positioner, popup
Full type
number
avoidCollisions boolean true
Description
Allows Context Menu content to shift or flip to stay visible.
Kind
option
Targets
positioner, popup
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-positioner - Marks the Positioner part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Positioner part.
Metadata
Attribute Value Description
data-side - Reflects the side prop on the Positioner part.
data-align - Reflects the align prop on the Positioner part.
data-side-offset - Reflects the side offset prop on the Positioner part.
data-avoid-collisions - Reflects the avoid collisions prop on the Positioner part.

Popup

The floating content container for Context Menu.

Default element
div
Discovery hook
data-sw-menu-popup
Role
menu

Props

Prop Type Default Toggle
side "top" | "right" | "bottom" | "left" "bottom"
Description
Sets the preferred side for Context Menu content.
Kind
option
Targets
positioner, popup
Full type
"top" | "right" | "bottom" | "left"
align "start" | "center" | "end" "start"
Description
Sets how Context Menu content aligns to its trigger.
Kind
option
Targets
positioner, popup
Full type
"start" | "center" | "end"
sideOffset number 4
Description
Sets the distance between Context Menu content and its trigger.
Kind
option
Targets
positioner, popup
Full type
number
avoidCollisions boolean true
Description
Allows Context Menu content to shift or flip to stay visible.
Kind
option
Targets
positioner, popup
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-popup - Marks the Popup part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Popup part.
Metadata
Attribute Value Description
data-side - Reflects the side prop on the Popup part.
data-align - Reflects the align prop on the Popup part.
data-side-offset - Reflects the side offset prop on the Popup part.
data-avoid-collisions - Reflects the avoid collisions prop on the Popup part.

Item

An interactive item inside the Context Menu collection.

Default element
div
Discovery hook
data-sw-menu-item
Role
menuitem

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Item part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
closeOnClick boolean true
Description
Closes Context Menu after the item is clicked.
Kind
option
Targets
item
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-item - Marks the Item part so Starwind Runtime can find it.
Metadata
Attribute Value Description
data-close-on-click - Reflects the close on click prop on the Item part.
data-disabled - Reflects the disabled prop on the Item part.

Link Item

A link-style item inside the Context Menu collection.

Default element
a
Discovery hook
data-sw-menu-link-item
Role
menuitem

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Link Item part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
closeOnClick boolean false
Description
Closes Context Menu after the item is clicked.
Kind
option
Targets
linkItem
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-link-item - Marks the Link Item part so Starwind Runtime can find it.
Metadata
Attribute Value Description
data-close-on-click - Reflects the close on click prop on the Link Item part.
data-disabled - Reflects the disabled prop on the Link Item part.

Checkbox Item

A checkbox-style item inside the Context Menu collection.

Default element
div
Discovery hook
data-sw-menu-checkbox-item
Role
menuitemcheckbox

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Checkbox Item part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
checked boolean -
Description
Controls whether Context Menu is checked.
Kind
control
Targets
checkboxItem, radioItem
Full type
boolean
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
defaultChecked boolean false
Description
Sets whether Context Menu starts checked for uncontrolled usage.
Kind
control
Targets
checkboxItem, radioItem
Full type
boolean
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
closeOnClick boolean false
Description
Closes Context Menu after the item is clicked.
Kind
option
Targets
checkboxItem, radioItem
Full type
boolean
onCheckedChange (checked: boolean, details: MenuCheckedChangeDetails) => void -
Description
Runs when the Context Menu checked state changes.
Kind
callback
Targets
checkboxItem
Full type
(checked: boolean, details: MenuCheckedChangeDetails) => void
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change

Events

Event Callback Value Toggle
checkedChange onCheckedChange checked: boolean
Description
Fires when the checked state changes for Context Menu.
DOM event
starwind:checked-change
Details type
MenuCheckedChangeDetails
Timing
before-state-commit
Cancelable
Yes
Cancellation sequence
  1. Check internal eligibility and intent.
  2. Create one details object for the proposal.
  3. Call the Runtime callback with the details object when the controller exposes one.
  4. Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.
  5. Read details.isCanceled, including cancellation caused by preventDefault().
  6. Apply the accepted state.
  7. Notify Runtime subscribers and other accepted-only observers.

State

State Type Props Toggle
checked boolean checked / defaultChecked
Description
Tracks whether Context Menu is checked.
Initial attribute
data-default-checked
Runtime getter
-
Runtime setter
-
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-checkbox-item - Marks the Checkbox Item part so Starwind Runtime can find it.
State
Attribute Value Description
data-default-checked - Reflects the default checked state on the Checkbox Item part.
data-checked - Reflects the checked state on the Checkbox Item part.
data-unchecked - Reflects the unchecked state on the Checkbox Item part.
Metadata
Attribute Value Description
data-close-on-click - Reflects the close on click prop on the Checkbox Item part.
data-disabled - Reflects the disabled prop on the Checkbox Item part.

Checkbox Item Indicator

Shows the checked state for a Context Menu checkbox item.

Default element
span
Discovery hook
data-sw-menu-checkbox-item-indicator
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-checkbox-item-indicator - Marks the Checkbox Item Indicator part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Checkbox Item Indicator part.

Radio Group

Groups related radio items inside Context Menu.

Default element
div
Discovery hook
data-sw-menu-radio-group
Role
group

Props

Prop Type Default Toggle
value string -
Description
Controls the current Context Menu value.
Kind
control
Targets
radioGroup
Full type
string
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change
defaultValue string -
Description
Sets the initial Context Menu value for uncontrolled usage.
Kind
control
Targets
radioGroup
Full type
string
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change
onValueChange (value: string, details: MenuValueChangeDetails) => void -
Description
Runs when the Context Menu value changes.
Kind
callback
Targets
radioGroup
Full type
(value: string, details: MenuValueChangeDetails) => void
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change

Events

Event Callback Value Toggle
valueChange onValueChange value: string
Description
Fires when the value changes for Context Menu.
DOM event
starwind:value-change
Details type
MenuValueChangeDetails
Timing
before-state-commit
Cancelable
Yes
Cancellation sequence
  1. Check internal eligibility and intent.
  2. Create one details object for the proposal.
  3. Call the Runtime callback with the details object when the controller exposes one.
  4. Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.
  5. Read details.isCanceled, including cancellation caused by preventDefault().
  6. Apply the accepted state.
  7. Notify Runtime subscribers and other accepted-only observers.

State

State Type Props Toggle
radioValue string value / defaultValue
Description
Tracks the selected radio value for Context Menu.
Initial attribute
data-value
Runtime getter
-
Runtime setter
-
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-radio-group - Marks the Radio Group part so Starwind Runtime can find it.
State
Attribute Value Description
data-value - Reflects the value state on the Radio Group part.

Radio Item

A radio-style item inside the Context Menu collection.

Default element
div
Discovery hook
data-sw-menu-radio-item
Role
menuitemradio

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Radio Item part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
checked boolean -
Description
Controls whether Context Menu is checked.
Kind
control
Targets
checkboxItem, radioItem
Full type
boolean
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
defaultChecked boolean false
Description
Sets whether Context Menu starts checked for uncontrolled usage.
Kind
control
Targets
checkboxItem, radioItem
Full type
boolean
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
closeOnClick boolean false
Description
Closes Context Menu after the item is clicked.
Kind
option
Targets
checkboxItem, radioItem
Full type
boolean
value string -
Description
Controls the current Context Menu value.
Kind
option
Targets
radioItem
Full type
string
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change

State

State Type Props Toggle
checked boolean checked / defaultChecked
Description
Tracks whether Context Menu is checked.
Initial attribute
data-default-checked
Runtime getter
-
Runtime setter
-
React

Use checked for controlled state and defaultChecked for default state, and onCheckedChange for change proposals.

  • checked
  • defaultChecked
  • onCheckedChange
Astro

Use checked or defaultChecked for initial state and listen for starwind:checked-change.

  • checked
  • defaultChecked
  • starwind:checked-change
Runtime / HTML

Use data-default-checked for initial state and listen for starwind:checked-change.

  • data-default-checked
  • starwind:checked-change
radioValue string value / defaultValue
Description
Tracks the selected radio value for Context Menu.
Initial attribute
data-value
Runtime getter
-
Runtime setter
-
React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

  • value
  • defaultValue
  • onValueChange
Astro

Use value or defaultValue for initial state and listen for starwind:value-change.

  • value
  • defaultValue
  • starwind:value-change
Runtime / HTML

Use data-value for initial state and listen for starwind:value-change.

  • data-value
  • starwind:value-change

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-radio-item - Marks the Radio Item part so Starwind Runtime can find it.
State
Attribute Value Description
data-default-checked - Reflects the default checked state on the Radio Item part.
data-checked - Reflects the checked state on the Radio Item part.
data-unchecked - Reflects the unchecked state on the Radio Item part.
Metadata
Attribute Value Description
data-value - Reflects the value prop on the Radio Item part.
data-close-on-click - Reflects the close on click prop on the Radio Item part.
data-disabled - Reflects the disabled prop on the Radio Item part.

Radio Item Indicator

Shows the selected state for a Context Menu radio item.

Default element
span
Discovery hook
data-sw-menu-radio-item-indicator
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-radio-item-indicator - Marks the Radio Item Indicator part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Radio Item Indicator part.

Group

Groups related Context Menu items.

Default element
div
Discovery hook
data-sw-menu-group
Role
group

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-group - Marks the Group part so Starwind Runtime can find it.

Label

Text label associated with Context Menu.

Default element
div
Discovery hook
data-sw-menu-label
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-label - Marks the Label part so Starwind Runtime can find it.

Separator

Separates groups of Context Menu items.

Default element
div
Discovery hook
data-sw-menu-separator
Role
separator

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-separator - Marks the Separator part so Starwind Runtime can find it.

Shortcut

Displays keyboard shortcut text for a Context Menu item.

Default element
span
Discovery hook
data-sw-menu-shortcut
Role
-

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-shortcut - Marks the Shortcut part so Starwind Runtime can find it.

Submenu Root

Owns a nested submenu inside Context Menu.

Default element
div
Discovery hook
data-sw-menu-submenu-root
Role
-

Props

Prop Type Default Toggle
closeDelay number 200
Description
Sets how long Context Menu waits before closing.
Kind
option
Targets
root, submenuRoot
Full type
number

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-submenu-root - Marks the Submenu Root part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Submenu Root part.
Metadata
Attribute Value Description
data-close-delay - Reflects the close delay prop on the Submenu Root part.

Submenu Trigger

Opens a nested submenu inside Context Menu.

Default element
div
Discovery hook
data-sw-menu-submenu-trigger
Role
menuitem

Props

Prop Type Default Toggle
disabled boolean false
Description
Disables the Submenu Trigger part.
Kind
option
Targets
root, trigger, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean

Data Attributes

Runtime hooks
Attribute Value Description
data-sw-menu-submenu-trigger - Marks the Submenu Trigger part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Submenu Trigger part.
Metadata
Attribute Value Description
data-disabled - Reflects the disabled prop on the Submenu Trigger part.

Runtime API

Factory
createContextMenu
Import
@starwind-ui/runtime/context-menu
Root hook
root data-sw-context-menu
Option props
closeDelay, defaultOpen, disabled, modal, onCloseComplete, onOpenChange, open

Option Lifecycles

OptionLifecycle
closeDelayconstructor-only
defaultOpenconstructor-only
disabledconstructor-only
modalconstructor-only
onCloseCompleteconstructor-only
onOpenChangeconstructor-only
opensetter-backed

Runtime Setters

Method Target Description
setOpen state: open Opens or closes Context Menu from Runtime code.

Related Styled Components

Component Relationship
Context Menu Direct primitive

Changelog

View version history v1.0.0 4 releases

v1.0.0

  • Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.

v0.1.2

  • Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
  • Kept generated React state-change callbacks and DOM events cancelable until the Runtime accepts the proposed state, then synchronized rendered state.

v0.1.1

  • Enabled modal background-scroll locking by default while the menu is open.

v0.1.0

  • Introduced pointer-triggered menus with keyboard navigation, submenus, checked items, and floating placement.