导航菜单 · NavMenu

导航菜单用于导航场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

导航菜单 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable items. Pass as the menu prop of SideNavHeading or TopNavHeading.

属性	类型	默认值	说明
children *	ReactNode		Menu items.
size	'sm' \| 'md' \| 'lg'	'md'	Controls min-width and item padding.
minWidth	number \| string		Minimum width override.
xstyle	StyleXStyles		StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

主题 API

{
  "targets": [
    {
      "className": "astryx-nav-heading-menu",
      "visualProps": [
        "size"
      ]
    },
    {
      "className": "astryx-nav-heading-menu-item",
      "visualProps": [
        "size"
      ]
    }
  ]
}

组件结构

Menu: Menu container for nav-heading actions, with menu semantics and keyboard navigation.
Item: Selectable action or navigation link inside the Menu.
Icon: Optional Icon-rendered artwork shown before an Item label.
Text-rendered item label: String Item label rendered through Text.
Caller-rendered item label: Non-string Item label content rendered directly by the caller.
Item description: Optional supporting description rendered through Text.

导航菜单