Menus - UI Guidelines

(This article discusses when to use certain types of menus. For coding examples, see this article.)

When a scene has multiple commands or content choices, organize them into a menu. There are several types of menus. Some menus open to show a list of commands, and others cycle through available choices by tapping or typing in the field area.

Text space is limited. Therefore, keep command names short and use title capitalization (like for a book).

The following table provides additional information with image examples.

Menu Description Example
Application

Located at the top of the scene in the status bar. Tap the label or triangle to open/close the menu. Applications can insert additional commands in each scene, as needed. Implemented by using Mojo.Menu.appMenu.


By default, the Application menu includes the following commands:

  • Edit:
    • This is always the first menu command.
    • This is a submenu, which is indicated by the right-side triangle, containing the Cut, Copy, and Paste commands. Tap the row to open/close the submenu.
    • Automatically enabled when the cursor enters a text field.
  • Scene-based commands : Try to limit these to four commands. If adding more than four, the user has to scroll the menu to see the entire list.
  • Preferences & Accounts:
    • Appears in every scene's Application menu when there are preferences and/or account settings used to connect to one or more services.
    • If there are no preferences or account settings, exclude this item from the Application menu for all scenes.
    • If your application has either Preferences or Accounts, include the command in all scenes and name it either "Preferences" or "Accounts". If your application has both Preferences and Accounts, display "Preferences" first, followed "Accounts".
  • Help: Opens the application's Help feature.
Submenu

Some menu commands have multiple options. In these cases, create a submenu that lists the available options for the given menu command. Examples are the Edit and New submenus in the Calendar application menu.

View Menu A View Menu automatically displays a Fixed Header with a pop-up menu. The items in the pop-up menu in the right-side area control the contents in the scroll view below. Implemented by using Mojo.Menu.viewMenu.
Pop-up

Pops up when tapped, and displays a set of available choices where only one can be chosen. For example in the Contacts app, edit a contact and enter a phone number, and then tap the inline pop-up menu to the right of the text field to select the type of phone number (e.g., mobile, etc.). Implemented by using the Mojo.Widget.ListSelector API.

popup menu
Date Picker

This set of pop-up menus display the month, day, and year. Tap each menu to choose a value, or type while the focus is on a particular menu to select a value (in the example, the focus is on the month menu). Implemented by using the Mojo.Widget.DatePicker API.

Time Picker This set of pop-up menus display the hours, minutes, and AM or PM. Tap each menu to choose a value, or type while the focus is on a particular menu to select a value. Implemented by using the Mojo.Widget.TimePicker API.
Integer Picker This pop-up menu contains numeric values. Set the minimum and maximum values. Tap the menu to choose a value, or type while the focus is on the control to select a value. Implemented by using the Mojo.Widget.IntegerPicker API. See day and year in Date Picker.