In Oracle APEX, the Navigation Menu is a key component of an application’s user interface, helping users navigate between different pages. By default, the Navigation Menu appears on the side panel, but you can configure it to display at the top of the page for a more streamlined layout.
Steps to Move the Navigation Menu to the Top
Access the Application Settings
Open App Builder and select your application.
Navigate to User Interface Attributes
Click Shared Components from the Application Home page.
Under User Interface, select User Interface Attributes.
Modify Navigation Menu Settings
Locate the Navigation Menu section.
Choose Position and select Top instead of Side.
Adjust menu behavior, such as dropdown style or horizontal alignment.
Save Changes
Click Apply Changes to update the menu position.
Result: The Navigation Menu will now appear at the top of every page instead of being displayed as a collapsible side menu.
Comparison of Side vs. Top Navigation Menu Settings
Side Menu (Default Settings)
Typically displayed as a collapsible panel on the left side.
Provides more space for menu items.
Best for applications with many navigation options.
Top Menu (Modified Settings)
Displays navigation links in a horizontal format at the top.
Creates a more compact and modern UI.
Best for applications with fewer top-level navigation options.
Additional Customization Options
Styling: Modify CSS classes for spacing, background colors, and fonts.
Dropdown Menus: Enable hierarchical navigation for multi-level menus.
Icons & Badges: Enhance visibility by adding icons next to menu items.
Responsive Design: Test menu behavior on mobile devices for better adaptability.
By configuring the Navigation Menu to appear at the top, you can enhance the user experience by providing quick access to essential pages while maintaining a clean and structured layout. 🚀
EXAMPLE:
Navigate to the User interfaces Attributes
Application > Shared Components > User Interfaces Attributes
User Interfaces Attributes > Navigation Menu
----- Here are the settings for “Side” menu.
User Interfaces Attributes > Navigation Menu
----- Here are the settings for “Top” menu.
Should look like this:
