第四章：高级组件

4.3 下拉菜单

概述

下拉菜单（Dropdown）是Web应用中常见的交互组件，用于在有限空间内展示多个操作选项。Shadcn的下拉菜单组件基于Radix UI构建，提供无障碍支持、键盘导航和高度可定制性。

核心特性

  1. 无障碍设计
    • 符合WAI-ARIA标准
    • 支持键盘操作（↑/↓键导航，Enter键确认）
  2. 动画效果
    • 内置平滑展开/收起动画
    • 支持自定义过渡效果
  3. 灵活定位
    • 自动检测视窗边界
    • 支持top/bottom/left/right等12种定位方式

基础用法

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";

export function BasicDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="p-2 border rounded-md">Actions</button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Delete</DropdownMenuItem>
        <DropdownMenuItem disabled>Share</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

进阶功能

1. 带图标的菜单项

<DropdownMenuItem>
  <FileEdit className="mr-2 h-4 w-4" />
  <span>Edit Document</span>
</DropdownMenuItem>

2. 分组菜单

<DropdownMenuGroup>
  <DropdownMenuLabel>Actions</DropdownMenuLabel>
  <DropdownMenuItem>Save</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuLabel>Danger Zone</DropdownMenuLabel>
  <DropdownMenuItem className="text-red-600">Delete</DropdownMenuItem>
</DropdownMenuGroup>

3. 受控状态管理

const [open, setOpen] = useState(false);

<DropdownMenu open={open} onOpenChange={setOpen}>
  {/* ... */}
</DropdownMenu>

样式定制

通过Tailwind CSS或CSS变量自定义样式：

<DropdownMenuContent className="min-w-[200px] bg-popover shadow-lg rounded-lg">
  <DropdownMenuItem className="hover:bg-accent/50">
    {/* ... */}
  </DropdownMenuItem>
</DropdownMenuContent>

最佳实践

  1. 移动端适配
    • 添加触摸事件支持
    • 确保点击区域不小于48×48px
  2. 性能优化
    • 动态加载菜单内容（对于大型菜单）
    • 使用React.memo优化子组件
  3. 可访问性
    • 始终提供文本标签
    • 支持ESC键关闭菜单

常见问题解决

Q: 菜单在滚动容器中定位不准？
A: 使用DropdownMenuPortal包裹Content组件：

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuPortal>
    <DropdownMenuContent>
      {/* ... */}
    </DropdownMenuContent>
  </DropdownMenuPortal>
</DropdownMenu>

Q: 如何实现多级嵌套菜单？
A: 组合使用DropdownMenuSub相关组件：

<DropdownMenuSub>
  <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
  <DropdownMenuPortal>
    <DropdownMenuSubContent>
      <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuPortal>
</DropdownMenuSub>

扩展阅读

Last Updated::