NavigationMenu

NavigationMenu 用于构建横向导航菜单。组件基于 Radix Navigation Menu 封装，既支持通过 items 数据快速渲染链接和下拉内容，也支持使用结构组件手动组合复杂导航。

import {
  NavigationMenu,
  NavigationMenuChildLink,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport
} from '@skyroc/web-ui';

架构说明

NavigationMenu 提供两层使用方式：

• NavigationMenu：数据驱动入口，接收 items 后自动渲染顶层链接、带子菜单的触发器、子链接列表、指示器和视口。
• 结构组件：NavigationMenuRoot、NavigationMenuList、NavigationMenuItem、NavigationMenuTrigger、NavigationMenuContent、NavigationMenuLink 等，适合需要完全控制 DOM 结构时使用。

主组件会把 size 传递给列表、触发器、链接、子列表、指示器和视口，使导航整体保持统一尺寸。classNames 用于按 slot 覆盖样式，例如 list、trigger、subLink、viewport。

何时使用

• 页面顶部需要展示站点级导航或产品导航。
• 顶层导航包含链接和可展开的二级链接面板。
• 需要键盘可访问、带 active 指示器和 viewport 动画的导航菜单。
• 简单面包屑路径优先使用 Breadcrumb；应用菜单栏和命令菜单优先使用 Menubar 或 DropdownMenu。

基础用法

通过 items 描述顶层导航。带 children 的项会渲染为触发器和下拉内容；没有 children 或 type: 'link' 的项会渲染为直接跳转链接。

导航项类型

items 支持两类顶层导航项：

<NavigationMenu
  items={[
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          label: 'Introduction',
          href: '/docs',
          description: 'Start with the core concepts.'
        }
      ]
    },
    {
      type: 'link',
      label: 'GitHub',
      href: 'https://github.com'
    }
  ]}
/>

自定义链接组件

顶层链接和子链接都支持 component，可传入路由组件，例如 Next.js Link。组件会通过 Radix asChild 组合到底层链接上。

<NavigationMenu
  items={[
    {
      label: 'Components',
      children: [
        {
          label: 'Button',
          component: Link,
          href: '/components/button',
          description: 'Trigger actions and submit forms.'
        }
      ]
    }
  ]}
/>

插槽与样式

通过 leading 和 trailing 为触发器或链接加入前后内容。没有传入 trailing 时，顶层链接默认展示外链箭头，带子菜单的触发器默认展示向下箭头。

classNames 可精确覆盖内部 slot：

<NavigationMenu
  classNames={{
    trigger: 'px-3',
    subLink: 'w-80',
    viewport: 'shadow-xl'
  }}
  items={items}
/>

API

NavigationMenu

通用属性参考：基于 Radix Navigation Menu Root，并使用 items 渲染数据驱动导航。

顶层导航项

NavigationMenuItemOption 描述 items 中的每个顶层导航项。

结构组件

NavigationMenu 同时导出 Radix 风格结构组件，适合手动组织导航结构。

类型