Dropdown

Demos

How to import

<script lang="ts">
    import { Dropdown, DropdownDivider, DropdownItem, DropdownMenu, DropdownTitle } from '@fibrae/semi-ui-svelte';
</script>

Dropdown.Menu, Dropdown.Item, Dropdown.Title and Dropdown.Divider correspond to DropdownMenu, DropdownItem, DropdownTitle and DropdownDivider, imported by name.

Basic Usage

The Trigger is passed as the children of the Dropdown and is wrapped in a span. 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. To render the trigger element yourself, use the child snippet and spread its props argument onto an element that takes focus.
Use the content snippet to specify the specific content of the dropdown box: Use DropdownMenu as the parent container, and use DropdownItem, DropdownDivider, and DropdownTitle in combination. Of course, in simple scenarios, you can also just combine DropdownMenu with DropdownItem, and the other elements are not mandatory.
DropdownItem can disable a certain option by setting disabled. By configuring type, text in different colors can be displayed. The icon snippet configures an icon quickly. For more complex custom structures, write them directly in the children of DropdownItem.

Code

<script lang="ts">
    import { IconAlertCircle, IconBox, IconForward, IconRefresh, IconSearch, IconSetting } from '@fibrae/semi-icons-svelte';
    import { IconToken } from '@fibrae/semi-icons-svelte/lab';
    import { Button, Dropdown, DropdownDivider, DropdownItem, DropdownMenu, DropdownTitle, HotKeys } from '@fibrae/semi-ui-svelte';
</script>

<Dropdown position="bottomLeft">
    <Button theme="outline" type="tertiary">
        {#snippet icon()}<IconToken />{/snippet}
        Hover Me
    </Button>
    {#snippet content()}
        <DropdownMenu>
            <DropdownTitle>分组1</DropdownTitle>
            <DropdownItem>
                {#snippet icon()}<IconBox />{/snippet}
                Menu Item 1
                <HotKeys content={['Ctrl', 'B']} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.B]} style="margin-left: 20px" />
            </DropdownItem>
            <DropdownItem>
                {#snippet icon()}<IconSetting />{/snippet}
                Menu Item 2
                <HotKeys content={['Ctrl', 'V']} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.V]} style="margin-left: 20px" />
            </DropdownItem>
            <DropdownItem disabled>
                {#snippet icon()}<IconForward />{/snippet}
                Menu Item 3
                <HotKeys content={['Ctrl', 'F3']} hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.F3]} style="margin-left: 20px" />
            </DropdownItem>
            <DropdownDivider />
            <DropdownTitle>分组2</DropdownTitle>
            <DropdownItem type="tertiary">
                {#snippet icon()}<IconRefresh />{/snippet}
                tertiary
            </DropdownItem>
            <DropdownItem type="warning">
                {#snippet icon()}<IconSearch />{/snippet}
                warning
            </DropdownItem>
            <DropdownItem type="danger">
                {#snippet icon()}<IconAlertCircle />{/snippet}
                danger
            </DropdownItem>
        </DropdownMenu>
    {/snippet}
</Dropdown>

Nested Usage

Users can nested Dropdown, which is suitable for situations with multiple sublevel options. The trigger of a parent item uses the child snippet, which spreads the props argument onto the DropdownItem. 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). 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 lang="ts">
    import { IconToken } from '@fibrae/semi-icons-svelte/lab';
    import { Button, Dropdown, DropdownItem, DropdownMenu, Toast } from '@fibrae/semi-ui-svelte';

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

<div style="margin: 100px">
    <Dropdown>
        <Button theme="outline" type="tertiary">
            {#snippet icon()}<IconToken />{/snippet}
            Hover Me
        </Button>
        {#snippet content()}
            <DropdownMenu>
                {#each submenus as submenu (submenu.label)}
                    <Dropdown position={submenu.position}>
                        {#snippet child({ props })}
                            <DropdownItem {...props}>{submenu.label}</DropdownItem>
                        {/snippet}
                        {#snippet content()}
                            <DropdownMenu>
                                <!-- Enter and Space trigger a submenu item's click too -->
                                {#each [1, 2, 3] as n (n)}
                                    <DropdownItem onclick={() => Toast.info(`点击了 Nested Menu Item ${n}`)}>Nested Menu Item {n}</DropdownItem>
                                {/each}
                            </DropdownMenu>
                        {/snippet}
                    </Dropdown>
                {/each}
                <DropdownItem>Menu Item 3</DropdownItem>
            </DropdownMenu>
        {/snippet}
    </Dropdown>
</div>

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

Bottom

bottomLeft

bottomRight

Code

<script lang="ts">
    import { Dropdown, DropdownItem, DropdownMenu, Tag } from '@fibrae/semi-ui-svelte';

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

<div>
    {#each positions as position, index (position)}
        {#if index > 0}
            <br />
            <br />
        {/if}
        <Dropdown {position}>
            <Tag>{position === 'bottom' ? 'Bottom' : position}</Tag>
            {#snippet content()}
                <DropdownMenu>
                    <DropdownItem>Menu Item 1</DropdownItem>
                    <DropdownItem>Menu Item 2</DropdownItem>
                    <DropdownItem>Menu Item 3</DropdownItem>
                </DropdownMenu>
            {/snippet}
        </Dropdown>
    {/each}
</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

<script lang="ts">
    import { Button, Dropdown, DropdownItem, DropdownMenu, Tag } from '@fibrae/semi-ui-svelte';
</script>

{#snippet menu(tabindex?: number)}
    <DropdownMenu {tabindex}>
        <DropdownItem>Menu Item 1</DropdownItem>
        <DropdownItem>Menu Item 2</DropdownItem>
        <DropdownItem>Menu Item 3</DropdownItem>
    </DropdownMenu>
{/snippet}

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

<script lang="ts">
    import { IconToken } from '@fibrae/semi-icons-svelte/lab';
    import { Button, Dropdown, DropdownItem, DropdownMenu, Toast } from '@fibrae/semi-ui-svelte';
</script>

<Dropdown position="bottomLeft" trigger="click">
    <Button theme="outline" type="tertiary">
        {#snippet icon()}<IconToken />{/snippet}
        Click Me
    </Button>
    {#snippet content()}
        <DropdownMenu>
            <DropdownItem onclick={() => Toast.info('You clicked me!')}>1: click me!</DropdownItem>
            <DropdownItem onmouseenter={() => Toast.info('Nice to meet you!')}>2: mouse enter</DropdownItem>
            <DropdownItem onmouseleave={() => Toast.info('See ya!')}>3: mouse leave</DropdownItem>
            <DropdownItem oncontextmenu={() => Toast.info('Right clicked!')}>4: right click</DropdownItem>
        </DropdownMenu>
    {/snippet}
</Dropdown>

Json Usage

Can use the menu attribute, given an array, to configure the Dropdown content menu. Listeners in an entry use lowercase native event names such as onclick and onmouseenter, and are handed to the matching DropdownItem. Use the menuIcon snippet, whose argument is { item, index }, to customize the icon of each entry. content wins when it is provided.

Code

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

    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>

<Dropdown {menu} position="bottomLeft" showTick trigger="click">
    <Button theme="outline" type="tertiary">
        {#snippet icon()}<IconToken />{/snippet}
        Click Me
    </Button>
</Dropdown>

API Reference

Props

Property	Description	Type	Default
afterClose	Called after the menu has closed and its leave animation has finished.	`Type`	-
afterOpen	Called 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 called for an open that is closed before the enter animation ends.	`Type`	-
aria-describedby	aria-describedby of the popup when its role is dialog.	`string`	-
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`	-
autoAdjustOverflow	Whether the popup flips automatically when it would be clipped.	`boolean`	-
child	Snippet that renders the trigger element itself. Its `{ props }` argument must be spread on a focusable element, with `class` merged into your own (`class={[props.class, 'own']}`); use it for a button, a link, or the DropdownItem that is the parent in a nested menu. It wins over children.	`Type`	-
children	The trigger, wrapped in a span that takes the trigger attributes and responds to the keyboard.	`Snippet`	-
class	Class name of the popup `.semi-dropdown-wrapper`.	`string`	-
clickToHide	Whether a click inside the popup closes it.	`boolean`	-
clickTriggerToHide	Whether a click on the trigger closes an open popup.	`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 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 calls onVisibleChange(false), and the popup closes once the caller writes back.	`boolean`	-
content	Menu content made of DropdownMenu with DropdownItem, DropdownTitle and DropdownDivider. Once provided, even empty, it takes precedence over menu.	`Snippet`	-
contentClassName	Class name of the dropdown menu root element `.semi-dropdown`.	`string`	-
disableFocusListener	Whether keyboard focus is ignored when trigger is hover.	`boolean`	-
guardFocus	Whether Tab cycles inside the popup while focus is in it.	`boolean`	-
keepDOM	Whether the popup content stays mounted while closed.	`boolean`	-
menu	Configures the menu from data, see DropdownMenuItem below. content wins when it is provided.	`DropDownMenuItem[]`	-
menuIcon	Icon of each item entry of menu, with `{ item, index }` as its argument. The icon container is always rendered and is empty when the snippet outputs nothing.	`Type`	-
motion	Whether the popup is animated.	`boolean`	`true`
mouseEnterDelay	Milliseconds before the menu shows after the pointer enters the trigger. 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; not less than mouseEnterDelay.	`number`	`100`
onClickOutSide	Called when the mouse is pressed outside of the trigger and the open popup. Only for trigger click, contextMenu or custom, or with clickTriggerToHide.	`Type`	-
onEscKeyDown	Called when Esc is pressed while the menu is open and closeOnEsc is true.	`Type`	-
onOpen	Called once per opening when the menu is shown, as its enter animation starts, before afterOpen, controlled or not; not called for a hover open withdrawn because the pointer already left.	`Type`	-
onVisibleChange	Called 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.	`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. A custom value drops the Dropdown styles.	`string`	`"semi-dropdown"`
preventScroll	Whether focusing an element avoids scrolling it into view.	`boolean`	-
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`	-
showTick	Whether an active DropdownItem 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.	`boolean`	-
style	Inline style string of the popup `.semi-dropdown-wrapper`.	`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. Bindable with `bind:visible` and used with trigger custom; when given, this value decides, and binding undefined returns to uncontrolled.	`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`	-

Methods

Method	Description	Type
focusTrigger	Focuses the trigger element. Takes effect only when returnFocusOnClose is true, trigger is not custom, and the trigger is not rendered by child.	`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, contentClassName on the menu container .semi-dropdown, and other undeclared attributes are dropped.

Props

Property	Description	Type	Default
children	Children of the menu, usually DropdownItem, DropdownTitle or DropdownDivider.	`Snippet`	-

class, style and native attributes land on the ul of the menu. role and aria-orientation can be overridden, and an onkeydown 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`
children	Content of the item.	`Snippet`	-
disabled	Whether the item is disabled.	`boolean`	`false`
icon	Icon of the item. The icon container is always rendered and is empty when the snippet outputs nothing.	`Snippet`	-
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.	`'primary' \| 'secondary' \| 'tertiary' \| 'warning' \| 'danger'`	-

Listen for click, pointer enter and leave, and right click with onclick, onmouseenter, onmouseleave and oncontextmenu; the parameter is the native MouseEvent. class, style and other native attributes land on the li. A disabled Item does not respond to these four listeners.

Props

Property	Description	Type	Default
children	Content of the group title.	`Snippet`	-

class, style and native attributes land on the li. The divider DropdownDivider has no props and also receives class, style and native attributes.

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 \| number`	-
active, disabled, showTick, type	Correspond to the props of DropdownItem of the same name, only on `item`	-	-
class, style, `data-`, `aria-`	Handed to the matching DropdownTitle, DropdownItem or DropdownDivider; `style` is a string	-	-
onclick, onmouseenter, onmouseleave, oncontextmenu	Listeners of DropdownItem under lowercase native event names, only on `item`	`(event: MouseEvent) => void`	-

Methods

Get the instance with bind:this and call focusTrigger() and rePosition(), see the Methods 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