巨型菜单

MegaMenu 是一个导航组件，可同时显示子菜单。

导入#


import { MegaMenu } from 'primereact/megamenu';
         

基本用法#

MegaMenu 需要一个菜单项集合作为它的模型。


<MegaMenu model={items}  breakpoint="960px" />
 

垂直#

MegaMenu 的布局可以使用 orientation 属性进行更改，该属性接受 horizontal 和 vertical 作为选项。


<MegaMenu model={items} orientation="vertical" breakpoint="960px" />        
 

模板#

使用 start 和 end 属性，自定义内容可以放置在巨型菜单内。

avatar

<MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />
 

命令#

菜单项的 command 属性定义了当点击或按键事件激活项目时要运行的回调函数。


{
    label: 'Log out',
    icon: 'pi pi-signout',
    command: () => {
        // Callback to run
    }
}
         

路由器#

带有导航的项使用 command 属性进行定义，以便能够使用路由器链接组件、外部链接或程序化导航。


{
    label: 'Log out',
    icon: 'pi pi-signout',
    url: 'https://www.react.dev/',
    command: () => {
        router.push('/installation');
    }
}
         

可访问性#

屏幕阅读器

MegaMenu 组件使用 menubar 角色以及 aria-orientation，并且可以使用 aria-labelledby 或 aria-label 属性提供描述组件的值。每个列表项都有一个 presentation 角色，而锚元素具有 menuitem 角色，其中 aria-label 指的是项目的标签，如果项目被禁用，则定义 aria-disabled。MegaMenu 内的子菜单使用 menu 角色，其中 aria-labelledby 定义为子菜单根菜单项标签的 ID。此外，打开子菜单的根菜单项具有 aria-haspopup、aria-expanded 和 aria-controls，以定义项目和子菜单之间的关系。

键盘支持

按键功能
tab如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已在菜单内，则焦点将移动到页面 tab 顺序中的下一个可聚焦项目。
shift + tab如果焦点移入菜单，则将焦点添加到最后一个项目。如果焦点已在菜单内，则焦点将移动到页面 tab 顺序中的上一个可聚焦项目。
enter如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
space如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
escape如果焦点在弹出子菜单内，则关闭子菜单并将焦点移动到已关闭子菜单的根项。
下箭头如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的第一个元素，否则将焦点移动到子菜单内的下一个菜单项。
上箭头如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的最后一个元素，否则将焦点移动到子菜单内的上一个菜单项。
右箭头如果焦点在根元素上，则将焦点移动到下一个菜单项。如果焦点在子菜单内，则将焦点移动到下一个菜单组的第一个菜单项。
左箭头如果焦点在根元素上，则将焦点移动到上一个菜单项。如果焦点在子菜单内，则将焦点移动到上一个菜单组的第一个菜单项。
home将焦点移动到子菜单内的第一个菜单项。
end将焦点移动到子菜单内的最后一个菜单项。
                PrimeReact 10.9.1 由PrimeTek