Dropdown

Demos

How to import

<script setup lang="ts">
    import { Dropdown } from '@fibrous/semi-ui-vue';
</script>

Dropdown.Menu, Dropdown.Item, Dropdown.Title and Dropdown.Divider can also be imported by name: DropdownMenu, DropdownItem, DropdownTitle and DropdownDivider.

Basic Usage

Put the Trigger of the Dropdown in the default slot: By default, it is displayed on hover. You can modify it to values like click, custom, contextMenu, etc. through trigger to specify different triggering methods.
Use the #content slot 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. The #icon slot configures an icon quickly. For more complex custom structures, write them directly in the default slot of Dropdown.Item.

Code

<script setup lang="ts">
    import { IconAlertCircle, IconBox, IconForward, IconRefresh, IconSearch, IconSetting } from '@fibrous/semi-icons-vue';
    import { IconToken } from '@fibrous/semi-icons-vue/lab';
    import { Button, Dropdown, HotKeys } from '@fibrous/semi-ui-vue';
</script>

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

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 @click of an item at any level (see Accessibility). A nested submenu defaults to a spacing of 2. showTick, selectionMode and trigger are not inherited from the outer menu: the submenu Dropdown's own settings apply.

Code

<script setup lang="ts">
    import { IconToken } from '@fibrous/semi-icons-vue/lab';
    import { Button, Dropdown, Toast } from '@fibrous/semi-ui-vue';

    const submenus = [
        { label: 'Menu Item 1', position: 'rightTop' },
        { label: 'Menu Item 2', position: 'leftTop' },
    ] as const;
</script>

<template>
    <div :style="{ margin: '100px' }">
        <Dropdown>
            <Button theme="outline" type="tertiary">
                <template #icon>
                    <IconToken />
                </template>
                Hover Me
            </Button>
            <template #content>
                <Dropdown.Menu>
                    <Dropdown v-for="submenu in submenus" :key="submenu.label" :position="submenu.position">
                        <Dropdown.Item>{{ submenu.label }}</Dropdown.Item>
                        <template #content>
                            <Dropdown.Menu>
                                <!-- Enter and Space trigger a submenu item's click too -->
                                <Dropdown.Item v-for="n in 3" :key="n" @click="Toast.info(`点击了 Nested Menu Item ${n}`)"> Nested Menu Item {{ n }} </Dropdown.Item>
                            </Dropdown.Menu>
                        </template>
                    </Dropdown>
                    <Dropdown.Item>Menu Item 3</Dropdown.Item>
                </Dropdown.Menu>
            </template>
        </Dropdown>
    </div>
</template>

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

Bottom

bottomLeft

bottomRight

Code

<script setup lang="ts">
    import { Dropdown, Tag } from '@fibrous/semi-ui-vue';

    const positions = ['bottom', 'bottomLeft', 'bottomRight'] as const;
</script>

<template>
    <div>
        <template v-for="(position, index) in positions" :key="position">
            <template v-if="index > 0">
                <br />
                <br />
            </template>
            <Dropdown :position="position">
                <Tag>{{ position === 'bottom' ? 'Bottom' : position }}</Tag>
                <template #content>
                    <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>
                </template>
            </Dropdown>
        </template>
    </div>
</template>

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

<script setup lang="ts">
    import { Button, Dropdown, Tag } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Dropdown position="bottomLeft" trigger="hover">
            <Tag>Hover me</Tag>
            <template #content>
                <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>
            </template>
        </Dropdown>
        <br />
        <br />
        <Dropdown position="bottomLeft" trigger="focus">
            <div
                :style="{
                    border: '1px solid var(--semi-color-border)',
                    borderRadius: '4px',
                    height: '36px',
                    width: '220px',
                }"
            >
                Please use Tab to focus this div
            </div>
            <template #content>
                <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>
            </template>
        </Dropdown>
        <br />
        <br />
        <Dropdown position="bottomLeft" trigger="click">
            <Button>Click me</Button>
            <template #content>
                <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>
            </template>
        </Dropdown>
        <br />
        <br />
        <Dropdown position="bottomRight" trigger="contextMenu">
            <Button :style="{ marginBottom: '20px' }" theme="solid" type="secondary"> Right click (ContextMenu) </Button>
            <template #content>
                <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>
            </template>
        </Dropdown>
    </div>
</template>

Trigger Event

Click on the menu item to trigger different mouse events, support @click, @mouseenter, @mouseleave and @contextmenu. The @click 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

<script setup lang="ts">
    import { IconToken } from '@fibrous/semi-icons-vue/lab';
    import { Button, Dropdown, Toast } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Dropdown position="bottomLeft" trigger="click">
        <Button theme="outline" type="tertiary">
            <template #icon>
                <IconToken />
            </template>
            Click Me
        </Button>
        <template #content>
            <Dropdown.Menu>
                <Dropdown.Item @click="Toast.info('You clicked me!')">1: click me!</Dropdown.Item>
                <Dropdown.Item @mouseenter="Toast.info('Nice to meet you!')">2: mouse enter</Dropdown.Item>
                <Dropdown.Item @mouseleave="Toast.info('See ya!')">3: mouse leave</Dropdown.Item>
                <Dropdown.Item @contextmenu="Toast.info('Right clicked!')">4: right click</Dropdown.Item>
            </Dropdown.Menu>
        </template>
    </Dropdown>
</template>

Json Usage

Can use the menu attribute to configure the Dropdown content menu. Listeners in an entry use Vue key names such as onClick and onMouseenter, and are handed to the matching Dropdown.Item. Use the #menuIcon="{ item, index }" slot to customize the icon of each entry. The #content slot wins when it is provided.

Code

<script setup lang="ts">
    import { IconToken } from '@fibrous/semi-icons-vue/lab';
    import { Button, Dropdown, type DropDownMenuItem } from '@fibrous/semi-ui-vue';

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

<template>
    <Dropdown :menu="menu" position="bottomLeft" showTick trigger="click">
        <Button theme="outline" type="tertiary">
            <template #icon>
                <IconToken />
            </template>
            Click Me
        </Button>
    </Dropdown>
</template>

API Reference

Props

Property	Description	Type	Default
contentClassName	Class name of the dropdown menu root element.	`string \| unknown[]`	`semiGlobalDefault("Dropdown", "contentClassName")`
menu	Configures the menu from data, see DropdownMenuItem below. The content slot wins when it is provided.	`DropDownMenuItem[]`	`semiGlobalDefault("Dropdown", "menu")`
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`	`semiGlobalDefault("Dropdown", "selectionMode")`
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`	`semiDefault("Dropdown", "showTick", false)`
motion	Whether the popup is animated.	`boolean`	`semiDefault("Dropdown", "motion", true)`
autoAdjustOverflow	Whether the popup flips automatically when it would be clipped.	`boolean`	`semiGlobalDefault("Dropdown", "autoAdjustOverflow")`
position	Position of the menu relative to the trigger. Common values are bottom, bottomLeft and bottomRight; see the Tooltip positions for more.	`Type`	`semiDefault("Dropdown", "position", "bottom")`
prefixCls	Class prefix of the popup. A custom value drops the Dropdown styles.	`string`	`semiDefault("Dropdown", "prefixCls", cssClasses.PREFIX)`
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; }`	`semiGlobalDefault("Dropdown", "spacing")`
role	ARIA role of the popup container around the menu. The menu itself has role menu.	`string`	`semiDefault("Dropdown", "role", "presentation")`
ariaLabel	aria-label of the popup when its role is dialog.	`string`	`semiGlobalDefault("Dropdown", "ariaLabel")`
ariaLabelledby	aria-labelledby of the popup when its role is dialog.	`string`	`semiGlobalDefault("Dropdown", "ariaLabelledby")`
ariaDescribedby	aria-describedby of the popup when its role is dialog.	`string`	`semiGlobalDefault("Dropdown", "ariaDescribedby")`
wrapWhenSpecial	Whether a disabled or loading trigger is wrapped in a span so that it still triggers the popup.	`boolean`	`semiGlobalDefault("Dropdown", "wrapWhenSpecial")`
stopPropagation	Whether click, mousedown and focus in/out events on the popup stop propagating.	`boolean`	`semiGlobalDefault("Dropdown", "stopPropagation")`
wrapperClassName	Class name of the span that wraps the trigger when a wrapper is needed.	`string`	`semiGlobalDefault("Dropdown", "wrapperClassName")`
wrapperId	id of the popup element, referenced by the trigger's ARIA attributes. Generated when omitted.	`string`	`undefined`
keepDOM	Whether the popup content stays mounted while closed.	`boolean`	`semiGlobalDefault("Dropdown", "keepDOM")`
clickToHide	Whether a click inside the popup closes it.	`boolean`	`semiGlobalDefault("Dropdown", "clickToHide")`
clickTriggerToHide	Whether a click on the trigger closes an open popup.	`boolean`	`semiGlobalDefault("Dropdown", "clickTriggerToHide")`
closeOnEsc	Whether Esc on the trigger or in the popup closes the menu. With trigger custom it only emits escKeyDown and the caller decides whether to close.	`boolean`	`semiDefault("Dropdown", "closeOnEsc", true)`
condition	Whether the popup may be triggered. Only an explicit false disables the hover, click and focus triggers; with trigger custom, visible still shows the popup. Changing it from true to false closes an open popup at once; with a controlled visible it only emits update:visible and visibleChange(false), and the popup closes once the caller writes back.	`boolean`	`semiGlobalDefault("Dropdown", "condition")`
disableFocusListener	Whether keyboard focus is ignored when trigger is hover.	`boolean`	`semiGlobalDefault("Dropdown", "disableFocusListener")`
guardFocus	Whether Tab cycles inside the popup while focus is in it.	`boolean`	`semiGlobalDefault("Dropdown", "guardFocus")`
mouseEnterDelay	Milliseconds before the menu shows after the pointer enters the trigger. Applies to the hover and focus triggers.	`number`	`semiGlobalDefault("Dropdown", "mouseEnterDelay")`
mouseLeaveDelay	Milliseconds before the menu hides after the pointer leaves the popup. Applies to the hover and focus triggers; not less than mouseEnterDelay.	`number`	`Type`
preventScroll	Whether focusing an element avoids scrolling it into view.	`boolean`	`semiGlobalDefault("Dropdown", "preventScroll")`
returnFocusOnClose	Whether focus returns to the trigger after the menu closes.	`boolean`	`semiDefault("Dropdown", "returnFocusOnClose", true)`
trigger	What shows the menu: hover, focus, click, custom or contextMenu. With custom, visible alone decides.	`"hover" \| "focus" \| "click" \| "custom" \| "contextMenu"`	`semiDefault("Dropdown", "trigger", "hover")`
visible	Whether the menu is shown, used with trigger custom and v-model:visible. When given, this value decides.	`boolean`	`semiGlobalDefault("Dropdown", "visible")`

Events

Event	Description	Callback parameters
open	Emitted once per opening when the menu is shown, as its enter animation starts, before afterOpen, controlled or not; not emitted for a hover open withdrawn because the pointer already left.	`[]`
update:visible	Emitted when the menu should show or hide, for v-model:visible to write back.	`[visible: boolean]`
visibleChange	Emitted when the visibility of the menu changes; with a controlled visible it reports only requests from user interaction, not changes the parent makes to visible.	`[visible: boolean]`
clickOutSide	Emitted when the mouse is pressed outside of the trigger and the open popup. Only for trigger click, contextMenu or custom, or with clickTriggerToHide.	`[event: MouseEvent]`
escKeyDown	Emitted when Esc is pressed while the menu is open and closeOnEsc is true.	`[event: KeyboardEvent]`
afterOpen	Emitted after the menu has opened and its enter animation has finished, or right after opening when there is no enter animation, controlled or not; not emitted for an open that is closed before the enter animation ends.	`[]`
afterClose	Emitted after the menu has closed and its leave animation has finished.	`[]`

Slots

Slot	Description	Scope parameters
default	The trigger. A single element or component receives the trigger attributes directly; text or several nodes are wrapped in a span that responds to the keyboard as well.	`any`
content	Menu content made of Dropdown.Menu with Dropdown.Item, Dropdown.Title and Dropdown.Divider. It takes precedence over menu once provided.	`any`
menuIcon	Icon of each item entry of menu, with the entry and its index as scope parameters. An empty result renders no icon.	`DropdownMenuIconSlotProps`

Exposes

Name	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 on .semi-dropdown, and other undeclared attributes are dropped.

Props

Property	Description	Type	Default
None

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Children of the menu, usually Dropdown.Item, Dropdown.Title or Dropdown.Divider.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes land on the ul of the menu through attrs. role and aria-orientation can be overridden, and a @keydown bound on the menu 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`	`false`
disabled	Whether the item is disabled.	`boolean`	`false`
showTick	Takes effect only outside a Dropdown. Inside one, the showTick of the Dropdown applies.	`boolean`	`undefined`
type	Text color type: primary, secondary, tertiary, warning or danger.	`Type`	`undefined`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Content of the item.	`any`
icon	Icon of the item.	`any`

Exposes

Name	Description	Type
None

Listen for click, pointer enter and leave, and right click with @click, @mouseenter, @mouseleave and @contextmenu; the parameter of @click is the native MouseEvent. class, style and other native attributes land on the li through attrs. A disabled Item does not respond to @click, @mouseenter, @mouseleave or @contextmenu.

Props

Property	Description	Type	Default
None

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Content of the group title.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes land on the li through attrs. The divider Dropdown.Divider has no props or slots and also receives class and style through attrs.

DropdownMenuItem

Properties	Instructions	Type	Default
node	Entry type: `title`, `item` or `divider`	`'title' \| 'item' \| 'divider'`	-
name	Menu text, only on `title` and `item`	`string \| number`	-
active, disabled, showTick, type	Correspond to the props of Dropdown.Item of the same name, only on `item`	-	-
class, style, `data-`, `aria-`	Handed to the matching Title, Item or Divider through attrs; `style` is a string or a style object, not an array	-	-
onClick, onMouseenter, onMouseleave, onContextmenu	Listeners of Dropdown.Item under Vue key names, only on `item`	`(event: MouseEvent) => void`	-

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

Methods

Call focusTrigger() and rePosition() through a template ref, see the Exposes 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