第三章：基础组件

导航菜单组件

概述

导航菜单是Web应用中不可或缺的组件，用于在不同页面或功能模块之间进行导航。Shadcn提供了一套灵活且易于定制的导航菜单组件，帮助开发者快速构建现代化的导航系统。

基本用法

  1. 安装依赖
    确保已安装Shadcn的核心库和导航菜单组件：

    npm install @shadcn/ui @shadcn/navigation

  2. 基础导航菜单
    使用NavigationMenu组件构建水平导航：

    import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@shadcn/navigation';

function App() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuLink href="/">首页</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/about">关于</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

高级功能

  1. 下拉菜单集成
    结合第四章的下拉菜单组件实现二级导航：

    import { DropdownMenu } from '@shadcn/dropdown';

<NavigationMenuItem>
  <DropdownMenu trigger="产品">
    <DropdownMenuLink href="/product/web">Web产品</DropdownMenuLink>
    <DropdownMenuLink href="/product/mobile">移动端产品</DropdownMenuLink>
  </DropdownMenu>
</NavigationMenuItem>

  2. 响应式设计
    通过Tailwind CSS实现移动端折叠菜单：

    <NavigationMenu className="hidden md:flex">
  {/* 桌面端菜单项 */}
</NavigationMenu>
<button className="md:hidden">移动菜单按钮</button>

定制化选项

  1. 样式定制
    使用CSS变量修改导航样式：

    :root {
  --navigation-bg: #1e293b;
  --navigation-text: #f8fafc;
}

  2. 状态管理
    通过active属性标记当前选中项：

    <NavigationMenuLink 
  href="/dashboard" 
  active={currentPath === '/dashboard'}
>
  控制台
</NavigationMenuLink>

最佳实践

  • 保持导航层级不超过三级
  • 为每个菜单项添加有意义的ARIA标签
  • 在移动端优先考虑汉堡菜单模式

常见问题

Q：如何实现面包屑导航？
A：Shadcn暂未提供内置面包屑组件，但可通过组合NavigationMenu和自定义逻辑实现：

<NavigationMenu>
  <NavigationMenuItem>
    <span className="text-gray-500">当前位置：</span>
  </NavigationMenuItem>
  {breadcrumbs.map((crumb) => (
    <NavigationMenuItem key={crumb.path}>
      <NavigationMenuLink href={crumb.path}>
        {crumb.label}
      </NavigationMenuLink>
    </NavigationMenuItem>
  ))}
</NavigationMenu>

提示：导航菜单的可访问性可通过aria-current="page"等属性增强，建议结合WAI-ARIA规范使用。

Last Updated::