Dropdown Menu 下拉菜单

新粗野主义风格的下拉菜单，基于 reka-ui 的 DropdownMenu 原语构建，支持菜单项、复选框、单选组、子菜单和快捷键。

预览

Preview

安装

pnpm dlx brutx-vue@latest add dropdown-menu

用法

基础用法

vue

<script setup>
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuLabel,
    DropdownMenuShortcut,
} from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'
</script>

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="outline">Open Menu</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
                Profile
                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuItem>
                Settings
                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Log out</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</template>

复选框项

使用 v-model 绑定复选框状态，支持 boolean 和 'indeterminate' 两种值。

vue

<script setup>
import { ref } from 'vue'
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuCheckboxItem,
} from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'

const showStatusBar = ref(true)
const showActivityBar = ref(false)
</script>

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="outline">View</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuCheckboxItem v-model="showStatusBar">
                Status Bar
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem v-model="showActivityBar">
                Activity Bar
            </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
    </DropdownMenu>
</template>

单选项

vue

<script setup>
import { ref } from 'vue'
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuRadioItem,
    DropdownMenuRadioGroup,
} from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'

const position = ref('bottom')
</script>

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="outline">Position</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuRadioGroup v-model="position">
                <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
        </DropdownMenuContent>
    </DropdownMenu>
</template>

子菜单

vue

<script setup>
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSub,
    DropdownMenuSubTrigger,
    DropdownMenuSubContent,
} from 'brutx-ui-vue'
import { Button } from 'brutx-ui-vue'
</script>

<template>
    <DropdownMenu>
        <DropdownMenuTrigger as-child>
            <Button variant="outline">Open Menu</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuItem>New Tab</DropdownMenuItem>
            <DropdownMenuSub>
                <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                    <DropdownMenuItem>Save Page</DropdownMenuItem>
                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>
                </DropdownMenuSubContent>
            </DropdownMenuSub>
        </DropdownMenuContent>
    </DropdownMenu>
</template>

子组件

组件	说明
`DropdownMenu`	根组件，reka-ui DropdownMenuRoot 的重新导出
`DropdownMenuTrigger`	打开菜单的按钮，reka-ui 重新导出
`DropdownMenuContent`	下拉内容面板
`DropdownMenuItem`	标准菜单项
`DropdownMenuCheckboxItem`	复选框菜单项
`DropdownMenuRadioItem`	单选菜单项
`DropdownMenuRadioGroup`	单选项分组，reka-ui 重新导出
`DropdownMenuLabel`	区域标签
`DropdownMenuSeparator`	视觉分隔线
`DropdownMenuShortcut`	键盘快捷键提示
`DropdownMenuSub`	子菜单容器，reka-ui 重新导出
`DropdownMenuSubTrigger`	子菜单触发器
`DropdownMenuSubContent`	子菜单内容
`DropdownMenuGroup`	菜单项分组，reka-ui 重新导出

API 参考

DropdownMenuContent

DropdownMenuContent — 属性
名称	类型	默认值	说明
`sideOffset`	`number \| undefined`	`6`	设置内容面板与触发器之间的像素间距。
详情声明类型 number \| undefined 默认值详情声明 `floatingContentSideOffsets.dropdownMenu` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue 解析值 `6` 来源 DropdownMenuContent.vue:14 packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
`align`	`"center" \| "start" \| "end" \| undefined`	`undefined`	设置内容面板相对触发器的水平对齐方式。
详情声明类型 "center" \| "start" \| "end" \| undefined 字面量 `"center"` `"end"` `"start"` 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue 解析值 `undefined` 来源 DropdownMenuContent.vue:16 packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
`to`	`string \| HTMLElement \| undefined`	`undefined`	设置弹出面板传送到的目标选择器或元素；未设置时挂载到 body。
详情声明类型 string \| HTMLElement \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue 解析值 `undefined` 来源 DropdownMenuContent.vue:18 packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
`class`	`string \| undefined`	`undefined`	追加到下拉菜单内容面板的 CSS 类。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue 解析值 `undefined` 来源 DropdownMenuContent.vue:19 packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue

DropdownMenuContent — 插槽
名称	签名或类型	说明
`#default`	`{}`	菜单项、标签、分隔线或子菜单等菜单内容。
详情声明类型 {} 来源 DropdownMenuContent.vue packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue

DropdownMenuCheckboxItem

DropdownMenuCheckboxItem — 属性
名称	类型	默认值	说明
`modelValue`	`boolean \| "indeterminate" \| undefined`	`undefined`	复选框项的受控选中状态，支持 indeterminate；使用 update:modelValue 事件同步。
详情声明类型 boolean \| "indeterminate" \| undefined 字面量 `"indeterminate"` `false` `true` 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue 解析值 `undefined` 来源 DropdownMenuCheckboxItem.vue:13 packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
`defaultChecked`	`boolean \| "indeterminate" \| undefined`	`false`	未传入 modelValue 时使用的初始选中状态。
详情声明类型 boolean \| "indeterminate" \| undefined 字面量 `"indeterminate"` `false` `true` 默认值详情声明 `false` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue 解析值 `false` 来源 DropdownMenuCheckboxItem.vue:15 packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
`class`	`string \| undefined`	`undefined`	追加到复选框菜单项根元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue 解析值 `undefined` 来源 DropdownMenuCheckboxItem.vue:16 packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
`iconSize`	`IconSize \| undefined`	`"md"`	设置选中指示图标的尺寸。
详情声明类型 IconSize \| undefined 字面量 `"2xl"` `"lg"` `"md"` `"sm"` `"xl"` `"xs"` 关联类型 IconSize 类型定义 — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情声明 `'md'` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue 解析值 `"md"` 来源 DropdownMenuCheckboxItem.vue:17 packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue

DropdownMenuCheckboxItem — 事件
名称	签名或类型	说明
`@update:modelValue`	`[value: boolean \| "indeterminate"]`	复选框状态变化时发出新状态，可能为 true、false 或 indeterminate。
详情声明类型 [value: boolean \| "indeterminate"] 字面量 `"indeterminate"` `false` `true` 来源 DropdownMenuCheckboxItem.vue packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue

DropdownMenuCheckboxItem — 插槽
名称	签名或类型	说明
`#default`	`{}`	复选框菜单项的文字和其他内容。
详情声明类型 {} 来源 DropdownMenuCheckboxItem.vue packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue

DropdownMenuItem

DropdownMenuItem — 属性
名称	类型	默认值	说明
`inset`	`boolean \| undefined`	`false`	为菜单项增加缩进，使其与带图标或子菜单触发项对齐。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情声明 `false` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue 解析值 `false` 来源 DropdownMenuItem.vue:8 packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
`disabled`	`boolean \| undefined`	`false`	阻止用户选择此菜单项。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情声明 `false` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue 解析值 `false` 来源 DropdownMenuItem.vue:10 packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
`textValue`	`string \| undefined`	`undefined`	设置用于键盘类型搜索的文本值；适用于项内容无法直接推断文字时。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue 解析值 `undefined` 来源 DropdownMenuItem.vue:11 packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
`closeOnSelect`	`boolean \| undefined`	`undefined`	控制选择该项后是否关闭菜单。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue 解析值 `undefined` 来源 DropdownMenuItem.vue:13 packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
`class`	`string \| undefined`	`undefined`	追加到菜单项根元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue 解析值 `undefined` 来源 DropdownMenuItem.vue:14 packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue

DropdownMenuItem — 插槽
名称	签名或类型	说明
`#default`	`{}`	菜单项的标签及其可选图标或快捷键说明。
详情声明类型 {} 来源 DropdownMenuItem.vue packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue

DropdownMenuLabel

DropdownMenuLabel — 属性
名称	类型	默认值	说明
`inset`	`boolean \| undefined`	`—`	为菜单标签增加缩进，使其与菜单项内容对齐。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情未声明默认值 `—` 来源 DropdownMenuLabel.vue:7 packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
`class`	`string \| undefined`	`—`	追加到菜单标签元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情未声明默认值 `—` 来源 DropdownMenuLabel.vue:8 packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue

DropdownMenuLabel — 插槽
名称	签名或类型	说明
`#default`	`{}`	菜单分组或菜单内容的标题。
详情声明类型 {} 来源 DropdownMenuLabel.vue packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue

DropdownMenuRadioItem

DropdownMenuRadioItem — 属性
名称	类型	默认值	说明
`value` 必填	`string`	`—`	此单选项在 RadioGroup 中对应的字符串值。
详情声明类型 string 默认值详情未声明默认值 `—` 来源 DropdownMenuRadioItem.vue:12 packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
`class`	`string \| undefined`	`—`	追加到单选菜单项根元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情未声明默认值 `—` 来源 DropdownMenuRadioItem.vue:13 packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue

DropdownMenuRadioItem — 插槽
名称	签名或类型	说明
`#default`	`{}`	单选菜单项的标签和可选内容。
详情声明类型 {} 来源 DropdownMenuRadioItem.vue packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue

DropdownMenuSeparator

DropdownMenuSeparator — 属性
名称	类型	默认值	说明
`class`	`string \| undefined`	`—`	追加到菜单分隔线元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情未声明默认值 `—` 来源 DropdownMenuSeparator.vue:7 packages/ui/src/components/dropdown-menu/DropdownMenuSeparator.vue

DropdownMenuShortcut

DropdownMenuShortcut — 属性
名称	类型	默认值	说明
`class`	`string \| undefined`	`—`	追加到快捷键说明元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情未声明默认值 `—` 来源 DropdownMenuShortcut.vue:6 packages/ui/src/components/dropdown-menu/DropdownMenuShortcut.vue

DropdownMenuShortcut — 插槽
名称	签名或类型	说明
`#default`	`{}`	显示的快捷键文本或符号。
详情声明类型 {} 来源 DropdownMenuShortcut.vue packages/ui/src/components/dropdown-menu/DropdownMenuShortcut.vue

DropdownMenuSubContent

DropdownMenuSubContent — 属性
名称	类型	默认值	说明
`sideOffset`	`number \| undefined`	`6`	设置子菜单面板与触发器之间的像素间距。
详情声明类型 number \| undefined 默认值详情声明 `floatingContentSideOffsets.dropdownMenu` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue 解析值 `6` 来源 DropdownMenuSubContent.vue:10 packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue
`class`	`string \| undefined`	`undefined`	追加到子菜单内容面板的 CSS 类。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue 解析值 `undefined` 来源 DropdownMenuSubContent.vue:11 packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue

DropdownMenuSubContent — 插槽
名称	签名或类型	说明
`#default`	`{}`	子菜单中的菜单项及其分组内容。
详情声明类型 {} 来源 DropdownMenuSubContent.vue packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue

DropdownMenuSubTrigger

DropdownMenuSubTrigger — 属性
名称	类型	默认值	说明
`inset`	`boolean \| undefined`	`false`	为子菜单触发项增加缩进，使其与同级菜单项对齐。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情声明 `false` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue 解析值 `false` 来源 DropdownMenuSubTrigger.vue:10 packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
`disabled`	`boolean \| undefined`	`false`	阻止打开此子菜单。
详情声明类型 boolean \| undefined 字面量 `false` `true` 默认值详情声明 `false` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue 解析值 `false` 来源 DropdownMenuSubTrigger.vue:11 packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
`class`	`string \| undefined`	`undefined`	追加到子菜单触发项根元素的 CSS 类。
详情声明类型 string \| undefined 默认值详情声明 `undefined` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue 解析值 `undefined` 来源 DropdownMenuSubTrigger.vue:12 packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
`iconSize`	`IconSize \| undefined`	`"md"`	设置表示子菜单展开方向的图标尺寸。
详情声明类型 IconSize \| undefined 字面量 `"2xl"` `"lg"` `"md"` `"sm"` `"xl"` `"xs"` 关联类型 IconSize 类型定义 — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情声明 `'md'` 来源: packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue 解析值 `"md"` 来源 DropdownMenuSubTrigger.vue:13 packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue

DropdownMenuSubTrigger — 插槽
名称	签名或类型	说明
`#default`	`{}`	子菜单触发项显示的标签内容。
详情声明类型 {} 来源 DropdownMenuSubTrigger.vue packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue

可访问性

键盘操作：支持 Space / Enter 打开菜单，Escape 关闭菜单，方向键导航菜单项
ARIA 属性：自动管理 aria-expanded、aria-haspopup、role="menu" 等无障碍属性
焦点管理：打开时焦点锁定在菜单内，关闭时恢复焦点到触发器
子菜单导航：支持通过方向键展开和导航子菜单

Dropdown Menu 下拉菜单 ​

预览 ​

安装 ​

用法 ​

基础用法 ​

复选框项 ​

单选项 ​

子菜单 ​

子组件 ​

API 参考 ​

DropdownMenuContent

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

来源

DropdownMenuCheckboxItem

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

来源

声明类型

来源

DropdownMenuItem

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

来源

DropdownMenuLabel

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

来源

DropdownMenuRadioItem

声明类型

默认值详情

来源

声明类型

默认值详情

来源

声明类型

来源

DropdownMenuSeparator

声明类型

Dropdown Menu 下拉菜单

预览

安装

用法

基础用法

复选框项

单选项

子菜单

子组件

API 参考

可访问性