Props

DropdownMenu

Name	Type	Default	Description
button	DropdownMenuButtonProps	{ label: 'Menu' }	Props for the trigger button — every Button prop except clickAction, which would compete with the menu for the same click. size also sets the height of the menu rows.
items	DropdownMenuOption[]	-	Data-mode menu content. Each entry is an action, a divider { type: 'divider' }, or a titled group { type: 'section', title, items }. Mutually exclusive with the default slot; items wins when both are given.
isMenuOpen	boolean	-	Controlled open state, paired with v-model:is-menu-open. Left out, the menu manages its own state. A menu mounted already open does not move focus.
menuWidth	number | string	-	Minimum width of the menu. A length grows for its content; an intrinsic keyword such as max-content becomes the preferred width. Every form is capped to the viewport. Defaults to the trigger's width, capped at 320px.
menuMaxHeight	number	-	Maximum height in pixels, for a menu that must fit all of its rows. This lifts the default 300px cap; the viewport still bounds the real height.
placement	'above' | 'below' | 'start' | 'end'	'below'	Where the menu opens relative to the trigger. It flips to the opposite side when there is no room.
alignment	'start' | 'center' | 'end'	'start'	How the menu aligns with the trigger along the placement axis.
hasChevron	boolean	true	Whether the trigger button shows a trailing chevron. An icon-only button never shows it.

DropdownMenuItem

Name	Type	Default	Description
label	string | number	-	Primary text of the row. Use the label slot for rich content.
description	string | number	-	Secondary line below the label. Use the description slot for rich content.
icon	string | Component	-	Icon before the label: a CSS icon class (an UnoCSS class such as i-carbon-copy, or one of your own), or a component that draws the SVG. astryx-vue ships no icons. Use the icon slot for arbitrary content.
isDisabled	boolean	false	Disables the row. A disabled row is skipped by the arrow keys and by typeahead, and it does not respond to clicks.
variant	'default' | 'destructive'	'default'	Visual variant. destructive recolors the label, description, and icon in the error color for dangerous actions such as Delete. The hover highlight stays the shared neutral, so it still matches every other row.
hasCloseOnSelect	boolean	true	Whether activating the row closes the menu. Set it to false for an action that reports its result on the row itself, such as a copy row.
href	string	-	Address the row navigates to. The row then renders as one anchor carrying role="menuitem", so a ⌘/Ctrl-click and a middle click keep the browser's meaning.
target	'_blank' | '_self'	-	Link target. Only used with href.
rel	string	-	Link relationship. Only used with href. noopener and noreferrer are added for target="_blank".
onClick	(event: MouseEvent) => void	-	Called when the row is activated. On a link row it runs before the browser navigates, and it is skipped for a modified click, which the browser owns.

DropdownMenuGroup

Name	Type	Default	Description
title	string | number	-	Heading shown above the group's rows and used as the group's accessible name. Omit it for an unnamed group.

DropdownMenuDivider takes no props. It renders a role="separator" rule, so it is never a stop in the arrow-key order.

Events

Name	Payload	Description
update:isMenuOpen	boolean	The open state changed; drives v-model:is-menu-open.
openChange	boolean	Fired together with update:isMenuOpen when the open state changes.
click	-	Fired when the trigger is activated, for both opening and closing.
click (DropdownMenuItem)	MouseEvent	Fired when the row is activated.

Slots

Name	Description
default	Compound menu content: DropdownMenuItem, DropdownMenuGroup and DropdownMenuDivider. Mutually exclusive with items.
trigger	A custom control for the trigger. The slot props carry id, aria-haspopup, aria-expanded, aria-controls, onClick and onKeyDown; spread all of them onto the control.
icon (DropdownMenuItem)	Arbitrary leading content, replacing the icon prop.
label / description (DropdownMenuItem)	Rich content replacing the prop of the same name.
endContent (DropdownMenuItem)	Trailing content, such as a Kbd shortcut hint.
title / default (DropdownMenuGroup)	A rich heading for the group, and the group's rows.

Native attributes

Apart from the props above, native attributes fall through to the menu panel element:

• HTML and data-* attributes.
• aria-* attributes.
• class and style.

The panel carries a generated id that the trigger's aria-controls points at. Passing id explicitly replaces both that generated id and the value of aria-controls, so the two cannot drift apart. Passing aria-label or aria-labelledby overrides the menu's default name, which comes from the trigger button's label, or from the control itself when the trigger slot is used.

The trigger button carries aria-haspopup="menu", aria-expanded and aria-controls. It sits inside a span.astryx-dropdown-menu-trigger that anchors the panel.