Dropdown

Demos

How to import

import { Dropdown } from '@fibrous/semi-ui-react';

Basic Usage

For the Trigger of the Dropdown within its children: By default, it is displayed on hover. You can modify it to values like click, custom, contextMenu, etc. through the props.trigger to specify different triggering methods.
Use render to specify the specific content of the dropdown box: Use Dropdown.Menu as the parent container, and use Dropdown.Item, Dropdown.Divider, and Dropdown.Title in combination. Of course, in simple scenarios, you can also just combine Dropdown.Menu with Dropdown.Item, and the other elements are not mandatory.
Dropdown.Item can disable a certain option by setting disabled. By configuring type, text in different colors can be displayed. By setting icon, icons can be quickly configured. For more complex custom structures, you can pass in ReactNode through children for custom rendering.

Code

import { IconBox, IconSetting, IconForward, IconRefresh, IconSearch, IconAlertCircle } from '@fibrous/semi-icons-react';
import { IconToken } from '@fibrous/semi-icons-react/lab';
import { Dropdown, Button, HotKeys } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    return (
        <Dropdown
            position="bottomLeft"
            render={
                <Dropdown.Menu>
                    <Dropdown.Title>分组1</Dropdown.Title>
                    <Dropdown.Item icon={<IconBox />}>
                        Menu Item 1
                        <HotKeys style={{ marginLeft: 20 }} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]} content={['Ctrl', 'B']} />
                    </Dropdown.Item>
                    <Dropdown.Item icon={<IconSetting />}>
                        Menu Item 2
                        <HotKeys style={{ marginLeft: 20 }} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]} content={['Ctrl', 'V']} />
                    </Dropdown.Item>
                    <Dropdown.Item disabled icon={<IconForward />}>
                        Menu Item 3
                        <HotKeys style={{ marginLeft: 20 }} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.F3]} content={['Ctrl', 'F3']} />
                    </Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Title>分组2</Dropdown.Title>
                    <Dropdown.Item type="tertiary" icon={<IconRefresh />}>
                        tertiary
                    </Dropdown.Item>
                    <Dropdown.Item type="warning" icon={<IconSearch />}>
                        warning
                    </Dropdown.Item>
                    <Dropdown.Item type="danger" icon={<IconAlertCircle />}>
                        danger
                    </Dropdown.Item>
                </Dropdown.Menu>
            }
        >
            <Button theme="outline" type="tertiary" icon={<IconToken />}>
                Hover Me
            </Button>
        </Dropdown>
    );
}

Nested Usage

Users can nested Dropdown, which is suitable for situations with multiple sublevel options. From the keyboard, Right Arrow opens a submenu and Left Arrow returns to the parent item, and Enter or Space calls the onClick of an item at any level (see Accessibility).

Code

import { useMemo } from 'react';
import { IconToken } from '@fibrous/semi-icons-react/lab';
import { Dropdown, Button, Toast } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    // Enter and Space trigger a submenu item's onClick too
    const subDropdown = useMemo(
        () => (
            <Dropdown.Menu>
                {[1, 2, 3].map((n) => (
                    <Dropdown.Item key={n} onClick={() => Toast.info({ content: `点击了 Nested Menu Item ${n}` })}>
                        Nested Menu Item {n}
                    </Dropdown.Item>
                ))}
            </Dropdown.Menu>
        ),
        []
    );

    return (
        <div style={{ margin: 100 }}>
            <Dropdown
                render={
                    <Dropdown.Menu>
                        <Dropdown position="rightTop" render={subDropdown}>
                            <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        </Dropdown>
                        <Dropdown position="leftTop" render={subDropdown}>
                            <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        </Dropdown>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Button theme="outline" type="tertiary" icon={<IconToken />}>
                    Hover Me
                </Button>
            </Dropdown>
        </div>
    );
}

The position of support is the same. Tooltip, commonly used are: "bottom", "bottomLeft", "bottomRight".

Bottom

bottomLeft

bottomRight

Code

import { Dropdown, Tag } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    return (
        <div>
            <Dropdown
                position="bottom"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Tag>Bottom</Tag>
            </Dropdown>
            <br />
            <br />
            <Dropdown
                position="bottomLeft"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Tag>bottomLeft</Tag>
            </Dropdown>
            <br />
            <br />
            <Dropdown
                position="bottomRight"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Tag>bottomRight</Tag>
            </Dropdown>
        </div>
    );
}

Trigger Mode

The default is the move-in Trigger, which can be expanded by getting focus, clicking, right-clicking (contextMenu), or customizing the event trigger menu. After a right click opens the menu, focus moves to the first enabled item.

Hover me

Please use Tab to focus this div

Code

import { Dropdown, Tag, Button } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    return (
        <div>
            <Dropdown
                trigger="hover"
                position="bottomLeft"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Tag>Hover me</Tag>
            </Dropdown>
            <br />
            <br />
            <Dropdown
                trigger="focus"
                position="bottomLeft"
                render={
                    <Dropdown.Menu tabIndex={-1}>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <div
                    style={{
                        border: '1px solid var(--semi-color-border)',
                        borderRadius: 4,
                        height: 36,
                        width: 220,
                    }}
                >
                    Please use Tab to focus this div
                </div>
            </Dropdown>
            <br />
            <br />
            <Dropdown
                trigger="click"
                position="bottomLeft"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Button>Click me</Button>
            </Dropdown>
            <br />
            <br />
            <Dropdown
                trigger="contextMenu"
                position="bottomRight"
                render={
                    <Dropdown.Menu>
                        <Dropdown.Item>Menu Item 1</Dropdown.Item>
                        <Dropdown.Item>Menu Item 2</Dropdown.Item>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                <Button theme="solid" type="secondary" style={{ marginBottom: 20 }}>
                    Right click (ContextMenu)
                </Button>
            </Dropdown>
        </div>
    );
}

Trigger Event

Click on the menu item to trigger different mouse events, support onClick, onMouseEnter, onMouseLeave and onContextMenu.

Code

import { IconToken } from '@fibrous/semi-icons-react/lab';
import { Dropdown, Button, Toast } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    return (
        <Dropdown
            trigger="click"
            position="bottomLeft"
            render={
                <Dropdown.Menu>
                    <Dropdown.Item onClick={() => Toast.info({ content: 'You clicked me!' })}>1: click me!</Dropdown.Item>
                    <Dropdown.Item onMouseEnter={() => Toast.info({ content: 'Nice to meet you!' })}>2: mouse enter</Dropdown.Item>
                    <Dropdown.Item onMouseLeave={() => Toast.info({ content: 'See ya!' })}>3: mouse leave</Dropdown.Item>
                    <Dropdown.Item onContextMenu={() => Toast.info({ content: 'Right clicked!' })}>4: right click</Dropdown.Item>
                </Dropdown.Menu>
            }
        >
            <Button theme="outline" type="tertiary" icon={<IconToken />}>
                Click Me
            </Button>
        </Dropdown>
    );
}

Json Usage

Can use the menu attribute to configure the Dropdown content menu

Code

import { IconToken } from '@fibrous/semi-icons-react/lab';
import { Dropdown, Button, type DropDownMenuItem } from '@fibrous/semi-ui-react';

export default function DropdownDemo() {
    const menu: DropDownMenuItem[] = [
        { node: 'title', name: '分组1' },
        { node: 'item', name: 'primary1', type: 'primary', onClick: () => console.log('click primary') },
        { node: 'item', name: 'secondary', type: 'secondary' },
        { node: 'divider' },
        { node: 'title', name: '分组2' },
        { node: 'item', name: 'tertiary', type: 'tertiary' },
        { node: 'item', name: 'warning', type: 'warning', active: true },
        { node: 'item', name: 'danger', type: 'danger' },
    ];
    return (
        <Dropdown trigger="click" showTick position="bottomLeft" menu={menu}>
            <Button theme="outline" type="tertiary" icon={<IconToken />}>
                Click Me
            </Button>
        </Dropdown>
    );
}

API Reference

Props

Property	Description	Type	Default
afterClose	Called after the menu has closed and its leave animation has ended.	`Type`	-
afterOpen	Called after the menu has opened and its enter animation has ended, or right after opening when there is no enter animation. An opening closed before the enter animation ends does not call it.	`Type`	-
aria-label	`aria-label` of the popup when its `role` is `dialog`.	`string`	-
aria-labelledby	`aria-labelledby` of the popup when its `role` is `dialog`.	`string`	-
arrowPointAtCenter	Whether the arrow points at the center of the trigger. Takes effect only when `showArrow` is `true`. Defaults to `true`.	`boolean`	-
autoAdjustOverflow	Whether the menu flips to another side when it would be clipped. Defaults to `true`.	`boolean`	-
children	The trigger. A single element receives the trigger events and ARIA attributes; text or several nodes are wrapped in a `span`.	`React.ReactNode`	-
className	Class name of the popup's outer `.semi-dropdown-wrapper` element.	`string`	-
clickToHide	Whether a click inside the popup closes it. Defaults to `false`.	`boolean`	-
clickTriggerToHide	Whether a click on the trigger closes an open menu.	`boolean`	-
closeOnEsc	Whether Esc on the trigger or in the popup closes the menu. With `trigger` `custom` it only calls `onEscKeyDown`, and the caller decides whether to close.	`TooltipProps['closeOnEsc']`	`true`
condition	Whether the trigger may show the menu. Defaults to `true`. Only an explicit `false` disables the hover, click and focus triggers; with `trigger` `custom`, `visible` still shows the menu. Changing it from `true` to `false` closes an open menu at once.	`boolean`	-
content	Dropdown sets this to the menu content, so a value passed here has no effect. Use `render` or `menu` for the content.	`React.ReactNode \| RenderContent`	-
contentClassName	Class name of the menu container `.semi-dropdown`.	`string \| any[]`	-
disableArrowKeyDown	Dropdown always sets this to `true` and handles the arrow keys itself, so a value passed here has no effect.	`boolean`	-
disableFocusListener	Whether keyboard focus is ignored when `trigger` is `hover`. Defaults to `false`.	`boolean`	-
guardFocus	Whether Tab cycles inside the popup while focus is in it. Defaults to `false`.	`boolean`	-
keepDOM	Whether the menu's DOM is kept instead of destroyed when it closes. Defaults to `false`.	`boolean`	-
menu	Configures the menu from data: objects whose `node` is `item`, `title` or `divider`, see DropdownMenuItem below. `render` takes precedence when it is provided.	`DropDownMenuItem[]`	-
motion	Whether the popup plays its enter and leave animations.	`boolean`	`true`
mouseEnterDelay	Milliseconds before the menu shows after the pointer enters the trigger. Defaults to `50`. Applies to the `hover` and `focus` triggers.	`number`	-
mouseLeaveDelay	Milliseconds before the menu hides after the pointer leaves the popup. Applies to the `hover` and `focus` triggers.	`number`	`100`
onClickOutSide	Called when the mouse is pressed outside the trigger and the popup, with the native `MouseEvent`. Takes effect only for `trigger` `click`, `contextMenu` or `custom`, or with `clickTriggerToHide`.	`Type`	-
onEscKeyDown	Called when Esc is pressed while the menu is open, with the native `KeyboardEvent`.	`TooltipProps['onEscKeyDown']`	-
onOpen	Called once per opening when the menu is shown and its enter animation starts, before `afterOpen`. An opening withdrawn because the pointer already left does not call it.	`Type`	-
onVisibleChange	Called with `visible` when the visibility of the menu changes. With a controlled `visible` it reports only requests from user interaction, not changes the caller makes to `visible`.	`Type`	-
position	Position of the menu relative to the trigger. Common values are `bottom`, `bottomLeft` and `bottomRight`. See the Tooltip positions for more.	`Position`	`"bottom"`
prefixCls	Class prefix of the popup.	`string`	`"semi-dropdown"`
preventScroll	Whether focusing an element avoids scrolling it into view. Defaults to `false`.	`boolean`	-
ref	Receives the `DropdownHandle` when mounted, and `null` when unmounted.	`Type`	-
render	Content of the popup, made of `Dropdown.Menu` with `Dropdown.Item`, `Dropdown.Title` and `Dropdown.Divider`. It takes precedence over `menu` when provided.	`React.ReactNode`	-
returnFocusOnClose	Whether focus returns to the trigger after the menu closes. Defaults to `true`.	`boolean`	-
role	ARIA role of the popup container around the menu, `presentation` by default. The menu itself has role `menu`.	`string`	-
selectionMode	How the items of this menu are selected; `active` marks the selected ones. With `single` the items are `menuitemradio` with `aria-checked`, with `multiple` `menuitemcheckbox` with `aria-checked`; unset, they are `menuitemcheckbox` with `aria-checked` when `showTick` is on, otherwise `menuitem`. It sets roles and states only: `showTick` alone shows the tick. Nested submenus do not inherit it.	`DropdownSelectionMode`	-
showArrow	Whether the arrow is shown. Defaults to `false`.	`boolean \| React.ReactNode`	-
showTick	Whether an active `Dropdown.Item` shows a tick on its leading side. It applies to the menu of this Dropdown only; nested submenus do not inherit it.	`boolean`	`false`
spacing	Distance in pixels between the popup and the trigger. Defaults to `4` for a top-level menu and `2` for a nested submenu.	`number \| { x: number; y: number }`	-
stopPropagation	Whether click, mousedown and focus in/out events on the popup stop propagating. Defaults to `false`.	`boolean`	-
style	Inline style of the menu container `.semi-dropdown`.	`React.CSSProperties`	-
trigger	What shows the menu: `hover`, `focus`, `click`, `custom` or `contextMenu`. With `custom`, `visible` alone decides.	`Trigger`	`"hover"`
visible	Whether the menu is shown. Used with `trigger` `custom`. When given, this value decides, and the trigger, a click outside and Esc only request a change through `onVisibleChange`.	`boolean`	-
wrapperClassName	Class name of the `span` that wraps the trigger when a wrapper is needed.	`string`	-
wrapperId	id of the popup element, referenced by the trigger's ARIA attributes. Generated when omitted.	`string`	-
wrapWhenSpecial	Whether a special trigger, such as a disabled or loading Button, is wrapped in a `span` so that it still triggers the menu. Defaults to `true`.	`boolean`	-

Methods

Method	Description	Type
focusTrigger	Focuses the trigger element. Takes effect only when `returnFocusOnClose` is `true` and `trigger` is not `custom`.	`Type`
rePosition	Recomputes the popup position from the trigger's current position at once. The popup already follows scrolling, window resizing, trigger moves and size changes of the trigger or popup, so this is rarely needed; following a trigger move lands a frame late, so call this to align within the same frame.	`Type`

Dropdown has no root element of its own: className lands on the outer .semi-dropdown-wrapper of the popup, style and contentClassName on the menu container .semi-dropdown, ref receives the DropdownHandle, and other undeclared attributes are dropped.

Props

Property	Description	Type	Default
children	Children of the menu, usually `Dropdown.Item` or `Dropdown.Title`.	`React.ReactNode`	-
className	Class name of the menu `ul` element.	`string`	-
ref	Reference to the menu `ul` element.	`Type`	-
style	Inline style of the menu `ul` element.	`CSSProperties`	-

Other native attributes (such as id and aria-*) land on the ul of the menu. role and aria-orientation can be overridden, and onKeyDown runs before the built-in keyboard handling.

Props

Property	Description	Type	Default
active	Whether the item is active: bolder text and a deeper color, plus a tick on its leading side when the tick is shown.	`boolean`	-
children	Content of the item, rendered after the icon.	`ReactNode`	-
className	Class name of the root `li` element.	`string`	-
disabled	Whether the item is disabled. A disabled item does not respond to clicks or mouse events and has `aria-disabled` `true`.	`boolean`	`false`
forwardRef	Called with the root `li` element when it mounts, for a component that wraps `Dropdown.Item` and needs the element.	`Type`	-
icon	Icon of the item, rendered before the content.	`React.ReactNode`	-
onClick	Called on click with the `MouseEvent`. For an item inside a nested submenu it is called on the left mouse press, and on keyboard activation. Not called for a disabled item.	`Type`	-
onContextMenu	Called on a right click. Not called for a disabled item.	`Type`	-
onMouseEnter	Called when the pointer enters the item. Not called for a disabled item.	`Type`	-
onMouseLeave	Called when the pointer leaves the item. Not called for a disabled item.	`Type`	-
ref	Reference to the root `li` element.	`Type`	-
showTick	Takes effect only outside a Dropdown. Inside one, the `showTick` of the Dropdown applies.	`boolean`	-
style	Inline style of the root `li` element.	`CSSProperties`	-
type	Text color type: `primary`, `secondary`, `tertiary`, `warning` or `danger`.	`Type`	-

Other native attributes (such as id and data-*) land on the root li. role, aria-checked and aria-disabled are set by Dropdown and cannot be overridden.

Props

Property	Description	Type	Default
children	Text or content of the title.	`ReactNode`	-
className	Class name of the root `li` element.	`string`	-
ref	Reference to the root `li` element.	`Type`	-
style	Inline style of the root `li` element.	`CSSProperties`	-

Other native attributes (such as id and data-*) land on the root li, and role can be overridden.

DropdownMenuItem

Properties	Instructions	Type
node	menu type: `title`,`item`,`divider`	string
name	menu content	string
Other Properties refer to Title、Item、Divider

An entry does not accept children; the label comes from name alone.

Methods

ref receives the DropdownHandle once, when the component is mounted. Call its focusTrigger() and rePosition() methods; see the Methods table of Dropdown above.

Accessibility

Dropdown follows the WAI-ARIA APG Menu Button and Menu and Menubar patterns.

ARIA

The trigger has aria-haspopup="menu" and aria-expanded, which is true while the menu is shown and false otherwise
Dropdown.Menu has role="menu" and aria-orientation="vertical"
Dropdown.Item has role="menuitem"; with the Dropdown's selectionMode set to single it has role="menuitemradio", with multiple or with showTick it has role="menuitemcheckbox", and in these three cases it exposes active as aria-checked; the tick icon is left out of the item name; a disabled item has aria-disabled="true"
A Dropdown.Item that triggers a nested Dropdown (a parent item) also has aria-haspopup="menu" and aria-expanded
Dropdown.Divider renders an li with role="separator", and Dropdown.Title an li with role="presentation"
The popup container around the menu has role="presentation", not tooltip

Keyboard and Focus

With focus on the trigger:

Key	Behavior
`Enter`, `Space`	With `trigger="click"`, opens the menu and moves focus to the first enabled item
`Down Arrow`	While the menu is open, moves focus to the first enabled item; on a button trigger (`button`, a link with `href`, Semi Button, ...) with the menu closed, opens the menu and focuses the first enabled item
`Up Arrow`	While the menu is open, moves focus to the last enabled item; on a button trigger with the menu closed, opens the menu and focuses the last enabled item
`Tab`	While the menu is open, closes it and moves focus in the browser's default order

When render (the #content slot in Vue) holds no menu items, Down Arrow and Up Arrow on the open popup's trigger focus its first and last focusable element.

When the trigger is text or several nodes, Dropdown wraps them in a span, and the keys above work on that span as well.

With trigger set to hover or focus, focusing the trigger from the keyboard opens the menu (turn this off with disableFocusListener), and moving focus away closes it.

With trigger set to contextMenu, focus moves to the first enabled item after a right click opens the menu.

With focus on a menu item:

Key	Behavior
`Down Arrow`, `Up Arrow`	Moves to the next or previous item of the current menu, skipping disabled items and wrapping at either end
`Home`, `End`	Moves to the first or last item of the current menu
`Enter`, `Space`	On a parent item, opens the submenu and moves focus to its first item; on any other item, calls `onClick` (`@click` in Vue), then closes the menu with `clickToHide`
`Right Arrow`	On a parent item, opens the submenu and moves focus to its first item; no effect on other items
`Left Arrow`	In a submenu, closes it and returns focus to the parent item, regardless of `closeOnEsc`
`Tab`	Closes every menu (submenus included) and moves focus in the browser's default order, not back to the trigger
`Esc`	Closes the menu that contains focus and returns focus to the element that opened it (the parent item or the trigger); on a parent item whose submenu is open, closes the submenu first; does nothing when `closeOnEsc` is false
Printable characters	Moves to the next item of the current menu that starts with the character

In RTL (ConfigProvider direction="rtl"), Left Arrow and Right Arrow are swapped.
Calling e.preventDefault() in an item's onKeyDown (@keydown in Vue) keeps Enter and Space from calling onClick (@click in Vue).
When an item of a nested Dropdown is activated from the keyboard, its onClick (@click in Vue) receives a click event; with the mouse it still fires on the left button press.

Content Guidelines

The content of the options in the drop-down box needs to be expressed accurately and contain information to make it easier for users to choose among the options when browsing
Use statement-like capitalization and write options concisely and clearly
In the case of an action option, use a verb or verb phrase to describe the action that will occur when the user selects the option. For example, "Move", "Log time", or "Hide labels"
do not use prepositions

✅ Recommended usage	❌ Deprecated usage

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$transition_duration-dropdown_item-bg	var(--semi-transition_duration-none)	下拉菜单项-背景颜色-动画持续时间
$transition_function-dropdown_item-bg	var(--semi-transition_function-easeOut)	下拉菜单项-背景颜色-过渡曲线
$transition_delay-dropdown_item-bg	0ms	下拉菜单项-背景颜色-延迟时间
$radius-dropdown	var(--semi-border-radius-medium)	下拉菜单圆角大小
$radius-dropdown_item	0px	下拉菜单项圆角大小
$color-dropdown-bg-default	var(--semi-color-bg-3)	下拉菜单背景颜色
$color-dropdown_title-text-default	var(--semi-color-text-2)	下拉菜单分组标题文字颜色
$spacing-dropdown_menu-paddingY	$spacing-extra-tight	下拉菜单垂直内边距
$spacing-dropdown_menu-paddingX	0	下拉菜单水平内边距
$spacing-dropdown_title-paddingTop	$spacing-tight	下拉菜单分组标题顶部内边距
$spacing-dropdown_title-paddingBottom	$spacing-extra-tight	下拉菜单分组标题底部内边距
$spacing-dropdown_title-paddingLeft	$spacing-base	下拉菜单分组标题左侧内边距
$spacing-dropdown_title-paddingRight	$spacing-base	下拉菜单分组标题右侧内边距
$spacing-dropdown_title_withTick-paddingLeft	31px	可选中的下拉菜单，分组标题左侧内边距
$spacing-dropdown_item_withTick-paddingLeft	$spacing-base-tight	可选中弄的下拉菜单项，对勾 icon 左侧内边距
$spacing-dropdown_item-paddingY	$spacing-tight	下拉菜单项垂直内边距
$spacing-dropdown_item-paddingX	$spacing-base	下拉菜单项水平内边距
$color-dropdown_item-text-default	var(--semi-color-text-0)	下拉菜单项文字颜色
$color-dropdown_item-bg-hover	var(--semi-color-fill-0)	下拉菜单项背景颜色 - 悬浮
$color-dropdown_item-bg-active	var(--semi-color-fill-1)	下拉菜单项背景颜色 - 按下
$color-dropdown_item_danger-text-default	var(--semi-color-danger)	下拉菜单项背景颜色 - 悬浮
$color-dropdown_item_secondary-text-default	var(--semi-color-secondary)	二级菜单项文字颜色
$color-dropdown_item_warning-text-default	var(--semi-color-warning)	警告菜单项文字颜色
$color-dropdown_item_tertiary-text-default	var(--semi-color-tertiary)	第三菜单项文字颜色
$color-dropdown_item_primary-text-default	var(--semi-color-primary)	主要菜单项文字颜色
$color-dropdown_item_disabled-text-default	var(--semi-color-disabled-text)	禁用菜单项文字颜色
$color-dropdown_item_disabled-bg-default	transparent	禁用菜单项背景颜色
$color-dropdown_seperator-bg-default	var(--semi-color-border)	菜单项分隔线颜色
$spacing-dropdown_icon-marginRight	9px	菜单项分隔线颜色
$spacing-dropdown_seperator-marginY	$spacing-extra-tight	菜单项分隔线垂直内边距
$spacing-dropdown_seperator-marginX	0	菜单项分隔线水平内边距
$width-dropdown	280px	菜单最大宽度
$size-dropdown-icon-width	12px	菜单项图标宽度
$height-dropdown_seperator	1px	菜单项分隔线宽度
$font-dropdown_item_active-fontWeight	600	选中菜单项字重
$filter-dropdown-bg	none

FAQ

Why does the Dropdown layer accidentally wrap when the width is not enough near the screen border?

After Chromium 104, the wrapping rendering strategy when the width of the screen border text is not enough has changed. For details, see issue #1022, the semi-side has been This problem was fixed in v2.17.0.

Demos

How to import

Basic Usage

Nested Usage

Popup Position

Trigger Mode

Trigger Event

Json Usage

API Reference

Dropdown.Menu

Dropdown.Item

Dropdown.Title

DropdownMenuItem

Methods

Accessibility

ARIA

Keyboard and Focus

Content Guidelines

Design Tokens

FAQ