Ubuntu Wiki

Matthew Paul Thomas, Canonical Design, January 2011

Ubuntu has made several additions to the traditional contents of menus. To preserve good taste, to keep menus recognizable as menus, and to help ensure consistency between menus, this document defines how toolkits should lay out both traditional and new menu elements.

Vertical padding

In the default theme, the amount of padding above the first item in a menu, and below the last item, should be the same as the padding between a separator and the items adjacent to it.

Horizontal padding

In menu layout, as in page layout, horizontal margins should be greater than vertical margins. This is achieved by having a column on each side that is mostly blank.

The leading column (left, in LTR languages) should contain only basic state symbols:

• ✓ a checkmark, for a selected checkmark item
• ⚫ a radio mark, for a selected radio item
• ✳ a spinner, for an item that is in the progress of becoming checked
• ▸ the now-running indicator, for an application that is running.

The trailing column (right, in LTR languages) should only ever contain ▶ the triangle indicating that an item is a submenu title. In addition to keeping the column mostly clear, this makes submenus easy to find when scanning a menu hierarchy.

These leading and trailing columns should be exactly the same width.

Object icons

Any icon that comes before a menu item’s text should be laid out as if it is the beginning of the text, having its leading edge aligned with the edge of the margin (line A in the diagram).

In particular, icons of this sort should not go inside the margin. If we did that, then in a menu where most items had icons, the menu would effectively have lost its horizontal padding. And if we did it only for menus where most items don’t have icons, that would be tastelessly inconsistent.

A menu item should have an icon before its text only where the item represents a dynamic object — an object that could (at least in theory) be added to or removed from the menu, or that is part of a changable set of objects. For example, an application, document, disk, contact, message, calendar event, IM status, wireless network, or bookmark.

If a program’s menu structure is well-designed, menu items of this sort are clustered together, avoiding a jagged appearance. For example, in a “Bookmarks” menu, the items relating to adding or organizing bookmarks (which should not have icons) are typically grouped at the beginning of the menu, and the items representing bookmarks themselves (which should have icons) are grouped below.

Keyboard equivalents

Regardless of how far apart they are, all keyboard equivalents in a menu should be aligned by the leading edge of the first non-modifer key. For example, in an LTR menu that contains items with “Ctrl E” and “Alt Ctrl Space” as keyboard equivalents, the left edge of “E” should be aligned with the left edge of “Space”.

The leading edge of the keyboard equivalent for one item may overlap with the trailing edge of the primary text for any other non-adjacent item (i.e. any item that is at least two items away).

Needs illustration.

Counts and other properties

A text item that does not have a keyboard equivalent may have a count — for example, the number of new messages in a mailbox. Or it may have some other property conveyable by very short text, such as a price (“$0.99”), an age in minutes (“32m”), or a time (“10:52”) — or by an icon, such as encrypted state (“”).

When a count is presented in a lozenge, or other status text or icons of this sort are shown inside a menu item, their trailing edge should line up with the edge of the trailing column (line D in the diagram).

Switches

Where an item has an OFF/ON switch, its trailing edge should be aligned with the trailing margin, just as for counts and other properties.

Custom controls

Where a text field, slider, calendar, or any other control is embedded in a menu, the boundaries of the control and any labels should be the same as for a normal text-only menu item (lines A and D in the diagram).

Grid layout

Where a large number of items need to be presented that can be shown solely as icons (e.g. emoticons in an IM client), they can use a grid layout. Every item in the grid should have the same width, and the grid as a whole should follow the usual margins.