Dropdown

A cross-platform dropdown menu that displays a list of actions when triggered; supports controlled and uncontrolled modes.

Installation

npm install @xsolla/xui-dropdown

Imports

import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
import type { DropdownProps, DropdownItemProps } from '@xsolla/xui-dropdown';

Quick start

import { Button } from '@xsolla/xui-button';

<Dropdown trigger={<Button>Open menu</Button>}>
  <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
  <DropdownItem onPress={() => console.log('Duplicate')}>Duplicate</DropdownItem>
  <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
</Dropdown>;

API Reference

<Dropdown>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | trigger | ReactNode | — | Element that opens the menu. | | children | ReactNode | — | DropdownItem elements (or any nodes). | | isOpen | boolean | — | Controlled open state. | | onOpenChange | (open: boolean) => void | — | Fired when the open state changes. | | width | string \| number | 'auto' | Width of the menu (does not affect the trigger). | | align | 'start' \| 'end' | 'start' | Horizontal alignment of the menu relative to the trigger. | | borderRadius | number \| string | theme.shape.contextMenu.md.borderRadius | Border radius of the menu. | | id | string | — | HTML id on the root container. | | aria-label | string | — | Accessible label for the menu. | | testID | string | — | Test identifier. | | overlayThemeMode | ThemeMode | themeMode | Theme mode for the dropdown menu overlay. | | overlayThemeProductContext | ProductContext | themeProductContext | Product context for the dropdown menu overlay. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

<DropdownItem>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | children | ReactNode | — | Item content. | | onPress | () => void | — | Press handler. | | icon | ReactNode | — | Leading icon. | | selected | boolean | false | Show selection styling and checkmark background. | | active | boolean | false | Active/hover state. | | disabled | boolean | false | Disable the item. | | testID | string | — | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Examples

With icons

import { Edit, TrashCan } from '@xsolla/xui-icons-base';
import { Copy } from '@xsolla/xui-icons';

<Dropdown trigger={<Button>Actions</Button>}>
  <DropdownItem icon={<Edit size={16} />}>Edit</DropdownItem>
  <DropdownItem icon={<Copy size={16} />}>Duplicate</DropdownItem>
  <DropdownItem icon={<TrashCan size={16} />}>Delete</DropdownItem>
</Dropdown>;

Controlled

const [isOpen, setIsOpen] = useState(false);

<Dropdown trigger={<Button>Menu</Button>} isOpen={isOpen} onOpenChange={setIsOpen}>
  <DropdownItem onPress={() => setIsOpen(false)}>Action 1</DropdownItem>
  <DropdownItem onPress={() => setIsOpen(false)}>Action 2</DropdownItem>
</Dropdown>;

Selection indicator

const [selected, setSelected] = useState('option1');

<Dropdown trigger={<Button>Select option</Button>} align="end">
  <DropdownItem
    selected={selected === 'option1'}
    onPress={() => setSelected('option1')}
  >
    Option 1
  </DropdownItem>
  <DropdownItem
    selected={selected === 'option2'}
    onPress={() => setSelected('option2')}
  >
    Option 2
  </DropdownItem>
</Dropdown>;

Custom border radius

import { Button } from '@xsolla/xui-button';
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';

<Dropdown trigger={<Button>Rounded menu</Button>} width={220} borderRadius={16}>
  <DropdownItem>Profile</DropdownItem>
  <DropdownItem>Billing</DropdownItem>
  <DropdownItem>Settings</DropdownItem>
</Dropdown>;

Accessibility

• Trigger exposes aria-haspopup="menu" and aria-expanded.
• Menu uses role="menu"; items use role="menuitem".
• Enter/Space on the trigger toggles open; ArrowDown opens the menu.
• Escape and Tab close the menu and restore focus to the trigger.
• Clicking outside the dropdown closes it.