Header bar menus

Header bars can include a menu which contains actions and options for the current view. These menus are located at the far right side of the header bar.

While the most frequently used actions for a view should be placed directly in the header bar, a header bar menu provides access to lesser-used actions. This ensures that the header bar isn’t overwhelmed with less interesting or useful controls.

In this way, the header bar menus help to create focused views that guide the user towards the most interesting and useful functionality.

When to use

Use a header bar menu to present additional actions or options for the current view. They are best used when those actions or options are not used the majority of the time - if there is a set of actions which deserve more prominence in the view, an action bar might be a better choice.

Header bar menus are not a good choice for performing actions on selected content: when content hasn’t been selected, the menu will contain unhelpful insensitive menu items, and when content has been selected, possible actions will not be advertised. Selection mode or popovers are a better choice for this situation.

Guidance

  • Header bar menus should only contain actions for the current view or window - this differentiates their content from application menus.

  • Follow the standard guidelines for menus.

  • A header bar menu is contained within a popover. As such, a header bar menu can include a variety of controls, such as groups of buttons.

  • Header bar menus shouldn’t include a close menu item, since this action is already provided by the header bar. It can also be ambiguous as to what a close menu item refers to.