Skip to content

NavigationMenu 多级导航

网站式多级导航栏:悬停 / 键盘展开子菜单(级联浮出),带 href 的叶子项渲染为链接。

基础用法

基础用法

尚未选择

禁用项

禁用项

API

属性

属性说明类型默认值
items导航项 JSON(层级结构)string[]

事件

事件说明
oas-select选择某项,detail: { value }

NavItem 字段(继承 MenuItem):

字段说明类型
label导航文字string
value选中值string
href链接地址(可选);叶子项带 href 渲染为 <a> 并可跳转string
target链接打开方式(可选)string
disabled禁用boolean
children子导航项(可继续嵌套,级联向右浮出)NavItem[]

交互:悬停展开子菜单、点击切换;键盘 / 顶级切换、/Enter 打开、 打开并聚焦末项、 进入级联、 返回父级、Esc 关闭全部并聚焦顶级。子菜单打开时 Tab 在子项间循环(焦点陷阱);选中后收起并派发 oas-select