ts
| Guidance | Practices |
|---|---|
| Do | Keep menu items concise and action-oriented so users can scan options quickly. |
| Do | Use sections and dividers to group related actions when the menu has many items. |
| Don't | Use a DropdownMenu for navigation — use a navigation component instead. |
| Don't | Place more than 10–12 items in a single menu without grouping them into sections. |
| Prop | Type | Description |
|---|---|---|
itemsrequired | XDSDropdownMenuOption[] | Menu items, dividers, or sections to display in the popup. |
button | XDSDropdownMenuButtonProps (default: { label: 'Menu' }) | Props for the trigger button (XDSButton props except onClick). |
isMenuOpen | boolean | Controlled open state for the menu. |
onOpenChange | (isOpen: boolean) => void | Callback fired when the open state changes. |
menuWidth | number | string | Custom menu width; defaults to matching the trigger button width. |
onClick | () => void | Callback fired when the trigger button is clicked. |
hasChevron | boolean (default: true) | Whether to show a chevron icon on the trigger button. Set to false for icon-only triggers. |
hasAutoFocus | boolean (default: true) | Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases or documentation previews. |
children | (item: XDSDropdownMenuItemData) => ReactNode | Custom render function for each item in the list. |
| Prop | Type | Description |
|---|---|---|
typerequired | 'divider' | Discriminant value that identifies this entry as a divider. |
| Prop | Type | Description |
|---|---|---|
icon | XDSIconType | Icon to display before the label. See `npx xds docs icons` for valid semantic names. |
label | ReactNode | Primary label text. |
description | ReactNode | Secondary description text displayed below the label. |
children | ReactNode | Additional content rendered after the label and description. |
xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}. |
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Display label for the item. |
onClick | () => void | Callback fired when the item is selected. |
isDisabled | boolean (default: false) | Whether the item is disabled; disabled items are skipped during keyboard navigation. |
icon | XDSIconType | Icon to display before the item label. See `npx xds docs icons` for valid semantic names. |
| Prop | Type | Description |
|---|---|---|
typerequired | 'section' | Discriminant value that identifies this entry as a section. |
itemsrequired | XDSDropdownMenuItemData[] | The actionable items that belong to this section. |
title | string | Optional header text displayed above the section items. |