React 组件

UGNavigationMenu 顶部导航

UGNavigationMenu 适合站点顶部横向导航，支持直接链接与可键盘操作的下拉子菜单，当前激活项自动高亮。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import {
  UGNavigationMenu,
  UGNavigationMenuItem,
  UGNavigationMenuLink,
  UGNavigationMenuTrigger,
  UGNavigationMenuContent,
} from '@ug666/ui-react'

基础水平菜单

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

含下拉子菜单

悬停、点击「产品」或使用方向键展开纵向面板，长标题也会保持稳定间距。

当前激活态

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

代码示例

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

tsx

import {
  UGNavigationMenu,
  UGNavigationMenuContent,
  UGNavigationMenuItem,
  UGNavigationMenuLink,
  UGNavigationMenuTrigger,
} from '@ug666/ui-react'

export function SiteNav() {
  return (
    <UGNavigationMenu>
      <UGNavigationMenuItem>
        <UGNavigationMenuLink href="/" active>首页</UGNavigationMenuLink>
      </UGNavigationMenuItem>
      <UGNavigationMenuItem>
        <UGNavigationMenuTrigger>产品</UGNavigationMenuTrigger>
        <UGNavigationMenuContent>
          <UGNavigationMenuLink href="/products/components">组件库</UGNavigationMenuLink>
          <UGNavigationMenuLink href="/products/templates">模板市场</UGNavigationMenuLink>
          <UGNavigationMenuLink href="/products/icons">图标集</UGNavigationMenuLink>
        </UGNavigationMenuContent>
      </UGNavigationMenuItem>
      <UGNavigationMenuItem>
        <UGNavigationMenuLink href="/pricing">价格</UGNavigationMenuLink>
      </UGNavigationMenuItem>
      <UGNavigationMenuItem>
        <UGNavigationMenuLink href="/about">关于</UGNavigationMenuLink>
      </UGNavigationMenuItem>
    </UGNavigationMenu>
  )
}

属性

属性	类型	默认值	说明
UGNavigationMenuLink.active	boolean	false	标记当前激活的导航链接，使用高亮背景。
UGNavigationMenuLink.href	string	—	导航链接地址。
UGNavigationMenuTrigger	ReactNode	—	带下拉箭头的触发按钮，支持悬停、点击和方向键展开 Content。
UGNavigationMenuContent	ReactNode	—	纵向排列的下拉内容区，自动约束最大宽度并断开超长文本。
className	string	—	各子组件均支持 className 扩展样式。