DropdownMenu·component·@astryxdesign/core

Dropdown Menu Submenu

A single menu row that reveals a nested flyout of its own items. The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled); its children become the flyout content. Opens inline-end with viewport auto-flip; Right/Enter/Space opens and focuses the first item, Left/Escape closes and returns focus to the trigger (Right/Left swap in RTL). For data-driven menus, give a menu item a nested `items` array instead of using this component directly.

Open in Playground @astryxdesign/core/DropdownMenu

Showcases and examples

7 documented examples · Context from Dropdown Menu

Dropdown Menu

A button that opens a dropdown menu with action items. The menu starts open for preview.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · dropdown-menu-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';

export default function DropdownMenuShowcase() {
  return (
    <DropdownMenu
      button={{label: 'Actions'}}
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}

Usage

A single menu row that reveals a nested flyout of its own items. The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled); its children become the flyout content. Opens inline-end with viewport auto-flip; Right/Enter/Space opens and focuses the first item, Left/Escape closes and returns focus to the trigger (Right/Left swap in RTL). For data-driven menus, give a menu item a nested items array instead of using this component directly.

Typed props

Prop	Type and behavior
`label`	`ReactNode` Primary label text for the trigger row.
`icon`	`IconType` Icon to display before the label. See `astryx docs icons` for valid semantic names.
`description`	`ReactNode` Secondary description text displayed below the label.
`children`	`ReactNode` The flyout menu items: the same components used at the top level (DropdownMenuItem, nested DropdownMenuSubMenu, selectable items).
`isDisabled`	`boolean` · default false A disabled submenu renders its trigger row but never opens the flyout.
`hasSpinner`	`boolean` · default false Show a spinner in place of the caret, e.g. while a lazy submenu's children are loading.
`menuWidth`	`number \| string` Minimum flyout width. The flyout may grow for its content, but it is capped to the available viewport space. Defaults to intrinsic sizing (min 160px).
`onOpenChange`	`(isOpen: boolean) => void` Called when the flyout opens or closes.
`xstyle`	`StyleXStyles` StyleX styles for the trigger row. Must be a stylex.create() value: not an inline style object like style={{}}.