Dropdown

A dropdown list that appears when you hover or click on an element.

When To Use

• When you need to provide a list of actions for a component
• When space is limited and you need to hide options
• For context menus and action menus

Basic Usage

import { TxDropdown, TxButton } from "tx-design-ui";

const menu = [
  {
    key: "1",
    label: "1st menu item",
  },
  {
    key: "2",
    label: "2nd menu item",
  },
  {
    key: "3",
    label: "3rd menu item",
  },
];

<TxDropdown menu={menu}>
  <TxButton>Hover me</TxButton>
</TxDropdown>;

Trigger

Control how the dropdown is triggered.

// Hover trigger (default)
<TxDropdown menu={menu} trigger="hover">
  <TxButton>Hover me</TxButton>
</TxDropdown>

// Click trigger
<TxDropdown menu={menu} trigger="click">
  <TxButton>Click me</TxButton>
</TxDropdown>

Placement

Set the position of the dropdown menu.

<TxDropdown menu={menu} placement="bottomLeft">
  <TxButton>Bottom Left</TxButton>
</TxDropdown>

<TxDropdown menu={menu} placement="bottomRight">
  <TxButton>Bottom Right</TxButton>
</TxDropdown>

<TxDropdown menu={menu} placement="topLeft">
  <TxButton>Top Left</TxButton>
</TxDropdown>

<TxDropdown menu={menu} placement="topRight">
  <TxButton>Top Right</TxButton>
</TxDropdown>

With Divider

Add dividers to separate menu items.

const menu = [
  {
    key: "1",
    label: "1st menu item",
  },
  {
    key: "2",
    label: "2nd menu item",
  },
  {
    key: "divider-1",
    type: "divider",
  },
  {
    key: "3",
    label: "3rd menu item",
  },
];

Danger Items

Highlight dangerous actions.

const menu = [
  {
    key: "1",
    label: "Edit",
  },
  {
    key: "2",
    label: "Copy",
  },
  {
    key: "divider-1",
    type: "divider",
  },
  {
    key: "3",
    label: "Delete",
    danger: true,
  },
];

With Icons

Add icons to menu items.

const menu = [
  {
    key: "1",
    label: "Edit",
    icon: <EditIcon />,
  },
  {
    key: "2",
    label: "Copy",
    icon: <CopyIcon />,
  },
  {
    key: "3",
    label: "Delete",
    icon: <DeleteIcon />,
    danger: true,
  },
];

API

Property	Type	Default	Description
children	ReactNode	-	Target element (required)
menu	Array<MenuItem>	[]	Menu items
placement	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	'bottomLeft'	Position of dropdown
trigger	'hover' | 'click'	'hover'	Trigger mode
onMenuClick	function(key)	-	Callback when item clicked

MenuItem

Property	Type	Default	Description
key	string	-	Unique key
label	ReactNode	-	Menu item label
icon	ReactNode	-	Icon for menu item
disabled	boolean	false	Whether item is disabled
danger	boolean	false	Whether to show danger style
type	'divider'	-	Set to divider for separator

Notes

• Dropdown closes automatically when an item is clicked
• Dropdown closes when clicking outside (for click trigger)
• Use danger property for destructive actions like "Delete"
• Consider using Popconfirm for destructive actions that need confirmation