如何使用 shadcn/ui 制作下拉菜单

下拉菜单是小型弹出式菜单，可帮助您显示更多选项而不会使屏幕混乱。它们在网站和应用程序中非常有用。

在本指南中，您将学习如何使用 shadcn/ui 构建下拉菜单。这是一个与 Tailwind CSS 和 Radix UI 配合良好的工具，可帮助您制作外观漂亮、易于使用的菜单。

💡 先决条件

在开始之前，请确保您具备：

React 和 JavaScript 的基础知识
已安装 Node.js 和包管理器（如 npm、pnpm 或 yarn）
熟悉 Tailwind CSS 是加分项，但不是必需

我们将逐步讲解所有内容，所以如果您还不是专家，请不要担心。

什么是 shadcn/ui？

shadcn/ui 是一组工具（称为组件），可帮助您构建网站的各个部分，如按钮、模态框和下拉菜单。它使用 Radix UI 构建，并使用 Tailwind CSS 进行样式设置。如果您使用 React 或 Next.js，它是完美的选择。

使用 shadcn/ui，您不仅可以获得样式化组件，还可以完全控制所有功能的外观和工作方式。这使得它非常适合希望在设计中保持一致性而不放弃灵活性的团队。

为什么使用 shadcn/ui 制作下拉菜单？

下拉菜单是 shadcn/ui 的一个很好的用例，因为：

易于与键盘和屏幕阅读器一起使用
您可以使用 Tailwind CSS 创建自定义外观
您可以控制其工作方式和外观
它在真实网站和应用程序中运行良好
它与现代 React 工作流程很好地集成

逐步构建下拉菜单

步骤 1：使用 shadcn/ui 启动新项目

您无需手动设置 React、Next.js 或 Tailwind。只需运行以下命令：

1

pnpm dlx shadcn@latest init

这将自动创建一个新的 Next.js 应用程序，并预配置 Tailwind CSS 和 shadcn/ui。

提示：如果您愿意，也可以使用 npx 代替 pnpm dlx：

1

npx shadcn@latest init

步骤 2：添加下拉菜单组件

项目准备就绪后，使用以下命令添加下拉组件：

1

npx shadcn@latest add dropdown-menu

这将引入创建下拉菜单所需的所有必要组件。

步骤 3：导入所需内容

在您的 React 文件中，导入完整的下拉模块以便访问其所有功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"

步骤 4：构建简单下拉菜单

这是一个基本的下拉菜单示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


export function ProfileMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="px-4 py-2 bg-primary text-white rounded">
          打开菜单
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>我的账户</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>个人资料</DropdownMenuItem>
        <DropdownMenuItem>设置</DropdownMenuItem>
        <DropdownMenuItem>退出登录</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

这只是一个开始。您可以为高级用户添加组、子菜单和键盘快捷键。

步骤 5：使其外观更好

使用 Tailwind CSS 为下拉菜单设置样式，并添加悬停效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <button className="px-3 py-1.5 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary/90 transition-colors">
      打开菜单
    </button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-52 border-gray-200 shadow-lg rounded-md space-y-0.5">
    <DropdownMenuLabel className="text-xs text-gray-500">
      我的账户
    </DropdownMenuLabel>
    <DropdownMenuSeparator className="border-t border-gray-100" />
    <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
      个人资料
    </DropdownMenuItem>
    <DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
      设置
    </DropdownMenuItem>
    <DropdownMenuItem className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md cursor-pointer transition-colors">
      退出登录
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

步骤 6：使其在所有屏幕上工作

希望您的下拉菜单具有响应性？使用 Tailwind 的响应式类：

1

<DropdownMenuContent className="w-full md:w-64">

您还可以使用 Radix 的内置门户支持动态定位下拉菜单。

步骤 7：添加酷炫图标

安装 Lucide 图标：

1

npm install lucide-react

然后在菜单中使用它们：

1
2
3
4
5


import { User, Settings, LogOut } from "lucide-react"

<DropdownMenuItem>
  <User className="mr-2 h-4 w-4" /> 个人资料
</DropdownMenuItem>

图标帮助用户快速扫描选项 - 这是用户体验的一个很好的点缀。

步骤 8：它已经具备无障碍访问性！

shadcn/ui（感谢 Radix UI）使您的下拉菜单：

键盘友好
屏幕阅读器就绪
遵循最佳网络实践

您无需配置无障碍访问性 - 它直接就能工作 :)

实际用例：带国旗的国家下拉菜单

寻找更高级的下拉菜单？这是一个包含搜索、国旗图标和分组的惊人示例：

👉 shadcn-country-dropdown.vercel.app

它是开源的，是了解 shadcn/ui 可能性的好地方。

最终思考

使用 shadcn/ui 创建下拉菜单快速、简单且功能强大。您可以获得出色的样式、无障碍访问性以及对外观和工作方式的完全控制。无论您是刚刚开始还是为生产环境构建，这都是一个可靠的工具。

下拉菜单只是一个开始。shadcn/ui 提供了整个无头组件库，用于构建现代用户界面。

使用 shadcn/ui 构建现代化下拉菜单的完整指南

本文详细介绍了如何使用shadcn/ui库结合Tailwind CSS和Radix UI构建功能强大、样式美观且具备无障碍访问性的下拉菜单组件，包含完整的代码示例和实战步骤。