分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。
Nav 继承自 Menu,除特殊说明外,可使用 Menu 的 API。
Nav 可设置 iconOnly 属性,只显示图标,以减少占用空间。通过设定 iconOnlyWidth 为 100%,可以实现 iconOnly 场景下 icon 自适应居中展示,需要注意的是这种情况下需要 Nav 外部容器有具体宽度。
内嵌菜单可以被缩起/展开。 Nav背景与环境背景不同? 开启embeddable试试,完美嵌入环境:
embeddable 模式后,Nav组件适合被嵌入到有背景色的页面部分,当作导航。可以根据背景色色系选择不同的type;embeddable 模式时,Nav组件将带有背景色、border、阴影等,可以单独使用。| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 | 
|---|---|---|---|---|---|
| children | 导航项和子导航 | React.ReactNode | - | - | |
| defaultOpenAll | 初始展开所有的子导航 | boolean | false | - | |
| mode | 子导航打开的模式 | 'inline' | 'popup' | 'inline' | - | |
| triggerType | 子导航打开的触发方式 | 'click' | 'hover' | 'click' | - | |
| openMode | 内联子导航的展开模式,同时可以展开一个同级子导航还是多个同级子导航 | 'single' | 'multiple' | 'multiple' | - | |
| inlineIndent | 内联子导航缩进距离 | number | 20 | - | |
| popupAlign | 弹出子导航的对齐方式 | 'follow' | 'outside' | 'follow' | - | |
| popupClassName | 弹出子导航的自定义类名 | string | - | - | |
| selectedKeys | 当前选中导航项的 key 值 | string | Array<string> | - | - | |
| defaultSelectedKeys | 初始选中导航项的 key 值 | string | Array<string> | [] | - | |
| onSelect | 选中或取消选中导航项触发的回调函数 签名: 参数: selectedKeys: 选中的导航项的 key 值 item: 选中的导航项 extra: 扩展参数  | 
(selectedKeys: string[], item: SelectableItem, extra: SelectExtra) => void | - | - | |
| direction | 导航布局 | 'hoz' | 'ver' | 'ver' | - | |
| hozAlign | 横向导航条 items 和 footer 的对齐方向 | 'left' | 'right' | 'left' | - | |
| header | 自定义导航头部 | React.ReactNode | - | - | |
| footer | 自定义导航尾部 | React.ReactNode | - | - | |
| embeddable | 是否开启嵌入式模式 | boolean | false | 1.18 | |
| type | 导航类型 | 'normal' | 'primary' | 'secondary' | 'line' | 'normal' | - | |
| activeDirection | 设置组件选中状态的 active 边方向 | null | 'top' | 'bottom' | 'left' | 'right' | - | - | |
| iconOnly | 是否只显示图标 | boolean | - | - | |
| iconTextOnly | iconOnly 模式下是否展示文字 | boolean | - | - | |
| iconOnlyWidth | iconOnly 模式下的宽度 | number | string | - | - | |
| hasArrow | 是否显示右侧的箭头 | boolean | true | - | |
| hasTooltip | 是否有 ToolTips | boolean | false | - | 
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 
|---|---|---|---|---|
| label | 标签内容 | React.ReactNode | - | |
| children | 导航项和子导航 | React.ReactChild | React.ReactChild[] | - | 是 | 
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 
|---|---|---|---|---|
| icon | 自定义图标 | string | React.ReactNode | - | |
| children | 导航内容 | React.ReactNode | - | 
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 
|---|---|---|---|---|
| label | 标签内容 | React.ReactNode | - | |
| children | 弹出内容 | React.ReactNode | - | |
| icon | 自定义图标 | string | React.ReactNode | - | 
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 
|---|---|---|---|---|
| icon | 自定义图标 | string | React.ReactNode | - | |
| label | 标签内容 | React.ReactNode | - | |
| selectable | 是否可选 | boolean | false | |
| children | 导航项和子导航 | React.ReactNode | - | |
| noIcon | 是否需要提示当前项可展开的 icon,默认是有的 | boolean | - | 
| 按键 | 说明 | 
|---|---|
| Up Arrow | 导航到上一项 | 
| Down Arrow | 导航到下一项 | 
| Right Arrow | 打开子菜单,导航到子菜单第一项;横向菜单条第一层,导航到右一项 | 
| Left Arrow | 关闭子菜单,导航到父级菜单;横向菜单条第一层,导航到左一项 | 
| Enter | 打开子菜单,导航到子菜单第一项 | 
| Esc | 关闭子菜单,导航到父级菜单 | 
defaultOpenKeys 不生效,有什么解决办法? #原因:defaultXXX系列API遵循React的设计规范,仅在组件第一次渲染的时候生效,所以defaultOpenKeys仅仅对Menu在didMount阶段拿到的Children生效,异步获取的信息不在这个阶段内,所以不生效。
解决方法:假设菜单信息是异步获取后塞到 menuData 变量中的,可以设置 {menuData && <Menu />}。