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. |