mozilla
Your Search Results

    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: Sheppy, chrisdavidmills
    Last updated by: chrisdavidmills,