# Dropdown <Experimental></Experimental>

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/dropdown
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

The menu panel that pops down.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

The menu panel that pops down.

## When to Use

It is suitable for filtering, sorting and changing the display range or order of the current page content.

## Demos

## Dropdown

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| activeKey | Active `Item` key | `string \| null` | - |
| arrowIcon | Custom arrow icon | `React.ReactNode` | - |
| closeOnClickAway | Whether to automatically hide after clicking outside area | `boolean` | `false` |
| closeOnMaskClick | Whether to automatically close after clicking on the mask | `boolean` | `true` |
| defaultActiveKey | The default active `Item` key | `string \| null` | `null` |
| onChange | Triggered when `activeKey` changes | `(activeKey: string \| null)=> void` | - |
| onVisibleChange | Triggered when the dropdown panel is shown or hidden | `(visible: boolean, info: { key: string \| null }) => void` | - |
| getContainer | The parent container of the custom popup | `HTMLElement \| (() => HTMLElement) \| null` | `document.body` |

### Ref

| Name  | Description        | Type         |
| ----- | ------------------ | ------------ |
| close | Close the Dropdown | `() => void` |

## Dropdown.Item

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| arrowIcon | Custom arrow icon | `React.ReactNode` | - |
| destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
| forceRender | Whether to render the content even if it is not active | `boolean` | `false` |
| highlight | Highlight | `boolean` | `false` |
| key | The unique value | `string` | - |
| title | Title | `ReactNode` | - |
| onClick | The click event | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt