Skip to main content

Starwind UI v3.0 is now available! Migration guide

On this page

Menu Primitive

View Markdown

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

Menu Behavior

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

FactValue
Anchor parttrigger
Positioner partpositioner
Popup partpopup
Portal partportal
Option propsside, 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 Toggle
open boolean -
Description
Controls whether 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 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, 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
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 Menu opens or closes.
DOM event
starwind:open-change
Details type
MenuOpenChangeDetails
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 Menu has finished closing.
DOM event
starwind:close-complete
Details type
MenuCloseCompleteDetails
Timing
after-state-commit
Cancelable
No

State

State Type Props Toggle
open boolean open / defaultOpen
Description
Tracks whether 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 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 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 - 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 Toggle
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 Toggle
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.

Popup

The floating content container for 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 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 Toggle
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 Toggle
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 Toggle
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
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 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 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
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 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 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 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 Toggle
value string -
Description
Controls the current 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 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 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 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 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 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, item, linkItem, checkboxItem, radioItem, submenuTrigger
Full type
boolean
checked boolean -
Description
Controls whether 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 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 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
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 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 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 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 Toggle
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 Toggle
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

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

Runtime Setters

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

Related Styled Components

Component Relationship
Dropdown Renamed 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

  • Added opt-in modal background-scroll locking while the menu is open.

v0.1.0

  • Introduced action and link items, keyboard navigation, checked items, submenus, and floating placement.