Flutter docs
Default skin

Dropdown

A menu or action surface opened from a trigger.

When to use

Use Dropdown when a page has more operations than can remain visible or when actions depend on a trigger context.

Examples

Basic

The most basic dropdown menu.

Placement

Support 12 placements.

Other elements

Divider and disabled menu item.

Trigger mode

The default trigger mode is hover, you can change it to click.

Button with dropdown menu

A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.

Cascading menu

The menu has multiple levels.

Context Menu

The default trigger mode is hover, you can change it to contextMenu. The pop-up menu position will follow the right-click position.

Selectable Menu

Configure the selectable property in menu to enable selectable ability.

Custom semantic dom styling

You can customize the semantic dom style of the Dropdown by passing objects/functions through classNames and styles.

Extra node

The dropdown menu with shortcut.

Arrow

You could display an arrow.

Arrow pointing at the center

By specifying arrow prop with { pointAtCenter: true }, the arrow will point to the center of the target element.

Click event

An event will be triggered when you click menu items, in which you can make different operations according to item's key.

Custom dropdown

Customize the dropdown menu via popupRender. If you don't need the Menu content, use the Popover component directly.

The way of hiding menu.

The default is to close the menu when you click on menu items, this feature can be turned off.

Loading

A loading indicator can be added to a button by setting the loading property.

Selection actions

Use Dropdown with the browser Selection API to show custom actions after selecting text.

API

Dropdown, Dropdown.Button, and their props are exported from @ceebee/ui/client.

When selecting an item dismisses the menu, focus returns to its trigger before a dialog opened by that item mounts. Closing the dialog can then return focus to the same durable trigger. Multiple-selection menus that remain open retain their menu focus. Upstream props, forwarded trigger refs, and onOpenChange notifications remain available. Enter activates the menu item once; its default click is consumed before focus moves, so it cannot also activate the newly opened dialog's first button.

Keep the trigger mounted while its dialog is open. Avoid restoring focus to the dismissed menu item, which may no longer exist. Arrow navigation and menu activation retain the upstream keyboard contract; a dialog owns its own Tab loop and Escape dismissal.

Dropdown

PropertyDescriptionTypeDefaultVersion
arrowWhether the dropdown arrow should be visibleboolean | { pointAtCenter: boolean }false—
autoAdjustOverflowWhether to adjust dropdown placement automatically when dropdown is off screenbooleantrue5.2.0
classNamesCustomize class for each semantic structure inside the Dropdown component. Supports object or function.Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-—
disabledWhether the dropdown menu is disabledboolean-—
destroyPopupOnHideWhether destroy dropdown when hidden, use destroyOnHidden insteadbooleanfalse—
destroyOnHiddenWhether destroy dropdown when hiddenbooleanfalse5.25.0
dropdownRenderCustomize dropdown content, use popupRender instead(menus: ReactNode) => ReactNode-4.24.0
popupRenderCustomize popup content(menus: ReactNode) => ReactNode-5.25.0
getPopupContainerTo set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. Example on CodePen(triggerNode: HTMLElement) => HTMLElement() => document.body—
menuThe menu propsMenuProps-—
overlayClassNameThe class name of the dropdown root element, please use classNames.root insteadstring-—
overlayStyleThe style of the dropdown root element, please use styles.root insteadCSSProperties-—
placementPlacement of popup menu: top topLeft topRight bottom bottomLeft bottomRight left leftTop leftBottom right rightTop rightBottomstringbottomLeftleft leftTop leftBottom right rightTop rightBottom: 6.5.0
stylesCustomize inline style for each semantic structure inside the Dropdown component. Supports object or function.Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-—
triggerThe trigger mode which executes the dropdown action. Note that hover can't be used on touchscreensArray&lt;click|hover|contextMenu>\[hover]—
openWhether the dropdown menu is currently openboolean-—
onOpenChangeCalled when the open state is changed. Not trigger when hidden by click item(open: boolean, info: { source: 'trigger' | 'menu' }) => void-info.source: 5.11.0