菜单

菜单是一个导航/命令组件，支持动态和静态定位。

导入#


import { Menu } from 'primereact/menu';

基本#

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


<Menu model={items} />

分组#


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

弹出#

通过添加 popup 属性并使用目标事件调用 toggle 方法来启用弹出模式。 popupAlignment 属性允许您控制覆盖层如何与其目标对齐。


<Toast ref={toast}></Toast>
<Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
<Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
<Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
<Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />

模板#

可以使用 template 属性将自定义内容放置在菜单项内。


<Menu model={items} className="w-full md:w-15rem"  />

命令#

当通过单击或按键事件激活项目时，command 属性定义要运行的回调。


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

路由器#

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


<Menu model={items} />

可访问性#

屏幕阅读器

菜单组件使用 menu 角色，并且用于描述菜单的值可以使用 aria-labelledby 或 aria-label 属性提供。每个列表项都有一个 presentation 角色，而锚元素具有一个 menuitem 角色，其中 aria-label 指的是项目的标签，如果项目被禁用，则定义 aria-disabled。菜单内的子菜单使用 group 角色，并定义一个 aria-labelledby 作为子菜单根菜单项标签的 ID。

在弹出模式下，组件隐式管理目标元素的 aria-expanded、aria-haspopup 和 aria-controls 属性，以定义目标和弹出窗口之间的关系。

键盘支持

键	功能
tab	如果焦点进入菜单，则将焦点添加到第一个项目。如果焦点已在菜单内，则焦点将移动到页面 tab 序列中的下一个可聚焦项目。
shift + tab	如果焦点进入菜单，则将焦点添加到最后一个项目。如果焦点已在菜单内，则焦点将移动到页面 tab 序列中的上一个可聚焦项目。
enter	激活聚焦的菜单项。如果菜单处于覆盖模式，则弹出窗口将关闭，焦点将移动到目标。
space	激活聚焦的菜单项。如果菜单处于覆盖模式，则弹出窗口将关闭，焦点将移动到目标。
escape	如果菜单处于覆盖模式，则弹出窗口将关闭，焦点将移动到目标。
向下箭头	将焦点移动到下一个菜单项。
向上箭头	将焦点移动到上一个菜单项。
home	将焦点移动到第一个菜单项。
end	将焦点移动到最后一个菜单项。