Oracle has recently released APEX version 20.2. But it is only recently that I have had the opportunity to explore the native APEX Mega Menu that was available with the release of APEX version 20.1.
A Mega Menu is essentially a menu interface that allows the display of all menu navigation items simultaneously – there is no need to expand sub menus, and so all menu accessible pages are available in one click.
APEX version 20.1 brought the option to select a Mega Menu navigation list natively and with it some template options to change the appearance of the menu. This blog is a basic guide to getting started with APEX Mega Menus.
In order to choose the Mega Menu as your preferred navigation menu style, in your APEX application, navigate to:
Shared Components > User Interface > User Interface Attributes
Then choose the Navigation Menu tab.
The default settings for a new application are below.
In order to set up Mega Menu, simply change the following settings:
| Setting | Value |
| Position | Top |
| List Template | Top Navigation Mega Menu |
Note: Changing the template to ‘Top Navigation Mega Menu’ doesn’t change the position by default. So if the Position is set as ‘Side’ the application pages will render with a blank space on the left-hand side where the Left-Hand Navigation menu would be by default.
And in basic terms, that’s it!
The actual Navigation Menu entries for a mega menu are defined in the same way as for other navigation menu templates, as a list type with either static entries or dynamically generated using SQL.
This also means that you can take advantage of the attributes available for list entries e.g. specifying images and links and other attributes, including User Defined Attributes such as Badges and Descriptions.
Once you have defined your list entries and run your application, you can take advantage of your Mega Menu.
The mega menu is collapsed by default, and can be expanded/collapsed by clicking on the menu button in the navigation bar.
There are a few configuration options available for the Mega Menu.
Back in User Interface Attributes, the following template options are listed.
Play around with these options to settle on the appearance that you prefer.
For example, the options selected below have the following impact on appearance.
So, the native Top Navigation Mega Menu can be configured very easily and take advantage of many of the attributes available to other list templates, to enable you to customise it’s appearance and provide the full navigation menu in a single display, increasingly popular in modern web applications.
Author: Philip Ratcliffe
Job Title: Oracle APEX Development Consultant
Bio: Philip is a Development Consultant at DSP-Explorer. Building on considerable experience in development including using Oracle PL/SQL and supporting Oracle EBS, Philip is employing APEX to provide quality, bespoke software solutions to a range of organisations.
