Angular PrimeNG Menu Reference

Angular PrimeNG Menu provides different components, such as MenuModel, Breadcrumb, ContextMenu, MegaMenu, etc., that help to build the menus and submenus that share the common API, along with rendering an overlay menu on right click of its target. This component also helps the user to navigate through the different pages without refreshing the page by facilitating the page hierarchy. This enhances the overall user interaction with the web application.

The complete list of Menu Components is listed below with their brief description:

MenuModel API Component

PrimeNG Menus components facilitate to specify the menuitems and submenus by sharing a common API.

Components	Descriptions
MenuModel API MenuItem	PrimeNG menus components share a common API to specify the menuitems and submenus.
MenuModel API MegaMenu	In the case of MegaMenu, the items in the root level should be MegaMenuItem[], & in the case of the Nested level, the submenus can be MenuItem[].
MenuModel API Command	In Custom Content, both simple strings and HTML values are supported by the Label of a menuitem.
MenuModel API Custom Content	In Custom Content, both simple strings and HTML values are supported by the Label of a menuitem.

Breadcrumb Component

The Breadcrumb Component provides the navigation link that is used to link the previous pages the user navigates through & displays it in the hierarchy.

Components	Descriptions
Breadcrumb Properties	The Breadcrumb Component provides the navigation link that is used to link the previous pages the user navigates through & displays it in the hierarchy.
Breadcrumb Events	The Breadcrumb component provides the navigation link that is used to link the previous pages the user navigates through & display it in the hierarchy.
Breadcrumb Styling	This component provides the various structural styling classes to style the component.

ContextMenu Component

The ContextMenu component displays a menu when right-clicking over any component. It appears similar to the menu that appears when we right-click over any application or desktop screen on a PC.

Components	Descriptions
ContextMenu Target	This component is used as a Local template variable name of the element to attach the context menu.
ContextMenu Exclusive Integrations	Components like Tree, DataTable, etc. have special integration so they provide a different method to attach a context menu.
ContextMenu Properties	The properties of the component allow us to customize the component and display it accordingly and suit the website design.
ContextMenu Events	The ContextMenu events are used to track the interactions with the component.
ContextMenu Styling	The ContextMenu styling allows us to override the default styles by using the component style classes.

Dock Component

The Dock Component is a navigation component that acts as a menu item. The Dock menu item is built on MenuItem of PrimeNG and provides many functionalities.

Components	Descriptions
Dock Basic	The Basic dock just contains the Dock menu element with the items inside it.
Dock Advanced	The dock component resembles the dock menu in Ubuntu OS or Mac OS. The Dock menu item is built on MenuItem of PrimeNG and provides many functionalities.
Dock Properties	The Dock properties allow us to modify the component with the help of properties and provide great extensibility quickly.
Dock Styling	The Dock Styling allows modification of the default styling of the component by using the classes of the component.

MegaMenu Component

The MegaMenu Component is a navigation component that is used to make a component with multiple numbers of the menu.

Components	Descriptions
MegaMenu Horizontal	This component provides the navigation component in a horizontal manner.
MegaMenu Vertical	This component provides aligning the menu items in a vertical manner.
MegaMenu Custom Content	This component can be used to place the custom content in between the p-megaMenu tags, & the content must be aligned in a horizontal manner.
MegaMenu Properties	It is used to define the orientation. It is of string data type & the default value is horizontal.
MegaMenu Templates	The Templates are used to put some content on some pre-structured containers.
MegaMenu Styling	This component provides the different classes that will be used to style a container element.

Menu Component

The Menu Component is used to make a component that contains some information & supports either static or dynamic positioning.

Components	Descriptions
Menu Basic	Angular PrimeNG Menu Basic is used to make a component for navigation that contains some information & supports either static or dynamic positioning.
Menu Overlay	Angular PrimeNG Menu Overlay can show the menu as a popup.
Menu SubMenus	The SubMenus supports 1 level of nesting via subitems of an item. This helps to create categories or headings in the menu.
Menu Popup Mode	The Menu Popup Mode can be used to show the menu as a popup.
Menu Animation Configuration	The Menu Animation Configuration allows us to configure the default animation of opening and closing the menu.
Menu Properties	The properties of the Menu component provided by PrimeNG are listed below.
Menu Events	The two events of the Menu component named onShow and onHide are described below.
Menu Styling	We can add some menu style classes to change the style of menu items and elements.

Menubar Component

The Menubar Component is used to make a menu list in the form of a horizontal bar.

Components	Description
Menubar Custom Content	The Menubar component Custom Content facilitates the placement of the content in between the p-menubar tags.
Menubar Properties	This component provides the various properties that can be used with Menubar.
Menubar Templates	This component has various templates that are used to make the Menubar.
Menubar Styling	The Menubar styling allows us to customize the default styling of the menubar using the classes so that we can create a custom design.

PanelMenu Component

The PanelMenu Component is used to make a menu in the form of a panel. It can be considered as a combination of accordion and tree components

Components	Descriptions
PanelMenu Initial State	It is an array of menu items. It accepts the array data type as input & the default value is null.
PanelMenu Animation Configuration	The PanelMenu Animation Configuration allows us to configure the default animation when the component appears and then hides each section of the menu.
PanelMenu Properties	It is an array of menu items. It accepts the array data type as input & the default value is null.
PanelMenu Styling	This component is used to include the structural styling classes to the component.

SlideMenu Component

The SlideMenu Component is used to display the menu list in the form of the sliding animation which helps to see the menu items in a stepwise manner.

Components	Descriptions
Slide Menu Basic	SlideMenu component is used to display the menu list in the form of a sliding animation which helps to see the menu items in a stepwise manner
Slide Menu Popup	It defines if the menu would be displayed as a popup. It is of the boolean data type & the default value is false.
Slide Menu Effects	The Menu component is used to make a component that contains some information & supports either static or dynamic positioning.
Slide Menu Animation Configuration	The Slide Menu Animation Configuration allows us to configure the default animation of opening and closing the menu.
Slide Menu Properties	It is an array of menu items. It accepts the array data type & the default value is null.
Slide Menu Styling	The Slide Menu Styling classes allow changing the design of the component from the default design by implementing the list of structural style classes provided by Angular PrimeNG.

Steps Component

The Steps Component is used to indicate or track the completion of a series of processes.

Components	Descriptions
Steps Readonly	The Step Component is used to indicate or track the completion of a series of processes. The readonly property is used to check whether the items are clickable or not.
Steps Properties	The Step component is used to indicate or track the completion of a series of processes.
Steps Events	Angular PrimeNG provides an event that is fired while opting for a new step.
Steps Styling	There are different lists of structural style classes provided by Angular PrimeNG, which can be utilized to enhance the user experience.

TabMenu Component

The TabMenu Component is used to make a navigation bar that will display the nav items as a nav header ie., it is a menu in the form of tabs.

Components	Descriptions
TabMenu Default	The TabMenu component is used to make a navigation bar that will display the nav items as a nav header ie., it is a menu in the form of tabs.
TabMenu Scrollable	The Scrollable represents the scroll can be in the horizontal direction,
TabMenu ActiveItem	The TabMenu component is used to make a navigation bar that will display the nav items as a nav header
TabMenu Properties	The TabMenu component is used to make a navigation bar that will display the nav items as a nav header ie., it is a menu in the form of tabs.
TabMenu Styling	The TabMenu Styling classes allow changing the design of the component from the default design.

TieredMenu Component

This component helps to render the submenus in the form of nested overlays.

Components	Description
TieredMenu Inline	The TieredMenu inline allows users to have nested menu items within the same line.
TieredMenu Popup	TieredMenu Popup allows a user to make the menu in the form of popup tiers using a button toggle.
TieredMenu Animation Configuration	The Animation Configuration can be used to control the show and hide animation of the TieredMenu.
TieredMenu Properties	There are various properties provided by Angular PrimeNG, which are described below.
TieredMenu Styling	The TieredMenu Styling classes allow changing the design of the component from the default design by implementing the various lists of structural style classes.