MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Header

A header labels the active view. In addition, it can contain top-level navigation and inputs for the active view. See the Coding guide for information on implementing headers in your apps.

Characteristics

  • A header is a horizontal bar the full width of the screen, which appears at the top of the screen in most apps.
  • Headers float above content, with the option of flowing with content in special instances, such as in the Browser app.
  • The heading's text provides the name of the current view.
  • The heading may optionally include additional text; for example, in an email app, the number of unread messages may be displayed.
  • Headers may include inputs for navigating and manipulating the current view.
  • Most apps (full-screen games being an obvious exception) have a header.

Visuals

Some guidelines for how headers should look and work:

Generic headers
Generic headers should have an orange background.
Headers in media contexts
Headers in media contexts (such as in video players, or camera or photo viewer apps) should have a dark grey background instead of orange.
Header actions
There are never more than two actions placed next to each other in a header.
Action positioning
Negative actions—such as cancel—are always placed on the left. Positive actions—such as "done" or "create"—are always placed on the right. Neutral actions—such as "add" and "edit" are placed in order of priority from right to left.

Default header

Default: with cancel button

Default: drawer

Default: with inputs

Default: disabled "create" button

When a button in the header is disabled, its foreground should be dimmed, without changing its background appearance, as seen here.

Default: edit mode

Default: pressed "create" button

When a button is pressed in the header, it should take on a blue appearance, as shown here.

Default: settings

Here's what a header with the dark grey "media context" background looks like.

Default: pressed "back" button

When a button is pressed in the header, it should take on a blue appearance, as shown here.

Default: settings subheader

The settings app uses subheaders for different sections of the settings options available; these look like this.

Interaction

The mockups below show some use cases for headers.

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, Sheppy
 Last updated by: chrisdavidmills,