Dropdown

Demos

How to import

import { Button, Dropdown, HotKeys, Tag, Toast, type DropDownMenuItem } from '@fibrous/semi-ui-solid';

Basic Usage

The Trigger is passed as a function child: the function receives getTriggerProps, and its result is spread onto an element that takes focus, such as Button. By default it is displayed on hover. You can modify it to values like click, focus, custom, contextMenu, etc. through trigger to specify different triggering methods. Other children are wrapped in a span.
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. Pass an icon element through icon to configure an icon quickly. For more complex custom structures, write them directly in the children of Dropdown.Item.

Code

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

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={{ 'margin-left': '20px' }} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]} content={['Ctrl', 'B']} />
                    </Dropdown.Item>
                    <Dropdown.Item icon={<IconSetting />}>
                        Menu Item 2
                        <HotKeys style={{ 'margin-left': '20px' }} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]} content={['Ctrl', 'V']} />
                    </Dropdown.Item>
                    <Dropdown.Item disabled icon={<IconForward />}>
                        Menu Item 3
                        <HotKeys style={{ 'margin-left': '20px' }} 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>
            }
        >
            {(getTriggerProps) => (
                <Button theme="outline" type="tertiary" icon={<IconToken />} {...getTriggerProps()}>
                    Hover Me
                </Button>
            )}
        </Dropdown>
    );
}

Nested Usage

Users can nested Dropdown, which is suitable for situations with multiple sublevel options. The trigger of a parent item is also a function child, which spreads getTriggerProps onto the Dropdown.Item. 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 { For } from 'solid-js';
import { IconToken } from '@fibrous/semi-icons-solid/lab';
import { Button, Dropdown, Toast } from '@fibrous/semi-ui-solid';

const nestedItems = [1, 2, 3];

// A JSX element can be inserted into one place only, so each submenu builds its own menu
const subMenu = () => (
    <Dropdown.Menu>
        <For each={nestedItems}>{(n) => <Dropdown.Item onClick={() => Toast.info({ content: `点击了 Nested Menu Item ${n}` })}>Nested Menu Item {n}</Dropdown.Item>}</For>
    </Dropdown.Menu>
);

export default function DropdownDemo() {
    return (
        <div style={{ margin: '100px' }}>
            <Dropdown
                render={
                    <Dropdown.Menu>
                        <Dropdown position="rightTop" render={subMenu()}>
                            {(getTriggerProps) => <Dropdown.Item {...getTriggerProps()}>Menu Item 1</Dropdown.Item>}
                        </Dropdown>
                        <Dropdown position="leftTop" render={subMenu()}>
                            {(getTriggerProps) => <Dropdown.Item {...getTriggerProps()}>Menu Item 2</Dropdown.Item>}
                        </Dropdown>
                        <Dropdown.Item>Menu Item 3</Dropdown.Item>
                    </Dropdown.Menu>
                }
            >
                {(getTriggerProps) => (
                    <Button theme="outline" type="tertiary" icon={<IconToken />} {...getTriggerProps()}>
                        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-solid';

const menu = () => (
    <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>
);

export default function DropdownDemo() {
    return (
        <div>
            <Dropdown position="bottom" render={menu()}>
                <Tag>Bottom</Tag>
            </Dropdown>
            <br />
            <br />
            <Dropdown position="bottomLeft" render={menu()}>
                <Tag>bottomLeft</Tag>
            </Dropdown>
            <br />
            <br />
            <Dropdown position="bottomRight" render={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 { Button, Dropdown, Tag } from '@fibrous/semi-ui-solid';

const menu = () => (
    <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>
);

export default function DropdownDemo() {
    return (
        <div>
            <Dropdown trigger="hover" position="bottomLeft" render={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)',
                        'border-radius': '4px',
                        height: '36px',
                        width: '220px',
                    }}
                >
                    Please use Tab to focus this div
                </div>
            </Dropdown>
            <br />
            <br />
            <Dropdown trigger="click" position="bottomLeft" render={menu()}>
                {(getTriggerProps) => <Button {...getTriggerProps()}>Click me</Button>}
            </Dropdown>
            <br />
            <br />
            <Dropdown trigger="contextMenu" position="bottomRight" render={menu()}>
                {(getTriggerProps) => (
                    <Button theme="solid" type="secondary" style={{ 'margin-bottom': '20px' }} {...getTriggerProps()}>
                        Right click (ContextMenu)
                    </Button>
                )}
            </Dropdown>
        </div>
    );
}

Trigger Event

Click on the menu item to trigger different mouse events, support onClick, onMouseEnter, onMouseLeave and onContextMenu. The onClick of a top-level menu fires on click, that of a submenu fires on the left button press, and Enter and Space on the keyboard fire it as well.

Code

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

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>
            }
        >
            {(getTriggerProps) => (
                <Button theme="outline" type="tertiary" icon={<IconToken />} {...getTriggerProps()}>
                    Click Me
                </Button>
            )}
        </Dropdown>
    );
}

Json Usage

Can use the menu attribute, given an array, to configure the Dropdown content menu. Callbacks in an entry use camelCase names such as onClick, the same as the props of Dropdown.Item.

Code

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

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' },
];

export default function DropdownDemo() {
    return (
        <Dropdown trigger="click" showTick position="bottomLeft" menu={menu}>
            {(getTriggerProps) => (
                <Button theme="outline" type="tertiary" icon={<IconToken />} {...getTriggerProps()}>
                    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.	`boolean`	-
autoAdjustOverflow	Whether the menu flips to another side when it would be clipped. Defaults to true.	`boolean`	-
children	The trigger. A function, such as `{(getTriggerProps) => <Button {...getTriggerProps()} />}`, receives getTriggerProps, whose result is spread onto the element. Other content is wrapped in a span, and text or several nodes respond to the keyboard as well.	`Type`	-
class	Class name of the popup's outer `.semi-dropdown-wrapper` element.	`string`	-
clickToHide	Whether a click inside the popup closes it.	`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.	`boolean`	`true`
condition	Whether the trigger may show the menu. 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`	-
contentClassName	Class name of the menu container `.semi-dropdown`.	`string`	-
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`.	`Type`	-
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 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 once, when the component is created.	`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.	`JSX.Element`	-
returnFocusOnClose	Whether focus returns to the trigger after the menu closes.	`boolean`	`true`
role	ARIA role of the popup container around the menu. The menu itself has role menu.	`string`	`"presentation"`
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 \| JSX.Element`	-
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	Style of the menu container `.semi-dropdown`, as an object with kebab-case keys such as `'margin-top'`, or a string.	`JSX.CSSProperties \| string`	-
trigger	What shows the menu: hover, focus, click, custom or contextMenu. With custom, visible alone decides.	`'hover' \| 'focus' \| 'click' \| 'custom' \| 'contextMenu'`	`"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: class 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
None

class, style, ref and native attributes 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 Dropdown has showTick.	`boolean`	-
disabled	Whether the item is disabled. A disabled item does not respond to clicks or mouse events.	`boolean`	-
forwardRef	Called with the root `li` element before ref, for a component that wraps Dropdown.Item and needs the element.	`Type`	-
icon	Icon of the item, given as an element and rendered before the content.	`JSX.Element`	-
showTick	Takes effect only outside a Dropdown. Inside one, the showTick of the Dropdown applies.	`boolean`	-
type	Text color type: primary, secondary, tertiary, warning or danger.	`Type`	-

class, style, ref and other native attributes land on the li. A disabled Item does not respond to onClick, onMouseEnter, onMouseLeave or onContextMenu.

Props

Property	Description	Type	Default
None

class, style, ref and native attributes land on the li.

DropdownMenuItem

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

Properties	Instructions	Type	Default
node	Entry type: `title`, `item` or `divider`	`'title' \| 'item' \| 'divider'`	-
name	Menu text, only on `title` and `item`	`string`	-
active, disabled, showTick, type	Correspond to the props of Dropdown.Item of the same name, only on `item`	-	-
Other props, such as `class`, `style`, `onClick`	Handed to the matching Dropdown.Title, Dropdown.Item or Dropdown.Divider by `node`; callbacks such as `onClick` only apply to `item`	-	-

Methods

ref receives the DropdownHandle once, when the component is created. 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