Menu Bar

  • 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

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.

In line with the key principles, AIMMS advises to use no more than 6 columns and 3 levels of nested hierarchy (though the platform supports a maximum of 7 columns and 5 levels of nested hierarchy).

Using 6 columns and 3 levels gives a theoretical maximum of 700 pages; if more than that are needed, you may want to reconsider the app architecture.

Top Menu Bar

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.

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

Drop-downs

Menu

The menu supports up to 5 levels of hierarchy. However, AIMMS recommends using no more than 3.

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

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.

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.

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 scrollbar does not cause the menu elements to shift horizontally.)

States

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

The current page is colored blue.