UI
本页目录

组件 · 导航

NavigationMenu 导航菜单

站点导航菜单（含弹出层级）。

入口 @selrux/ui/navigation-menu · 源码 src/components/navigation-menu/index.ts · 10 个组件 · 发布状态 preview

使用建议

  • 避免：与 Menu 纵向侧栏混用同一数据模型而不适配
  • 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx
import {
  NavigationMenu,
  NavigationMenuArrow,
  NavigationMenuBackdrop,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  // …共 11 个导出
} from '@selrux/ui/navigation-menu';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

组合预览；面板默认关闭，悬停/点击触发器打开。

代码演示

基础用法

带下拉面板的站点导航；面板内放链接。

对齐与尺寸

align 设定面板相对触发器的对齐；size 尺寸。

API

属性覆盖：示例用到 2 / 2 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

  • NavigationMenu.styles：语义 slot 内联样式，与 className/style 同类的样式逃生口，不单独演示
  • NavigationMenuPositioner.container：Portal 挂载目标，默认 body；文档页无需更换挂载点

NavigationMenu

NavigationMenu 根：解析尺寸；子树后自动挂 Positioner（对齐 ui-main）。

属性说明类型默认值
align内置 Positioner 的水平对齐。"start" | "end" | "center"-
size-"xs" | "sm" | "md" | "lg" | "xl" | "2xl"-
classNames-Partial<Record<NavigationMenuSemanticSlot, string>>-
styles-Partial<Record<NavigationMenuSemanticSlot, CSSProperties>>-

另有 286 项原生属性与事件继承自 HTMLAttributes，原样透传。

NavigationMenuArrow

箭头（进阶）。

无自有属性；其余 278 项原生属性继承自 HTMLAttributes。

NavigationMenuBackdrop

遮罩（进阶）。

无自有属性；其余 278 项原生属性继承自 HTMLAttributes。

NavigationMenuContent

内容面板。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

NavigationMenuIndicator

指示器（含箭头装饰）。

无自有属性；其余 278 项原生属性继承自 HTMLAttributes。

NavigationMenuItem

项。

无自有属性；其余 279 项原生属性继承自 HTMLAttributes。

导航链接。

无自有属性；其余 288 项原生属性继承自 AnchorHTMLAttributes / HTMLAttributes。

NavigationMenuList

列表。

无自有属性；其余 278 项原生属性继承自 HTMLAttributes。

NavigationMenuPositioner

Portal + Positioner + Popup + Viewport。 常规用法由 Root 自动挂载；进阶可单独使用。

属性说明类型默认值
container-HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot | null> | null-

另有 290 项原生属性与事件继承自 HTMLAttributes，原样透传。

NavigationMenuTrigger

触发器；内置 chevron Icon。

无自有属性；其余 289 项原生属性继承自 ButtonHTMLAttributes / HTMLAttributes。

导出类型：NavigationMenuArrowProps、NavigationMenuBackdropProps、NavigationMenuContentProps、NavigationMenuIconProps、NavigationMenuIndicatorProps、NavigationMenuItemProps、NavigationMenuLinkProps、NavigationMenuListProps、NavigationMenuPopupProps、NavigationMenuPortalProps、NavigationMenuPositionerProps、NavigationMenuProps、NavigationMenuSemanticSlot、NavigationMenuSize、NavigationMenuTriggerProps、NavigationMenuViewportProps

函数与常量

名称说明签名 / 类型
navigationMenuTriggerStyleTrigger 与顶栏 Link 的视觉类组合。(props?: ClassProp | undefined) => string