@xsolla/xui-dropdown

Generic dropdown container that attaches a positioned menu to any trigger element.

Installation

yarn add @xsolla/xui-dropdown

Usage

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

<Dropdown trigger={<button>Options</button>}>
  <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
  <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
</Dropdown>

Components

• Dropdown — wrapper that positions the menu relative to the trigger
• DropdownItem — individual menu item with optional icon and selected state

Props

Dropdown

| Prop | Type | Default | Description | |------|------|---------|-------------| | trigger | ReactNode | — | Element that opens/closes the menu on click | | children | ReactNode | — | Menu content, typically DropdownItem elements | | isOpen | boolean | — | Controlled open state | | onOpenChange | (open: boolean) => void | — | Called when open state changes | | align | "start" \| "end" | "start" | Horizontal alignment of the menu relative to the trigger | | width | string \| number | "auto" | Width of the dropdown menu |

DropdownItem

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | — | Item label content | | onPress | () => void | — | Called when the item is activated | | selected | boolean | — | Highlights item with brand colour and shows a checkmark | | active | boolean | — | Highlights item with hover colour | | disabled | boolean | — | Prevents interaction and dims the item | | icon | ReactNode | — | Icon displayed to the left of the label |