菜单栏

菜单栏，也称为导航栏，是一个水平菜单组件

导入#


import { Menubar } from 'primereact/menubar';

基本#

菜单栏需要一个菜单项集合作为其模型。


<Menubar model={items} />

模板#

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


<Menubar model={items} start={start} end={end} />

命令#

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


<Menubar model={items} />
<Toast ref={toast} />

路由#

带有导航的项目使用command和url属性定义，以便能够使用路由链接组件、外部链接或编程导航。


<Menubar model={items} />

可访问性#

屏幕阅读器

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

在移动视口中，会出现一个带有button角色以及aria-haspopup、aria-expanded和aria-controls的菜单图标，以管理覆盖菜单栏和按钮之间的关系。可以使用buttonProps指定的aria-label或aria-labelledby来定义描述按钮的值，默认情况下，使用locale API中的aria属性的navigation键作为 aria-label.

键盘支持

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