category: Components type: UI Views component: Base chinese: 导航（收纳式） english: TopNav

收纳式吊顶导航组件。

规则

API

TopNav

导航头部组件，包含导航条、抽屉菜单等，以及对鼠标焦点、当前选中项、当前钉菜单等数据的管理能力等。完整的导航需配合 TopNav.MenuContent，TopNav.BarContent，TopNav.PinnedMenu 以及用户所自定义的产品 LOGO、用户信息等共同构建（详见 Demo）。

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------------------------------------------------- | -------- | ------- | | className | 自定义类名 | string | N/A | | style | 组件接受行内样式 | object | N/A | | hoveredKey | 当前用户鼠标在抽屉菜单中悬浮的菜单项所对应的 key | string | N/A | | onHover | 用户鼠标在抽屉菜单中浮到另一个菜单项或切换一级菜单时触发的回调 | (hoveredKey: string) => void | N/A | | selectedKeys | 显示选中样式的菜单项 | string[] | [] | | pinnedKeys | 当前被钉的菜单项 | string[] | [] | | onPinnedKeysChange | 用户使用设置对话框更改被钉的菜单项时所触发的回调 | (pinnedKeys: string[]) => void | N/A | | dataSource | 指定用来渲染菜单的数据，数据格式见本页面“规则”中的描述，或可利用 dataRenderCallback 属性自定义 | object[] | N/A | | extraRender | 使用 dataSource 时，用来渲染每个菜单项右侧的部分的回调 | (node: object) => ReactNode | N/A | | itemOnClick | 使用 dataSource 时，点击菜单项所触发的回调 | (node: object) => void | 默认为空 | | hasDrawer | 是否显示展开抽屉菜单的按钮 | boolean | true | | dataRenderCallback | 使用 dataSource 属性时的具体渲染逻辑 | (node: object) => [object, object[]] | 默认渲染逻辑见 Demo |

TopNav.MenuContent

菜单内容的容器，放在 TopNav 组件下，子级必须为 TopNav.Item 组件。

该子组件无属性。

TopNav.BarContent

导航条内容的容器（TopNav 默认包含抽屉菜单按钮），放在 TopNav 组件下，子级为用户所自定义的导航条内容。

该子组件无属性。

TopNav.Item

描述菜单项节点，放在 TopNav.MenuContent 中。可以选择使用 dataSource 属性或者 TopNav.Item 来。

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------------------------------------------------- | -------- | ------- | | className | 自定义类名 | string | N/A | | style | 组件接受行内样式 | object | N/A | | title | 该菜单项显示出的标题 | ReactNode | N/A | | extra | 该菜单项右侧所显示的内容 | ReactNode | N/A | | onClick | 点击该菜单项的回调 | (e: Event) => void | N/A |

TopNav.PinnedMenu

该子组件需放在 TopNav.BarContent 子组件下，作为导航条的一部分出现。根据 TopNav 的 dataSource 或 TopNav.MenuContent 中的数据以及 pinnedKeys 值，将被钉的菜单项显示在导航条上。

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------------------------------------------------- | -------- | ------- | | className | 自定义类名 | string | N/A | | style | 组件接受行内样式 | object | N/A |

TopNav.Placeholder

TopNav.External

TopNav.PinnedMenu 的独立版本，可脱离 TopNav 和 TopNav.BarContent 独立使用，显示所有子菜单项（无菜单是否被钉的状态区分）。非特殊需求请忽略本子组件，不要使用。

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------------------------------------------------- | -------- | ------- | | className | 自定义类名 | string | N/A | | style | 组件接受行内样式 | object | N/A | | hoveredKey | 当前用户鼠标在抽屉菜单中悬浮的菜单项所对应的 key | string | N/A | | onHover | 用户鼠标在抽屉菜单中浮到另一个菜单项或切换一级菜单时触发的回调 | (hoveredKey: string) => void | N/A | | selectedKeys | 显示选中样式的菜单项 | string[] | [] | | dataSource | 指定用来渲染菜单的数据，数据格式见本页面“规则”中的描述，或可利用 dataRenderCallback 属性自定义 | object[] | N/A | | extraRender | 使用 dataSource 时，用来渲染每个菜单项右侧的部分的回调 | (node: object) => ReactNode | N/A | | itemOnClick | 使用 dataSource 时，点击菜单项所触发的回调 | (node: object) => void | 默认为空 | | dataRenderCallback | 使用 dataSource 属性时的具体渲染逻辑 | (node: object) => [object, object[]] | 默认渲染逻辑见本页面“规则”中的描述 |