@ug666/react 文档演示

NavigationMenu 顶部导航

NavigationMenu 适合站点顶部横向导航，支持直接链接与 hover 展开的下拉子菜单，当前激活项自动高亮。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
} from '@ug666/react'

基础水平菜单

首页 / 产品 / 价格 / 关于，当前激活首页。

含下拉子菜单

悬停「产品」触发下拉面板，展示多个产品分类链接。

当前激活态

通过 active prop 标记当前所在页面的导航项。

代码示例

将 NavigationMenu 放置在页面头部，搭配 Link 与 Trigger+Content 灵活组合。

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from '@ug666/react'

export function SiteNav() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuLink href="/" active>首页</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>产品</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/products/components">组件库</NavigationMenuLink>
          <NavigationMenuLink href="/products/templates">模板市场</NavigationMenuLink>
          <NavigationMenuLink href="/products/icons">图标集</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/pricing">价格</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/about">关于</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  )
}

Props 说明

属性	类型	默认值	说明
NavigationMenuLink.active	boolean	false	标记当前激活的导航链接，使用高亮背景。
NavigationMenuLink.href	string	—	导航链接地址。
NavigationMenuTrigger	ReactNode	—	带下拉箭头的触发按钮，hover 展开 Content。
NavigationMenuContent	ReactNode	—	下拉面板内容区，与 Trigger 同属一个 MenuItem。
className	string	—	各子组件均支持 className 扩展样式。