DOCUMENTATION

  • WebUI
    • Getting Started
      • Requirements
      • Technical Background
      • Creating a WebUI
      • Introduction to Colors in WebUI
      • User Insights
      • Publishing on AIMMS PRO
      • Quick Start: My First WebUI App
    • WebUI App Development
      • App Menu Bar
      • Page Menu
      • Page Manager
        • WebUI Classic Pages
        • WebUI Grid Pages
        • Side Panels
        • Side Panel Grid Pages
        • Dialog Pages
        • Dialog Grid Pages
      • Page Settings
      • Widget Manager
      • Widget Types
        • Bar Chart Widget
        • Bar-Line Chart Widget
        • Bubble Chart Widget
        • Button Widget
        • Combination Chart Widget
        • Diagram Widget
        • Download Widget
        • Gantt Chart Widget
        • Group Widget (DEPRECATED)
        • Iframe Widget
        • Image Widget
        • Label Widget
        • Legend Widget
        • Line Chart Widget
        • List Widget
        • Map Widget
        • Pie Chart Widget
        • Scalar Widget
        • Selection Widgets
        • Selection Box V2 Widget
        • Slider Widget
        • Tabbed Widget
        • Table Widget
        • Text Widget
        • Tree Map Widget
        • Upload Widget
      • Widget Header Bar
      • Widget Options
      • Data Manager
      • Application Management
      • Application Settings
        • Miscellaneous Application Settings
        • Workflow Panels
        • Status Bar
        • Time Zone Settings
        • Application Defaults Settings
      • Feature Mapping for WebUI
      • Experimental Features
      • Development Stages
      • Data Coloring and Palettes
    • WebUI Folder
      • WebUI JSON
      • WebUI Resources
      • CSS Styling
      • Theming
      • Understanding Theming
      • Support for Units of Measurement
      • Multi-Language Support
    • WebUI System Library
    • Developing Custom Widgets (DEPRECATED)
  • WebUI Release Notes
  • aimms
WEBUI Documentation
AIMMS Logo
  • Documentation »
  • WebUI »
  • WebUI App Development »
  • Page Menu
  • Edit on Github
Help & feedback

Table Of Contents
  • Page Menu
    • Top Menu Bar
    • Bottom Menu Bar
    • Specifying the Content
    • Custom Positions for Widgets
    • Adapting Your Custom CSS
    • The Old Style Menu

Page Menu

From AIMMS 4.53.1 onwards, we offer a newly designed Page Navigation Menu. This menu helps you find your way around AIMMS Apps and get a general overview much more easily. As this new menu will become the new default, your existing Apps will change automatically. The menu looks like this:

_images/page_menu_new453.png

The Menu Bar is the primary tool for navigation through AIMMS applications. It consists of two parts: the Top Menu bar and the Bottom Menu Bar.

The menu supports up to a maximum of six columns on one row (width 1024 pixels). AIMMS recommends using no more than that, but the menu does support it if needed by introducing a second row; even adding a 7th column if possible due to wider screen usage. The menu supports up to 10 menu items and five levels of hierarchy. However, AIMMS recommends using no more than three giving you a theoretical 600 pages (6x10x10). If more are needed it could be wise to reconsider the app architecture. We also provide a short demonstration video of the new menu.

_images/PageMenu_Example_6column.png

Top Menu Bar

_images/PageMenu_TopMenuComponents.png

The Top Menu Bar gives users app-level information. From left to right:

  • Button to AIMMS PRO. In the future, this will be the button for the Launchpad and AIMMS Store.

  • Icon for the app.

  • Name of the app.

  • Menu button

  • Name of the user with a drop-down. Content of the drop-down is to be determined.

  • Notifications with the number of unread items and a drop-down.

  • Settings icon with a drop-down

States of the Menu Bar

Menu items that fold open are one shade darker and have a blue icon.

The current page is colored blue.

_images/PageMenu_States.png

Menu Grid

The menu has a maximum of 7 columns, with gutters of 12 pixels. Margins on either side are 2%, with a total max-width of the menu of 1200px (minus margins).

_images/PageMenu_Grid1.png _images/PageMenu_Grid2.png

Narrow viewport

The menu is designed to fit well on a viewport of a minimum of 1024px. When the viewport is smaller than that, the columns that do not fit move to the next row.

_images/PageMenu_NarrowViewport.png

Wide viewport

The menu is designed with max 6 columns in mind, however it supports up to 7 columns next to each other on viewports wider than 1024px.

_images/PageMenu_WideViewport.png _images/PageMenu_WideViewport2.png

Vertical overflow

When the height of the menu is higher than the viewport, the Close button becomes sticky at the bottom of the page, and the content becomes scrollable. (The scroll bar does not cause the menu elements to shift horizontally.)

_images/PageMenu_VerticalOverflow.png

Bottom Menu Bar

The Bottom Menu Bar show the AIMMS logo with a link to the AIMMS homepage and a breadcrumb to the current page. It is “sticky” (remains in view at the bottom of the viewport)

_images/PageMenu_BottomMenuComponents.png

The bottom menu bar also includes the Status Bar and the Time Zone Settings when these components are configured.

Specifying the Content

The developer of a WebUI app can create a page tree by using the Page Manager, which determines the content of the Page Menu.

Custom Positions for Widgets

If you have defined custom position for widgets, that you had placed right at the top with the old menu style, those widgets might be partially overlapped with the new menu bar. To fix this, just move these widgets slightly, so they don’t overlap anymore. This change is a one time change.

Adapting Your Custom CSS

If you already use custom CSS code to style your app, you might find out that things do not look as expected with the new menu. In order to fix that, we lay out the steps for that in this document.

The Old Style Menu

The old Page Menu (available from AIMMS 4.40 to 4.52) that is visible in the Menu Bar also contained all the pages that a user currently has access to, but was more restricted:

_images/pagemanager-menu.png
  • By clicking on the page names, you can visit the pages.

  • Little triangles indicate that there were subpages available. By hovering over the parent page name, the subtree will appear.

Reverting to the Old Style Menu

Realizing not everybody is immediately ready for this change, or possibly has custom CSS that needs changing, we provide a way of going back to the old menu style in AIMMS 4.53+. In this repository, you can find 2 .css files and 1 .js file, which you need to download and copy into your MainProject\WebUI\resources\css folder. After restarting your WebUI, you will have the old style menu back.

Hiding Sidepanels in the Old Style Menu

With the introduction of Sidepanels from AIMMS version 4.64, any sidepanels added to the page manager will also show in the old style menu.

To hide the sidepanel pages in the menu, please add the below HTML code to the “header-override.css“ file that you had copied into your CSS folder, as mentioned above.

.menu .sidepanel, header .menu .sidepanel li.hasChildren ul li{
        display: none !important;
}
Last updated: Jul 11, 2024

Help & Feedback

Docs

Edit this page to fix an error or add an improvement in a pull request
Create an issue to suggest an improvement to this page

Product

Create a topic if there's something you don't like about this feature
Propose functionality by submitting a feature request

Support

Not what you where looking for? Search the docs

Remember we also have Community support

Still having trouble ? Reach out to us


Next Previous

AIMMS
AIMMS COMMUNITY
AIMMS DOCS
DISCLAIMER
PRIVACY STATEMENT
© 1989 - 2025 AIMMS B.V.