Menu Primitive

Menu is a Starwind Runtime primitive in the composite-menu-overlay contract family.

Anatomy

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

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

<Menu.Root>
  <Menu.Trigger>Open menu</Menu.Trigger>
  <Menu.Positioner>
    <Menu.Popup>
      <Menu.Item>Edit</Menu.Item>
    </Menu.Popup>
  </Menu.Positioner>
</Menu.Root>

Use the React primitive adapter when Menu state participates in React rendering.

import { Menu } from "@starwind-ui/react/menu";

export function Example() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item>Edit</Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Root>
  );
}

Render the Menu data-sw-* contract yourself, then initialize createMenu.

<div data-sw-menu>
  <button data-sw-menu-trigger type="button" aria-haspopup="menu">Open menu</button>
  <div data-sw-menu-positioner>
    <div data-sw-menu-popup role="menu" tabindex="-1" hidden>
      <div data-sw-menu-item role="menuitem" tabindex="0">Edit</div>
    </div>
  </div>
</div>

<script type="module">
  import { createMenu } from "@starwind-ui/runtime/menu";

  const root = document.querySelector("[data-sw-menu]");
  if (root) {
    createMenu(root);
  }
</script>

Menu uses a trigger, popup, and item parts to coordinate open state, keyboard navigation, floating placement, and item activation from one Runtime-owned root.

Floating Behavior

Fact	Value
Anchor part	trigger
Positioner part	positioner
Popup part	popup
Portal part	portal
Option props	side, align, sideOffset, avoidCollisions

API Reference

Root

The main element that owns the Menu Runtime instance.

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

Props

Prop Type Default

open boolean -

Description: Controls whether Menu is open.
Kind: control
Targets: root
Full type: boolean

defaultOpen boolean false

Description: Sets whether Menu starts open.
Kind: control
Targets: root
Full type: boolean

disabled boolean false

Description: Disables the Root part.
Kind: option
Targets: root, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type: boolean

modal boolean false

Description: Makes Menu behave as a modal overlay.
Kind: option
Targets: root
Full type: boolean

openOnHover boolean false

Description: Configures the open on hover option for the Root part.
Kind: option
Targets: root
Full type: boolean

closeDelay number 200

Description: Sets how long Menu waits before closing.
Kind: option
Targets: root, submenuRoot
Full type: number

onCloseComplete (open: boolean, details: MenuCloseCompleteDetails) => void -

Description: Runs after Menu has finished closing.
Kind: callback
Targets: root
Full type: (open: boolean, details: MenuCloseCompleteDetails) => void

onOpenChange (open: boolean, details: MenuOpenChangeDetails) => void -

Description: Runs when Menu opens or closes.
Kind: callback
Targets: root
Full type: (open: boolean, details: MenuOpenChangeDetails) => void

Events

Event Callback Value

openChange onOpenChange open: boolean

Description: Fires when Menu opens or closes.
DOM event: starwind:open-change
Details type: MenuOpenChangeDetails
Timing: before-state-commit
Cancelable: Yes

closeComplete onCloseComplete open: boolean

Description: Fires after Menu has finished closing.
DOM event: starwind:close-complete
Details type: MenuCloseCompleteDetails
Timing: after-state-commit
Cancelable: No

State

State Type Props

open boolean open / defaultOpen

Description: Tracks whether Menu is open.
Initial attribute: data-default-open
Runtime getter: getOpen
Runtime setter: setOpen
State control support: React supports controlled and default state with open and defaultOpen props. Runtime/HTML reads initial state from data-default-open, emits starwind:open-change and starwind:close-complete, and updates with setOpen. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

checked boolean checked / defaultChecked

Description: Tracks whether Menu is checked.
Initial attribute: data-default-checked
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with checked and defaultChecked props. Runtime/HTML reads initial state from data-default-checked and emits starwind:checked-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

radioValue string value / defaultValue

Description: Tracks the selected radio value for Menu.
Initial attribute: data-value
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with value and defaultValue props. Runtime/HTML reads initial state from data-value and emits starwind:value-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-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-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-open-on-hover - Reflects the open on hover 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 Menu content.

Default element: button
Discovery hook: data-sw-menu-trigger
Role: -

Props

Prop Type Default

asChild boolean false

Description: Merges behavior onto your child element instead of rendering the default Trigger element.
Kind: rendering
Targets: trigger
Full type: boolean

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-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.

Portal

Moves 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 Menu content relative to its trigger.

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

Props

Prop Type Default

side "top" | "right" | "bottom" | "left" "bottom"

Description: Sets the preferred side for Menu content.
Kind: option
Targets: positioner, popup
Full type: "top" | "right" | "bottom" | "left"

align "start" | "center" | "end" "start"

Description: Sets how Menu content aligns to its trigger.
Kind: option
Targets: positioner, popup
Full type: "start" | "center" | "end"

sideOffset number 4

Description: Sets the distance between Menu content and its trigger.
Kind: option
Targets: positioner, popup
Full type: number

avoidCollisions boolean true

Description: Allows 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.

The floating content container for Menu.

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

Props

Prop Type Default

side "top" | "right" | "bottom" | "left" "bottom"

Description: Sets the preferred side for Menu content.
Kind: option
Targets: positioner, popup
Full type: "top" | "right" | "bottom" | "left"

align "start" | "center" | "end" "start"

Description: Sets how Menu content aligns to its trigger.
Kind: option
Targets: positioner, popup
Full type: "start" | "center" | "end"

sideOffset number 4

Description: Sets the distance between Menu content and its trigger.
Kind: option
Targets: positioner, popup
Full type: number

avoidCollisions boolean true

Description: Allows 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 Menu collection.

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

Props

Prop Type Default

disabled boolean false

Description: Disables the Item part.
Kind: option
Targets: root, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type: boolean

closeOnClick boolean true

Description: Closes 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 Menu collection.

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

Props

Prop Type Default

disabled boolean false

Description: Disables the Link Item part.
Kind: option
Targets: root, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type: boolean

closeOnClick boolean false

Description: Closes 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 Menu collection.

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

Props

Prop Type Default

disabled boolean false

Description: Disables the Checkbox Item part.
Kind: option
Targets: root, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type: boolean

checked boolean -

Description: Controls whether Menu is checked.
Kind: control
Targets: checkboxItem, radioItem
Full type: boolean

defaultChecked boolean false

Description: Sets whether Menu starts checked for uncontrolled usage.
Kind: control
Targets: checkboxItem, radioItem
Full type: boolean

closeOnClick boolean false

Description: Closes Menu after the item is clicked.
Kind: option
Targets: checkboxItem, radioItem
Full type: boolean

onCheckedChange (checked: boolean, details: MenuCheckedChangeDetails) => void -

Description: Runs when the Menu checked state changes.
Kind: callback
Targets: checkboxItem
Full type: (checked: boolean, details: MenuCheckedChangeDetails) => void

Events

Event Callback Value

checkedChange onCheckedChange checked: boolean

Description: Fires when the checked state changes for Menu.
DOM event: starwind:checked-change
Details type: MenuCheckedChangeDetails
Timing: before-state-commit
Cancelable: Yes

State

State Type Props

checked boolean checked / defaultChecked

Description: Tracks whether Menu is checked.
Initial attribute: data-default-checked
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with checked and defaultChecked props. Runtime/HTML reads initial state from data-default-checked and emits starwind:checked-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

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

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

Props

Prop Type Default

value string -

Description: Controls the current Menu value.
Kind: control
Targets: radioGroup
Full type: string

defaultValue string -

Description: Sets the initial Menu value for uncontrolled usage.
Kind: control
Targets: radioGroup
Full type: string

onValueChange (value: string, details: MenuValueChangeDetails) => void -

Description: Runs when the Menu value changes.
Kind: callback
Targets: radioGroup
Full type: (value: string, details: MenuValueChangeDetails) => void

Events

Event Callback Value

valueChange onValueChange value: string

Description: Fires when the value changes for Menu.
DOM event: starwind:value-change
Details type: MenuValueChangeDetails
Timing: before-state-commit
Cancelable: Yes

State

State Type Props

radioValue string value / defaultValue

Description: Tracks the selected radio value for Menu.
Initial attribute: data-value
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with value and defaultValue props. Runtime/HTML reads initial state from data-value and emits starwind:value-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

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 Menu collection.

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

Props

Prop Type Default

disabled boolean false

Description: Disables the Radio Item part.
Kind: option
Targets: root, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type: boolean

checked boolean -

Description: Controls whether Menu is checked.
Kind: control
Targets: checkboxItem, radioItem
Full type: boolean

defaultChecked boolean false

Description: Sets whether Menu starts checked for uncontrolled usage.
Kind: control
Targets: checkboxItem, radioItem
Full type: boolean

closeOnClick boolean false

Description: Closes Menu after the item is clicked.
Kind: option
Targets: checkboxItem, radioItem
Full type: boolean

value string -

Description: Controls the current Menu value.
Kind: option
Targets: radioItem
Full type: string

State

State Type Props

checked boolean checked / defaultChecked

Description: Tracks whether Menu is checked.
Initial attribute: data-default-checked
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with checked and defaultChecked props. Runtime/HTML reads initial state from data-default-checked and emits starwind:checked-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

radioValue string value / defaultValue

Description: Tracks the selected radio value for Menu.
Initial attribute: data-value
Runtime getter: -
Runtime setter: -
State control support: React supports controlled and default state with value and defaultValue props. Runtime/HTML reads initial state from data-value and emits starwind:value-change. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

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

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

Props

Prop Type Default

closeDelay number 200

Description: Sets how long 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 Menu.

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

Props

Prop Type Default

disabled boolean false

Description: Disables the Submenu Trigger part.
Kind: option
Targets: root, 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: createMenu
Import: @starwind-ui/runtime/menu
Root hook: root data-sw-menu
Option props: closeDelay, defaultOpen, disabled, modal, onCloseComplete, onOpenChange, open, openOnHover

Option Lifecycles

Option	Lifecycle
closeDelay	constructor-only
defaultOpen	constructor-only
disabled	constructor-only
modal	constructor-only
onCloseComplete	constructor-only
onOpenChange	constructor-only
open	setter-backed
openOnHover	constructor-only

Runtime Setters

Method Target Description

setOpen state: open Opens or closes Menu from Runtime code.

Component Relationship

Dropdown Renamed primitive

Layer Metadata

Menu Primitive uses createMenu. Styled components: Dropdown.

primitive Menu Primitive Menu Primitive uses createMenu. Styled components: Dropdown. Runtime primitive Primitive adapter Astro Primitive adapters React Primitive adapters menu Menu Composite Menu Overlay Menu primitives with collection, item, submenu, and floating behavior. /docs/primitives/menu/ createMenu @starwind-ui/runtime/menu /docs/runtime/#create-menu root closeDelay defaultOpen disabled modal onCloseComplete onOpenChange open openOnHover raw-html astro react solid svelte vue HTML Astro React Solid Svelte Vue Raw HTML Render the Menu data-sw-* contract yourself, then initialize createMenu. html Use the Astro primitive adapter to render Menu anatomy with the Runtime wiring included. Use the React primitive adapter when Menu state participates in React rendering. tsx div data-sw-menu boolean Controls whether Menu is open. Sets whether Menu starts open. Disables the Root part. Makes Menu behave as a modal overlay. Configures the open on hover option for the Root part. number Sets how long Menu waits before closing. (open: boolean, details: MenuCloseCompleteDetails) => void MenuCloseCompleteDetails Runs after Menu has finished closing. (open: boolean, details: MenuOpenChangeDetails) => void MenuOpenChangeDetails Runs when Menu opens or closes. runtime Marks the Root part so Starwind Runtime can find it. data-default-open prop 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-open-on-hover Reflects the open on hover prop on the Root part. data-close-delay Reflects the close delay prop on the Root part. data-state state Reflects the current state on the Root part. getOpen setOpen checked defaultChecked data-default-checked radioValue string value defaultValue data-value openChange starwind:open-change closeComplete starwind:close-complete trigger button data-sw-menu-trigger asChild Merges behavior onto your child element instead of rendering the default Trigger element. Marks the Trigger part so Starwind Runtime can find it. Reflects the current state on the Trigger part. portal data-sw-menu-portal Marks the Portal part so Starwind Runtime can find it. positioner data-sw-menu-positioner side "top" | "right" | "bottom" | "left" Sets the preferred side for Menu content. align "start" | "center" | "end" Sets how Menu content aligns to its trigger. sideOffset Sets the distance between Menu content and its trigger. avoidCollisions Allows Menu content to shift or flip to stay visible. Marks the Positioner part so Starwind Runtime can find it. Reflects the current state on the Positioner part. 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 data-sw-menu-popup Marks the Popup part so Starwind Runtime can find it. Reflects the current state on the Popup part. Reflects the side prop on the Popup part. Reflects the align prop on the Popup part. Reflects the side offset prop on the Popup part. Reflects the avoid collisions prop on the Popup part. item data-sw-menu-item menuitem Disables the Item part. closeOnClick Closes Menu after the item is clicked. Marks the Item part so Starwind Runtime can find it. data-close-on-click Reflects the close on click prop on the Item part. Reflects the disabled prop on the Item part. linkItem a data-sw-menu-link-item Disables the Link Item part. Marks the Link Item part so Starwind Runtime can find it. Reflects the close on click prop on the Link Item part. Reflects the disabled prop on the Link Item part. checkboxItem data-sw-menu-checkbox-item menuitemcheckbox Disables the Checkbox Item part. Controls whether Menu is checked. Sets whether Menu starts checked for uncontrolled usage. onCheckedChange (checked: boolean, details: MenuCheckedChangeDetails) => void MenuCheckedChangeDetails Runs when the Menu checked state changes. Marks the Checkbox Item part so Starwind Runtime can find it. Reflects the default checked state on the Checkbox Item part. Reflects the close on click prop on the Checkbox Item part. data-checked Reflects the checked state on the Checkbox Item part. Reflects the disabled prop on the Checkbox Item part. data-unchecked Reflects the unchecked state on the Checkbox Item part. checkedChange starwind:checked-change checkboxItemIndicator span data-sw-menu-checkbox-item-indicator Marks the Checkbox Item Indicator part so Starwind Runtime can find it. Reflects the current state on the Checkbox Item Indicator part. radioGroup data-sw-menu-radio-group group Controls the current Menu value. Sets the initial Menu value for uncontrolled usage. onValueChange (value: string, details: MenuValueChangeDetails) => void MenuValueChangeDetails Runs when the Menu value changes. Marks the Radio Group part so Starwind Runtime can find it. Reflects the value state on the Radio Group part. valueChange starwind:value-change radioItem data-sw-menu-radio-item menuitemradio Disables the Radio Item part. Marks the Radio Item part so Starwind Runtime can find it. Reflects the value prop on the Radio Item part. Reflects the default checked state on the Radio Item part. Reflects the close on click prop on the Radio Item part. Reflects the checked state on the Radio Item part. Reflects the disabled prop on the Radio Item part. Reflects the unchecked state on the Radio Item part. radioItemIndicator data-sw-menu-radio-item-indicator Marks the Radio Item Indicator part so Starwind Runtime can find it. Reflects the current state on the Radio Item Indicator part. data-sw-menu-group Marks the Group part so Starwind Runtime can find it. label data-sw-menu-label Marks the Label part so Starwind Runtime can find it. separator data-sw-menu-separator Marks the Separator part so Starwind Runtime can find it. shortcut data-sw-menu-shortcut Marks the Shortcut part so Starwind Runtime can find it. submenuRoot data-sw-menu-submenu-root Marks the Submenu Root part so Starwind Runtime can find it. Reflects the close delay prop on the Submenu Root part. Reflects the current state on the Submenu Root part. submenuTrigger data-sw-menu-submenu-trigger Disables the Submenu Trigger part. Marks the Submenu Trigger part so Starwind Runtime can find it. Reflects the disabled prop on the Submenu Trigger part. Reflects the current state on the Submenu Trigger part. Root Trigger type aria-haspopup aria-expanded Portal Positioner Popup role tabindex hidden Item aria-disabled Link Item Checkbox Item aria-checked Checkbox Item Indicator aria-hidden Radio Group Radio Item Radio Item Indicator Group Label Separator aria-orientation Shortcut Submenu Root Submenu Trigger @starwind-ui/astro @starwind-ui/astro/menu Render static menu, submenu, item, and radio/checkbox item anatomy and self-initialize; do not promise controlled item state beyond initial markup. @starwind-ui/react @starwind-ui/react/menu Bridge controlled root open state through setOpen, wire onOpenChange and close completion through the factory, and keep radio-group value synchronization in the component template until a shared collection helper exists. dropdown Dropdown /docs/components/dropdown/ Renamed primitive renamed-primitive The styled docs use the Dropdown name while the behavior primitive is menu. Styled component Dropdown

Menu Primitive

Anatomy

Menu Behavior

Floating Behavior

API Reference

Root

Props

Events

State

Data Attributes

Runtime hooks

State

Metadata

Trigger

Props

Data Attributes

Runtime hooks

State

Portal

Data Attributes

Runtime hooks

Positioner

Props

Data Attributes

Runtime hooks

State

Metadata

Popup

Props

Data Attributes

Runtime hooks

State

Metadata

Item

Props

Data Attributes

Runtime hooks

Metadata

Link Item

Props

Data Attributes

Runtime hooks

Metadata

Checkbox Item

Props

Events

State

Data Attributes

Runtime hooks

State

Metadata

Checkbox Item Indicator

Data Attributes

Runtime hooks

State

Radio Group

Props

Events

State

Data Attributes

Runtime hooks

State

Radio Item

Props

State

Data Attributes

Runtime hooks

State

Metadata

Radio Item Indicator

Data Attributes

Runtime hooks

State

Group

Data Attributes

Runtime hooks

Label

Data Attributes

Runtime hooks

Separator