Dropdown <Experimental></Experimental> — Ant Design Mobile v5.43.0 docs

The menu panel that pops down.

Install

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

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`	-