shadcn-vue Dropdown Menu 组件完整指南：安装、API 与实战示例

UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载本指南围绕 shadcn-vue 中的 Dropdown Menu下拉菜单组件展开它是通过按钮等触发器向用户展示一组操作或功能的菜单组件。文章以官方文档dropdown-menu.md为骨架结合当前仓库apps/v4中基于 Reka UI 的实现源码与全部示例帮助你在 Vue 3 TypeScript 项目中完成组件的安装、基础使用以及 Checkbox、Radio Group、子菜单、快捷键、禁用态等完整场景的落地。组件概述Dropdown Menu 用于在按钮触发下向用户展示一个菜单菜单内通常包含一组动作或功能项。它是 shadcn-vue 组件库中交互最频繁、组合最灵活的组件之一广泛用于用户头像菜单、表格行操作、工具栏下拉、筛选条件选择等场景。该组件的实现以Reka UIshadcn-vue 的底层无头组件库为基础当前仓库在apps/v4/registry/bases/reka/ui/dropdown-menu/下提供了完整封装共包含 14 个组合部件部件说明DropdownMenu根容器管理打开状态与上下文DropdownMenuTrigger触发器点击后展开菜单DropdownMenuContent弹出的菜单内容面板DropdownMenuItem单个菜单项DropdownMenuCheckboxItem带复选框的菜单项DropdownMenuRadioGroup单选组容器DropdownMenuRadioItem单选菜单项DropdownMenuLabel分组标签DropdownMenuSeparator分隔线DropdownMenuGroup菜单项分组DropdownMenuShortcut快捷键提示文本DropdownMenuSub子菜单根容器DropdownMenuSubTrigger子菜单触发器DropdownMenuSubContent子菜单面板此外在用法中还会配合 Reka UI 提供的DropdownMenuPortal将内容渲染到 body使用。仓库同时维护了new-york-v4风格的同名组件集见 apps/v4/registry/new-york-v4/ui/dropdown-menu两套实现 API 一致可按项目风格选择。安装在项目根目录执行 shadcn-vue CLI 命令即可将 dropdown-menu 组件添加到项目中npx shadcn-vuelatest add dropdown-menu命令会在项目中生成components/ui/dropdown-menu/目录及上述全部部件文件。需要说明的是安装生成的代码结构与本仓库 apps/v4/registry/bases/reka/ui/dropdown-menu 下的实现一致均直接依赖reka-ui与vueuse/core。基础用法官方文档给出的最小可用示例——一个包含标签、分隔线与若干菜单项的账户菜单script setup langts import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from /components/ui/dropdown-menu /script template DropdownMenu DropdownMenuTriggerOpen/DropdownMenuTrigger DropdownMenuContent DropdownMenuLabelMy Account/DropdownMenuLabel DropdownMenuSeparator / DropdownMenuItemProfile/DropdownMenuItem DropdownMenuItemBilling/DropdownMenuItem DropdownMenuItemTeam/DropdownMenuItem DropdownMenuItemSubscription/DropdownMenuItem /DropdownMenuContent /DropdownMenu /template其中/components/ui/dropdown-menu是 CLI 安装后组件的默认导入路径。若需把按钮作为触发器可给DropdownMenuTrigger传as-child如:as-childtrue并嵌套Button实现点击按钮弹出菜单的常见形态——仓库中的演示组件 DropdownMenuDemo.vue 正是这样组合使用的。默认外观与对齐参数从 DropdownMenuContent.vue 的源码可以看到两个内置默认值const props withDefaults( definePropsDropdownMenuContentProps { class?: HTMLAttributes[class] }(), { align: start, // 与触发器左对齐 sideOffset: 4, // 距触发器 4px }, )即菜单面板默认左对齐、与触发器保持 4px 间距这些属性均可按需覆盖例如对齐到触发器末端使用alignend。面板样式通过cn()合并 Tailwind 类实现cn 工具其中使用--reka-dropdown-menu-content-available-height、--reka-dropdown-menu-trigger-width、--reka-dropdown-menu-content-transform-origin等 CSS 变量来控制高度、宽度与变换原点并借助data-[stateclosed]状态选择器在关闭时隐藏溢出内容。核心部件实现解析以 DropdownMenu.vue 为代表的封装遵循统一的薄封装模式通过defineProps/defineEmits透传 Reka UI 的 props 与事件再用useForwardPropsEmits或useForwardProps转发给底层组件script setup langts import type { DropdownMenuRootEmits, DropdownMenuRootProps } from reka-ui import { DropdownMenuRoot, useForwardPropsEmits } from reka-ui const props definePropsDropdownMenuRootProps() const emits defineEmitsDropdownMenuRootEmits() const forwarded useForwardPropsEmits(props, emits) /script template DropdownMenuRoot v-slotslotProps>script setup langts import { ref } from vue import { Button } from /components/ui/button import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger, } from /components/ui/dropdown-menu const showStatusBar ref(true) const showActivityBar ref(false) const showPanel ref(false) /script template DropdownMenu DropdownMenuTrigger :as-childtrue Button variantoutlineCheckboxes/Button /DropdownMenuTrigger DropdownMenuContent classmin-w-40 DropdownMenuGroup DropdownMenuLabelAppearance/DropdownMenuLabel DropdownMenuCheckboxItem v-model:checkedshowStatusBar Status Bar /DropdownMenuCheckboxItem DropdownMenuCheckboxItem v-model:checkedshowActivityBar disabled Activity Bar /DropdownMenuCheckboxItem DropdownMenuCheckboxItem v-model:checkedshowPanel Panel /DropdownMenuCheckboxItem /DropdownMenuGroup /DropdownMenuContent /DropdownMenu /template要点DropdownMenuCheckboxItem通过v-model:checked双向绑定布尔值天然适合开关类偏好设置传入disabled即可禁用该项如上面示例中的 Activity Bar从 DropdownMenuCheckboxItem.vue 源码可见勾选指示图标由DropdownMenuItemIndicator包裹默认渲染为多图标库占位组件IconPlaceholder同时声明了 lucide、tabler、hugeicons、phosphor、remixicon 五套图标名也支持通过indicator-icon插槽替换为自定义图标。示例二Radio Group 菜单项当需要在若干互斥选项中单选时使用DropdownMenuRadioGroupDropdownMenuRadioItem。以下代码取自仓库示例 DropdownMenuWithRadio.vuescript setup langts import { ref } from vue import { Button } from /components/ui/button import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from /components/ui/dropdown-menu const position ref(bottom) /script template DropdownMenu DropdownMenuTrigger :as-childtrue Button variantoutlineRadio Group/Button /DropdownMenuTrigger DropdownMenuContent DropdownMenuGroup DropdownMenuLabelPanel Position/DropdownMenuLabel DropdownMenuRadioGroup v-modelposition DropdownMenuRadioItem valuetopTop/DropdownMenuRadioItem DropdownMenuRadioItem valuebottomBottom/DropdownMenuRadioItem DropdownMenuRadioItem valueright disabledRight/DropdownMenuRadioItem /DropdownMenuRadioGroup /DropdownMenuGroup /DropdownMenuContent /DropdownMenu /template要点DropdownMenuRadioGroup通过v-model绑定当前选中值DropdownMenuRadioItem的value即为可选项取值选中项会由DropdownMenuItemIndicator渲染指示图标与 Checkbox 共用一个 indicator 插槽机制见 DropdownMenuRadioItem.vue单选组非常适合菜单内切换视图/排序方式等场景。更多实战形态来自仓库示例仓库在 apps/v4/registry/bases/reka/examples/dropdown-menu 目录下提供了十余个可直接借鉴的完整示例覆盖常见进阶需求子菜单SubmenuDropdownMenuWithSubmenu.vue 演示DropdownMenuSubDropdownMenuSubTriggerDropdownMenuSubContent的嵌套菜单。从 DropdownMenuSubTrigger.vue 源码可见触发器右侧默认渲染右箭头图标ChevronRightIcon等并带有cn-rtl-flip类以适配 RTL 布局时自动镜像DropdownMenuSubContent.vue 通过--reka-dropdown-menu-content-available-width限制最大宽度并处理溢出。快捷键提示配合DropdownMenuShortcut展示⇧⌘P、⌘B等按键提示文本见 DropdownMenuShortcut.vue本质是一个带dropdown-menu-shortcut标识的span。带图标菜单项DropdownMenuWithIcons.vue、DropdownMenuWithCheckboxesIcons.vue 等展示了在菜单项内嵌图标排版。危险操作项给DropdownMenuItem传variantdestructive获得强调危险语义的样式DropdownMenuWithDestructive.vue。头像菜单DropdownMenuWithAvatar.vue 展示头像 用户信息 操作项的典型账户菜单布局。对话框内使用DropdownMenuInDialog.vue 说明菜单嵌套在 Dialog 中的写法。综合示例DropdownMenuDemo.vue 组合了标签、分组、子菜单、快捷键、禁用项与分隔线是最接近真实业务的完整范式。无障碍与键盘交互由于底层使用 Reka UI 的无头组件实现Dropdown Menu 继承了完整的 WAI-ARIA 语义与键盘支持此类行为由底层库保证可在 Reka UI 的 dropdown-menu 文档中核对细节。结合仓库封装的data-slot与data-disabled属性建议在使用时注意菜单项通过disabled禁用后会自动移除指针事件并降低透明度无需手动处理焦点子菜单触发器内建右箭头指示图标视觉与键盘导航语义一致根组件DropdownMenu的插槽会透出 Reka UI 的上下文属性如打开状态可用于自定义触发器外观或打开时高亮等状态样式。小结shadcn-vue 的 Dropdown Menu 以薄封装 Reka UI Tailwind 样式的方式交付安装一条命令、组合 14 个部件即可覆盖从基础菜单到多选、单选、子菜单、快捷键、危险操作等全部常见交互。官方文档dropdown-menu.md提供了安装命令、基础用法与 Checkbox / Radio Group 两个核心示例仓库中的 ui/dropdown-menu 源码展示了 props 透传、reactiveOmit自定义属性剥离、data-slot标识与多图标库占位等工程化细节而 examples/dropdown-menu 目录则为不同业务形态提供了可直接复用的模板。赞分享UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载相关推荐shadcn-vue Context Menu 组件完整指南从安装到源码级解析shadcn vue Context Menu 组件完整指南从安装到源码级解析 本文围绕 shadcn vueVue 版 shadcn ui中的 ContUI组件前端Haystack 实验性 LLMSummarizer 组件详解基于 LLM 的分块摘要与参数调优指南Haystack 实验性 LLMSummarizer 组件详解基于 LLM 的分块摘要与参数调优指南 Haystack 提供了一套实验性组件 haystackUI组件前端Neon 跨团队 CPU 与内存性能剖析基于 pprof 的统一 Profile 方案Rust / Go / CNeon 跨团队 CPU 与内存性能剖析基于 pprof 的统一 Profile 方案Rust / Go / C 本文基于 Neon 仓库中的设计文档 dUI组件前端上一篇10分钟掌握C STL代码生成微软官方库实战指南下一篇History.js与TypeScript类型定义与类型安全创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考