Menu Bar

Purpose

A menu bar appears at the top of an application's main window. It provides access to all commands and most of the settings available in an application.

Users refer frequently to the menu bar, especially when they are seeking a function for which they know of no other interface. Ensuring that menus are well organized, are worded clearly, and behave correctly is crucial to the user's ability to explore and access the functionality of the application.

Guidelines

Is this the right control?

A menu bar is mandatory for applications that have a very complex command structure, such as those used for content creation or editing, file manipulation, or other productivity work.
Menu bars are optional for simple apps that are able to expose all functionality using visible buttons and toolbars. If any functionality is not visible by default, err on the side of providing a menu bar.
Don't display a menu bar in secondary or internal windows, like the settings dialog or file dialog. Very small main windows are likewise usually poor candidates for menu bars.
Don't include a menu bar in a convergent application's mobile user interface.

Behavior

Don't have more than nine menu categories within a menu bar. Too many categories are overwhelming and makes the menu bar difficult to use.
At the minimum, all windows should have File, Edit, Settings, and Help menus. If they apply, the window can also have View, Insert, Format, Tools and, Window menus.
Don't put more than 12 items within a single level of a menu. Add separators between logical groups within a menu. Organize the menu items into groups of seven or fewer strongly related items.
Assign shortcut keys to the most frequently used menu items. Use KStandardAction and KStandardShortcut items for common functions, which will result in menu items automatically receiving consistent names, icons, and shortcut keys. Any tool or function that is accessible using a keyboard shortcut must have an item in the menu bar so that users can discover it.
Don't hide the menu bar by default. If this is configurable, users should easily be able to make the menu bar viewable again.
Use submenus cautiously. Submenus add complexity to the interface and are physically more difficult to use, so you should take care not to overuse them.

Appearance

Place the most frequently used items at the top of the menu.
Provide icons for all menu items. Don't re-use the same icon for multiple items.
For your menu items' text, follow the general label guidelines.
Don't change menu items' labels dynamically.
Choose single word names for menu categories. Using multiple words makes the separation between categories confusing.
Disable menu items that don't apply to the current context instead of removing them from view. Exception: It is acceptable to hide menu items completely if they are permanently unavailable on the user's system due to missing hardware capabilities.
Assign shortcut keys to the most frequently used menu items (Ctrl+). For well-known shortcut keys, use standard assignments. Use function keys for commands that have a small-scale effect (F2 = Rename) and ctrl key for large-scale effect (Ctrl+S = Save).
For menu items that toggle some state on or off, always use the positive form. For example, use the text 'Show hidden files' instead of 'Hide hidden files', and don't change the text when hidden files are shown.

Code

Kirigami

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
...
import org.kde.kirigami 2.9 as Kirigami
...

Kirigami.ApplicationWindow {
    ...
    menuBar: MenuBar {
        Menu {
            title: i18n("&File")
            Action { text: i18n("&New...") }
            Action { text: i18n("&Import") }
            Action { text: i18n("&Export") }
        }
        Menu {
            title: i18n("&Edit")
            Action { text: i18n("&Merge contacts") }
            Action { text: i18n("&Search duplicate contacts") }
            Action { text: i18n("&Export") }
        }
        Menu {
            title: i18n("&Settings")
            Action { text: i18n("&Settings") }
            Action { text: i18n("&Configure shortcuts") }
        }
        Menu {
            title: i18n("&Help")
            Action { text: i18n("&Report Bug...") }
            Action { text: i18n("&Donate") }
            Action { text: i18n("&About Addressbook") }
            Action { text: i18n("&About KDE") }
        }
    }
    ...
}

Navigation Tab Bar

Push Button