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);

2. Add the following data into it:

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.

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

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.

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

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

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

See also:

• Learn How to Set Label for an Item in Oracle Apex
• Oracle Apex – Create Report with Form with Region Display Selector Example
• Install Oracle Apex 19.1 in Eleven Easy Steps