Dropdown

A cross-platform React dropdown menu component that displays a list of actions when triggered. Supports controlled and uncontrolled modes.

Installation

npm install @xsolla/xui-dropdown
# or
yarn add @xsolla/xui-dropdown

Demo

Basic Dropdown

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

export default function BasicDropdown() {
  return (
    <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>
  );
}

Dropdown with Icons

import * as React from 'react';
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
import { Button } from '@xsolla/xui-button';
import { Copy } from '@xsolla/xui-icons';
import { Edit, TrashCan } from '@xsolla/xui-icons-base';

export default function DropdownWithIcons() {
  return (
    <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 Dropdown

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

export default function ControlledDropdown() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <Dropdown
        trigger={<Button>Menu</Button>}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
      >
        <DropdownItem onPress={() => setIsOpen(false)}>Action 1</DropdownItem>
        <DropdownItem onPress={() => setIsOpen(false)}>Action 2</DropdownItem>
      </Dropdown>
      <p>Dropdown is: {isOpen ? 'Open' : 'Closed'}</p>
    </div>
  );
}

Selection Indicator

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

export default function SelectionDropdown() {
  const [selected, setSelected] = React.useState('option1');

  return (
    <Dropdown trigger={<Button>Select Option</Button>}>
      <DropdownItem
        selected={selected === 'option1'}
        onPress={() => setSelected('option1')}
      >
        Option 1
      </DropdownItem>
      <DropdownItem
        selected={selected === 'option2'}
        onPress={() => setSelected('option2')}
      >
        Option 2
      </DropdownItem>
      <DropdownItem
        selected={selected === 'option3'}
        onPress={() => setSelected('option3')}
      >
        Option 3
      </DropdownItem>
    </Dropdown>
  );
}

Anatomy

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

<Dropdown
  trigger={<TriggerElement />}  // Element that opens dropdown
  isOpen={boolean}              // Controlled open state
  onOpenChange={handler}        // Open state change handler
  width={200}                   // Custom dropdown width
>
  <DropdownItem
    onPress={handler}           // Click handler
    icon={<Icon />}             // Leading icon
    selected={boolean}          // Show selection checkmark
    disabled={boolean}          // Disabled state
  >
    Item Label
  </DropdownItem>
</Dropdown>

API Reference

Dropdown

Container component for dropdown menu.

Dropdown Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | trigger | ReactNode | - | Required. Element that triggers dropdown. | | children | ReactNode | - | Required. DropdownItem components. | | isOpen | boolean | - | Controlled open state. | | onOpenChange | (open: boolean) => void | - | Open state change handler. | | width | string \| number | - | Custom dropdown width. |

DropdownItem

Individual menu item component.

DropdownItem Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Required. Item content. | | onPress | () => void | - | Click handler. | | icon | ReactNode | - | Leading icon. | | selected | boolean | false | Show selection checkmark. | | active | boolean | false | Active/hover state. | | disabled | boolean | false | Disabled state. |

Behavior

• Clicking outside the dropdown closes it
• Selected items show a checkmark and highlighted background
• Disabled items are visually muted and not clickable
• Dropdown positions below trigger by default

Accessibility

• Uses role="menu" for dropdown container
• Items use role="menuitem"
• Keyboard support for navigation
• Focus management when opening/closing