在本章中，您将了解几种菜单变体。PrimeNG的菜单满足所有主要要求。现在，每个网站都有菜单。通常，菜单作为要导航的链接或要执行的命令的列表呈现给用户。菜单有时是按层次组织的，允许在菜单结构的不同级别进行导航。
在本章中，我们将介绍以下主题：
PrimeNG提供了一个MenuModelAPI，所有菜单组件都将共享该API来指定菜单项和子菜单。MenuModelAPI的核心项是MenuItem类，有label、icon、url等选项，子菜单项有items选项，等等。
让我们以菜单组件为例来表示一个通用工具栏用户界面。菜单组件通过model属性将MenuItem类数组绑定为项，如下所示：
|名称|型|违约|说明||label|string|null|该项目的案文。||icon|string|null|项目的图标。||command|function|null|单击项时要执行的回调。||url|string|null|单击项目时导航的外部链接。||routerLink|array|null|内部导航的RouterLink定义。||items|array|null|子菜单项的数组。||expanded|boolean|false|子菜单的可见性。||disabled|boolean|false|当设置为true时，禁用菜单项。||visible|boolean|true|是否创建菜单项的DOM元素。||target|string|null|指定打开链接文档的位置。|
Table1.0
带有纯只读标签和图标的菜单项并不是真正有用的。具有用户操作的菜单组件需要执行业务实现或导航到其他资源。菜单操作的主要组件是命令调用和导航。这可以通过MenuItem接口的url和routerLink属性来实现。
MenuItemAPI的URL和路由链接选项的示例用法如下：
菜单是支持动态和静态定位的导航或命令组件。这是所有菜单组件变体中的基本菜单组件。默认情况下，菜单是静态定位的，但通过提供target属性使其成为动态的。静态定位菜单作为目标（即[T1]）附加到页面主体，而分配给其他元素则创建动态定位菜单。
包含项目文档或文件类型菜单项的基本菜单示例如下：
this.items=[{label:'Edit',icon:'fa-edit',items:[{label:'Undo',icon:'fa-mail-forward'},{label:'Redo',icon:'fa-mail-reply'}]},//Moreitems...}以下屏幕截图显示基本菜单（包含所有菜单项）示例的快照结果：
从前面的快照中，您可以看到菜单组件以内联格式显示。但是，通过启用popup属性以显示为叠加，可以更改此行为。
菜单组件定义了MenuAPI的toggle、show和hide方法。以表格形式列出的每种方法的详细说明如下：
|名称|参数|说明||toggle|event:browserevent|切换弹出菜单的可见性。||show|event:browserevent|显示弹出菜单。||hide|-|隐藏弹出菜单。|
菜单栏组件是一组具有嵌套子菜单的水平菜单组件（或具有一组用于页面导航的下拉菜单的组件）。和任何其他菜单组件一样，MenuBar使用一个公共菜单模型API，其中包含一个MenuItem接口列表。子菜单的嵌套级别没有限制。让我们来看一个窗口或应用特定菜单的基本菜单栏示例。这为打开文件、编辑操作、与应用交互、显示帮助文档等常见功能提供了访问权限，如下所示：
this.items=[{label:'Edit',icon:'fa-edit',items:[{label:'Cut',icon:'fa-cut'},{label:'Copy',icon:'fa-copy'},{label:'Paste',icon:'fa-paste'},{label:'Undo',icon:'fa-mail-forward'},{label:'Redo',icon:'fa-mail-reply'},{label:'Find',icon:'fa-search',items:[{label:'FindNext'},{label:'FindPrevious'}]}]},//moreitems......];以下屏幕截图显示基本菜单栏（包含所有菜单项）示例的快照结果：
组件蒙皮可以通过style和styleClass属性实现。Priming4.1允许通过将自定义内容（表单控件）放置在菜单栏标记中来进行自定义。
ContextMenu是一个带有图形用户界面【GUI】表示的菜单，只需右键单击即可显示在页面顶部。通过单击鼠标右键，将在目标图元上显示叠加菜单。有两种类型的上下文菜单，一种用于文档，另一种用于特定组件。除了这两个组件之外，还有一个与DataTable等组件的特殊集成。
默认情况下，上下文菜单以全局设置附加到文档。显示文档或文件类型菜单的基本上下文菜单示例如下：
this.documentItems=[{label:'File',icon:'fa-file-o',items:[{label:'New',icon:'fa-plus',items:[{label:'Project'},{label:'Other'},],expanded:true},{label:'Open'},{label:'Quit'}],},//moreitems...];以下屏幕截图显示了基本上下文菜单（包含所有菜单项）示例的快照结果：
单击此组件的外部后，关联菜单将消失。
可以使用target属性更改上下文菜单的默认全局设置（即，上下文菜单将显示在全局文档目标以外的其他元素上）。让我们看一个上下文菜单示例，其中在右键点击图像元素的顶部出现叠加或弹出，如下所示：
在上一节中，您已经了解了如何使用target属性将上下文菜单与其他元素集成。但与DataTable组件的集成是另一种情况，需要特殊处理。这种组合是web开发中经常使用的用例之一。
DataTable使用contextMenu属性提供对上下文菜单的引用（即，上下文菜单的模板引用变量应分配给DataTable的contextMenu属性）。与DataTable集成的上下文菜单将编写如下：
根据前面的快照，单击鼠标右键选择表行，并在该行上显示叠加。菜单项选择既可以执行业务逻辑，也可以导航到各种网页。
SlideMenu是一个组件，用于显示具有幻灯片动画效果的子菜单。这种幻灯片菜单组件是iPod风格菜单小部件的最佳示例。默认情况下，幻灯片菜单显示为内嵌菜单组件。显示文档或文件类型菜单的基本幻灯片菜单示例如下：
this.items=[{label:'File',icon:'fa-file-o',items:[{label:'New',icon:'fa-plus',items:[{label:'Project'},{label:'Other'},]},{label:'Open'},{label:'Quit'}]},//moreitems...]以下屏幕截图显示了基本幻灯片菜单的快照结果，例如，单击文件菜单项时显示文件菜单项：
如前面的快照所示，幻灯片菜单以内联格式显示。通过启用popup属性，以弹出方式显示。在幻灯片菜单弹出窗口的底部，会出现一个带有后退标签的后退按钮，但也可以使用backLabel属性进行自定义。
任何可视组件的尺寸都非常需要，必须进行配置。考虑到该标准，菜单尺寸的尺寸是可配置的。子菜单宽度通过menuWidth属性控制，默认为180（通常以像素为单位）。此外，可滚动区域的高度通过viewportHeight属性控制，默认值为175像素（即，如果菜单高度超过此默认值，则会显示滚动条）。
TieredMenu组件以嵌套叠加模式显示子菜单。默认情况下，幻灯片菜单显示为内嵌菜单组件。显示文档或文件类型菜单的基本分层菜单示例如下：
this.items=[{label:'File',icon:'fa-file-o',items:[{label:'New',icon:'fa-plus',items:[{label:'Project'},{label:'Other'},]},{label:'Open'},{label:'Quit'}},//moreitems]以下屏幕截图显示了基本分层菜单示例的快照结果：
如前面的快照所示，幻灯片菜单以内联格式显示。通过启用popup属性，以弹出方式显示。Priming4.1引入了appendTo属性来附加叠加层。使用API方法访问幻灯片菜单，如toggle、show和hide。
幻灯片菜单和分层菜单组件之间的主要区别在于，幻灯片菜单通过替换父菜单来显示子菜单，而分层菜单以叠加模式显示子菜单。在菜单部分表2.0中解释了幻灯片菜单和分层菜单的API方法，并以表格形式提供了更多详细信息。
MegaMenu类似于一个下拉菜单，可扩展为一个相对较大且复杂的界面，而不是一个简单的命令列表。它同时显示根项目的子菜单。MegaMenu由嵌套菜单项组成，其中每个项的根项是一个二维数组，用于定义叠加菜单中的列。
零售商应用购买服装项目的基本MegaMenu示例如下所示：
this.items=[{label:'HOME&FURNITURE',icon:'fa-home',items:[[{label:'HomeFurnishing',items:[{label:'Cushions'},{label:'Throws'},{label:'Rugs&Doormats'},{label:'Curtains'}]},{label:'HomeAccessories',items:[{label:'ArtificialFlowers'},{label:'Lighting'},{label:'Storage'},{label:'PhotoFrames'}]}],[{label:'Cooking&Dinner',items:[{label:'Cookware'},{label:'Dinnerware'},{label:'Bakerware'}]},{label:'Bed&Bath',items:[{label:'Towels'},{label:'BathMats'}]}]]},//moreitems...];以下屏幕截图显示基本MegaMenu（包含所有菜单项）示例的快照结果：
MegaMenu的默认方向为水平。这也可以使用orientation属性（即orientation="vertical"以垂直方式定位）。垂直菜单如以下快照所示：
Priming4.1允许通过将自定义内容（表单控件）放置在MegaMenu标记中来实现。
PanelMenu是垂直堆叠手风琴和层次树组件的混合体。每个父菜单项都有一个可切换的面板；通过面板，它以层次树格式显示子菜单项。显示文档或文件类型菜单的基本面板菜单示例如下：
this.items=[{label:'Help',icon:'fa-question',items:[{label:'Contents'},{label:'Search',icon:'fa-search',items:[{label:'Text',items:[{label:'Workspace'}]},{label:'File'}]}]},//moreitems...];以下屏幕截图显示了基本面板菜单示例的快照结果：
每个菜单项的初始状态通过expanded属性（即expanded="true"进行控制，该属性在MenuItem界面级别可用。
TabMenu是一个导航/命令组件，它将项目显示为选项卡标题（即，父根项目以水平堆叠选项卡的形式表示）。单击每个选项卡，可以执行各种菜单操作。
基本选项卡式菜单示例以各种选项卡的形式显示PrimeNG网站信息，如下所示：
默认情况下，TabMenu在第一个选项卡上显示或激活。但是选项卡的默认可见性或初始显示可以在activeItem属性的帮助下更改。
面包屑组件提供有关页面层次结构的上下文信息。它允许您跟踪它们在程序、文档和网站中的位置。这通常在网页顶部显示为水平，由大于运算符（>）作为层次分隔符分隔。此菜单变体包含一个用于定义其项的通用菜单模型API。这些菜单项（菜单项集合）连接到一个model属性。
电子商务应用购买电子产品的基本面包屑示例如下：
主页图标也是菜单项的一部分，可以使用MenuItem类型的home属性进行自定义。因此，菜单项的所有功能也适用于主菜单项。必须为面包屑组件定义home属性，如下所示：
home:MenuItem;this.home={label:'Home',icon:'fa-globe',command:(event)=>{this.msgs.length=0;this.msgs.push({severity:'info',summary:"Home"});}};这是组件支持的自定义图标属性，可在MenuItem中定义。
在本章末尾，您现在知道了如何处理各种菜单组件，以及如何将它们放在特定用例的页面上。首先，我们从MenuModelAPI开始创建一个项目数组，然后将菜单组件作为基本组件引入，然后将MenuBar移动到带有嵌套复杂子菜单的MegaMenu组件，然后是其他菜单变体，如幻灯片菜单、分层菜单和面板菜单。
后来，我们将上下文菜单和面包屑组件作为另一种菜单操作。在下一章中，您将看到作为API的图表模型，以及如何为数据的可视化表示创建出色的图表和地图。所有这些组件都以一步一步的方式解释了所有可能的功能。