Mega Menu is collapsible floating panel which displays navigation entries at once. It enables users to reduce number of clicks to navigate.
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-113.png)
Features of Mega Menu
- Customizable
- Icons, Descriptions, and Badges
- Responsive
- Accessible and Keyboard Friendly
How to create?
Mega menu can use the exiting menu list like Desktop Navigation Menu.
- GO to Shared components
- User Interfaces
- Navigation Menu
- Change List template to Top Navigation Mega Menu
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-115.png)
Adding Icons to Mega Menu Items
To add Icons in Mega Menu items, the only thing is required to specify the icons in navigation list entries.
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-116-1024x455.png)
Menu item description is helpful to inform the user before navigating to the page.
Adding Badge to Mega Menu Items
- Go to Shared components
- Navigation list
- GO to List entry
- User Defined Attributes
- 2. Badge Value
- Enter the badge value. Application items are are also accessible from here (&APP_ITEM.).
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-117-1024x359.png)
Mega Menu Badge customization using a custom class
- GO to Shared components
- Navigation list
- GO to List entry
- User Defined Attributes
- 7. Badge Class
.custom_class {
color: red;
background: cyan;
font-weight: bold;
font-size: 50px;
}
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-118.png)
![](https://blogs.ontoorsolutions.com/wp-content/uploads/2022/12/image-119.png)
Adding Description to Mega Menu Items
Setup
In the Mega menu, we can select the special mega menu list Template, which has plenty of options available for customization.
- Go to Shared components
- Navigation list
- GO to List entry
- User Defined Attributes
- 3. Description
- Enter the item description