Monday, April 20, 2015

APEX 5: Creating Sub-Menus

APEX 5 has gotten rid of the old APEX tabs concept and instead replaced it with the APEX Navigation Menu. This is a very positive change and, tied in with the new Universal Theme it, certainly makes life easier.

One thing that I really like is the simplicity to create sub-menus. They're various ways to create sub-menus. This post will cover creating sub-menus from both the page creation wizard and via the Shared Components > Navigation Menu options.  There will be three pages in this example: parent, child, and grand child.

To start, I'll assume that you have one page and one Navigation Menu item called Parent. Next, create a second page called Child using the wizard. In the wizard, configure the Navigation Menu options as shown below:


Finish the page creation wizard. When you run your app you'll now see the Parent/Child menu and sub-menu.

Create a third page, called Grand Child. This time when you get the the Navigation Menu wizard option you can't select the Child page as it's parent. It is shown in the list, but greyed out. To get around this issue, just select "No Parent Selected" and finish the wizard. 

To make the Grand Child page a sub-menu of Child:
  • Go to Shared Components > Navigation Menu. 
  • Edit the Grant Child list entry.
  • Select Child for the Parent List Entry and click Apply Changes.
If you rerun the application you should now see the updated sub-menu structure.


The above example show the default Navigation Menu with the new Universal Theme, which is a side menu. To make it into a top navigation menu with a drop down sub-menus:

  • Go to Shared Components > User Interface Attributes.
  • Edit the Desktop theme.
  • Click on the Navigation Menu tab, and make the following changes:

If you refresh the page the Navigation Menu will now be at the top of the page and has the drop down menu/sub-menu.


1 comment:

  1. hi experts

    I would like to get some functionality like your examples but Im using Apex 4.2

    Now I have a menu like parent --> child but in pl/sql with css and others tools

    I would like to put all in new end user screen in Apex its possible?

    ReplyDelete