Component test bench
DropdownMenu
Exercise click, hover, keyboard navigation, nested menus, links, actions, disabled items, and collision-aware placement. Astro and React render the same custom-element behavior contract.
Astro
Markup wrappers around the shared custom element.
Actions, links, and nesting
Includes icons, shortcuts, disabled state, and two submenu levels.
Custom trigger and alignment
A plain link trigger with end-aligned content.
Placement
These explicit sides still flip and shift when they approach the viewport edge.
React
The same custom element, rendered through React compound wrappers.
Actions, links, and nesting
The custom element owns open state; React only renders the parts and handles item callbacks.
Selection:
Custom trigger
Plain React markup with an item that keeps the menu open.
Keyboard checklist
Use Arrow Up/Down, Home/End, Enter/Space, typeahead, Arrow Right/Left for submenus, Escape to restore focus, and Tab to close without trapping focus.