Author: Jan Rojcek
1. Introduction
This document is the user experience specification for the JavaFX Menu bar control.
2. Overview
A Menu bar is a container control for menu buttons through which the enduser can access application menus. Menu bar is available only on Desktop platform. To access menus on Mobile and TV, developers typically provide toolbars or custom menus built from list or menu button controls.
3. Introduction
As a Menu bar is a container control, endusers primarily interact with menu buttons located inside it. Menu buttons are specified in a separate UE spec. This document just defines specifics for menu buttons when they are placed inside the menu bar. Menu bar itself handles:
- its location
- layout of menu buttons
- pointer access to menu buttons
- keyboard access to menu buttons
- some menu button specifics
Behavior and location of Menu bar on desktop platform is platform specific. On Windows, Linux and Solaris, it is located between Title bar and Toolbar. On Mac, it is located on the dedicated spot outside of application window. On Mac, Menu bar is fully controlled and behaves according to Mac OS standards, therefore this specification does not cover its behavior on Mac OS.
Figure 1 Menu bar placement on desktop platform
4. Detailed Behaviors
Layout
Menu bar layout is simple. It lays menu buttons into a single row with defined spacing between buttons and margin around the menu bar. When there is not enough room to fit all buttons into a single row, the buttons that do not fit in are simply hidden. The reason is that an application should be designed in a way that its menu fits in on targeted screen resolutions and application window size. Developers should have an option to block window resizing below the level where menu buttons do not fit in.
Note: We may reconsider this and apply similar approach to showing toolbar items that do not fit into the decreased toolbar width.
Figure 2 Menu bar layout
Figure 3 Shortened menu bar when it does not fit in
Menu buttons
Behavior of menu buttons inside the menu bar is slightly different from menu buttons placed elsewhere. The difference is in hover behavior. When all menu buttons are in normal state and pointer hovers above them, the button below the pointer switches to a hover state. When the user clicks on a button, it switches to a selected state and opens the associated menu. When a menu is open, it changes the hover behavior of other menu buttons. They immediately become selected and open their menu, if the pointer hovers above them. There is no hover state present if there is an open menu.
If the users closes an open menu, for example by pressing the ESC key, the hover behavior resets to the original hover state.
Another difference is described in keyboard support section.
Figure 4 Menu button states
Table 1 Pointer gestures on Menu bar items
| Pointer Gesture | Behavior |
| Hover | If no menu is open, it switches the underlying menu button to hover state. If a menu is open, it switches the underlying menu button to selected state (and opens the associated menu). |
| Left Button Press | Handled by the individual Menu bar control (opens or closes menus). |
States
Table 2 Menu bar states
| State | Description |
| Normal/Enabled | All menu buttons inside Menu bar are enabled (unless they are disabled individually). |
| Open (?) | It is a question whether it is a special state. When some menu is open, the hover behavior and also keyboard behavior is different than with no open menu. See above for details. |
| Disabled | All menu buttons inside Menu bar are disabled. |
5. Keyboard Support
To get keyboard focus into the Menu bar, the user can press the Alt key or F10 key (CTRL+F2 on Mac) and the first menu button switches to hover state. When the focus is in the Menu bar, the user uses arrow keys (2D traversal) to move focus between menu buttons and menu items inside open menus. To open a menu, the user presses the down key.
When a menu is open, it behaves according to definition in Menu spec. One notable difference is if a menu item is selected and the user presses a Left or Right arrow key, it closes the menu and opens the menu associated with the adjacent menu button. If it is a leftmost (or rightmost) menu and the user presses the Left key (Right key) it opens the menu associated with the rightmost (leftmost) button.
Figure 5 Selected button and menu item
Table 3 Menu bar keyboard support
| Key | Behavior |
| Alt (Windows only) | Show mnemonics when ALT is down. Show mnemonics and select first menu item in the menu bar when ALT is released. If a menu item is selected, pressing ALT removes selection as well as mnemonics from the menu bar. |
| F10 (CTRL+F10 on Mac) | Switch mnemonics ON and select first menu item in the menu bar. Pressing F10 again keeps the mnemonics ON, but removes selection from the menu bar. Please note that mnemonics are not displayed on Mac. |
| Left/Right | Moves selection between menu buttons. See above for details. |
| Down | The Down key opens a menu associated with selected menu button. |
| ESC | It closes open menus, removes selection from the MenuBar and moves it to the control that had it before. |
3.5 Desktop - Attributes
Table 4 Menu bar attributes on desktop platform
| Attribute name | Description | Values |
| Margin | Defines the number of pixels between the edges of Menu bar and Menu bar items. Default: TBD. | Number of pixels. |
| Insets | Defines the number of pixels between two Menu bar items. Default: TBD. | Number of pixels. |
Overview
Content Tools
ThemeBuilder