Oracle Apex Dynamic Popup Navigation Menu Example

In this tutorial, you will learn how to create a dynamic popup navigation menu in Oracle Apex. To demonstrate this example, I am using Oracle Apex 19.1.

I have already posted about how to create the Tree menu in Oracle Apex. That menu we created on the Home page. This one will use the same table but with one more column MENU_TYPE and this menu will show on the top navigation menu in Oracle Apex Application. The benefit of the dynamic navigation menu is, it will be available on every page. Also, it could be controlled by the user access, that I will post in my next tutorial.

Steps to Create Oracle Apex Dynamic Popup Navigation Menu

  1. Create a table TREE_MENU as shown in the below example:
Create table tree_menu (
  parent_node integer,
  child_node integer,
  menu_desc varchar2(50),
  menu_type varchar2(20),
  page_no integer
);

Alter Table Tree_Menu add constraint pk_treemenu
primary key (menu_type, parent_node);
  1. Add the following data into it:

Dummy data for popup menu - Oracle Apex

Note: The fields above containing a hyphen (-) are null values so do not insert hyphen just leave blank these values. You can change the menu description and the page numbers according to your application. But first, I will recommend you to use as is so that you can understand the functionality.

  1. In Oracle Apex, goto shared components > Navigation > Lists and create a list as shown in the below screenshots:

Oracle Apex Create List from Scratch

Oracle Apex - Create List step 2.

Oracle Apex - Create list step 3.

Add the following SQL query in the above step:

select     level,
        menu_desc as label,
		        decode(page_no, null, null, 'f?p=&APP_ID.:'||"PAGE_NO"||':&APP_SESSION.')  as target, 
				'NO' is_current,
        decode(page_no, null, 'fa-folder-o', 'fa-file-text') as image
   from (select menu_desc, 
parent_node, 
child_node, 
page_no, 
menu_type
from TREE_MENU T where menu_type = 'HOME')
  start with child_node is null
connect by prior parent_node = child_node 
union all
select     level,
        menu_desc as label,
		        decode(page_no, null, null, 'f?p=&APP_ID.:'||"PAGE_NO"||':&APP_SESSION.')  as target, 
				'NO' is_current,
        decode(page_no, null, 'fa-folder-o', 'fa-file-text') as image
   from (select menu_desc, 
parent_node, 
child_node, 
page_no, 
menu_type
from TREE_MENU T where menu_type = 'MAIN')
  start with child_node is null
connect by prior parent_node = child_node

Then on the next step, click the Create button and the list will be created.

  1. Now click on the Shared Components > User Interface and then click on the Pencil icon to edit, as shown in the below image:

Oracle Apex edit user interface.

  1. Then in the Navigation Menu section set the following properties as shown in the below image:

Oracle Apex navigation menu settings.

Your dynamic popup navigation menu is all set. The following will be the output of the above example:

Oracle Apex Dynamic Popup Navigation Menu

See also:

Vinish Kapoor
Vinish Kapoor

Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

6 Comments

  1. hi Vinish Kapoor, using Apex 19.2, i tried this guide to create a custom dynamic menu, its working fine but during login it is showing a red box on left side of Developer toolbar where i can select a page / theme roller to modify something, after login checked console it is showing a warning "Menu bar items cannot have icons" why this appears, how i can remove this warning. beside this all things works fine.

    • In the 5th step, there is an option to check show submenu icons. Have you checked that or not?

  2. Hi Vinish, I followed the same process and created tree region and Dynamic Popup Navigation menu it is working fine but when i login, the Tree Menu is visible in Home Page. How do i hide it?

Comments are closed.