总览

Nav 导航

开发指南

何时使用

分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

注意事项

  • iconOnly 只适用垂直方向。

  • Nav 继承自 Menu，除特殊说明外，可使用 Menu 的 API。

API

Nav

继承自 Menu 的能力请查看 Menu 文档

参数说明类型默认值
children导航项和子导航ReactNode-
type导航类型

可选值:
'normal'(普通)
'primary'(主要)
'secondary'(次要)
'line'(线形)		Enum'normal'
direction导航布局

可选值:
'hoz'(水平)
'ver'(垂直)		Enum'ver'
hozAlign横向导航条 items 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效

可选值:
'left', 'right'		Enum'left'
activeDirection设置组件选中状态的 active 边方向

可选值:
null(无)
'top'(上)
'bottom'(下)
'left'(左)
'right'(右)		Enum当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'
mode子导航打开的模式（水平导航只支持弹出）

可选值:
'inline', 'popup'		Enum'inline'
triggerType子导航打开的触发方式

可选值:
'click', 'hover'		Enum'click'
inlineIndent内联子导航缩进距离Number20
defaultOpenAll初始展开所有的子导航，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效Booleanfalse
openMode内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效

可选值:
'single', 'multiple'		Enum'multiple'
selectedKeys当前选中导航项的 key 值String/Array-
defaultSelectedKeys初始选中导航项的 key 值String/Array[]
onSelect选中或取消选中导航项触发的回调函数

签名:
Function(selectedKeys: Array, item: Object, extra: Object) => void
参数:
selectedKeys: {Array} 选中的所有导航项的 key
item: {Object} 选中或取消选中的导航项
extra: {Object} 额外参数
extra.select: {Boolean} 是否是选中
extra.key: {Array} 导航项的 key
extra.label: {Object} 导航项的文本
extra.keyPath: {Array} 导航项 key 的路径		Function-
popupAlign弹出子导航的对齐方式（水平导航只支持 follow ）

可选值:
'follow', 'outside'		Enum'follow'
popupClassName弹出子导航的自定义类名String-
iconOnly是否只显示图标Boolean-
noBg选中状态时是否显示背景色Booleanfalse
hasArrow是否显示右侧的箭头（仅在 iconOnly=true 时生效）Booleantrue
hasTooltip是否有 ToolTips （仅在 iconOnly=true 时生效）Booleanfalse
header自定义导航头部ReactNode-
footer自定义导航尾部ReactNode-
embeddable是否开启嵌入式模式，一般用于 Layout 的布局中，开启后没有默认背景、外层 border、box-shadow，可以配合<Nav style={{lineHeight: '100px'}}> 自定义高度Booleanfalse

Nav.Group

继承自 Menu.Group 的能力请查看 Menu.Group 文档

参数说明类型默认值
label标签内容ReactNode-
children导航项和子导航ReactNode-

Nav.Item

继承自 Menu.Item 的能力请查看 Menu.Item 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="icon type" />String/ReactNode-
children导航内容ReactNode-

Nav.PopupItem

继承自 Menu.PopupItem 的能力请查看 Menu.PopupItem 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type, 也可以使用组件 <Icon type="icon type" />String/ReactNode-
label标签内容ReactNode-
children弹出内容ReactNode-

Nav.SubNav

继承自 Menu.SubMenu 的能力请查看 Menu.SubMenu 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="your type" />String/ReactNode-
label标签内容ReactNode-
selectable是否可选Booleanfalse
children导航项和子导航ReactNode-

ARIA and KeyBoard

按键说明
Up Arrow导航到上一项
Down Arrow导航到下一项
Right Arrow打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项
Left Arrow关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项
Enter打开子菜单，导航到子菜单第一项
Esc关闭子菜单，导航到父级菜单