MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Coding guide: Header

    This article is in need of a technical review.

    Download resources

    This article presents examples and coding instructions for creating headers in your Firefox OS apps. You'll also find downloads for the CSS and image resources needed to match the appearance of headers presented in this user experience guide, and to match the appearance of the headers in the built-in apps. You can simply copy these resources into your app.

    Implementing headers

    To implement a header using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

    @import url(resources/headers.css);

    Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

    Standard icon buttons

    The following list provides an example of the Firefox icons provided in the standard Gaia style resources:

    Button Name Image Class
    Add icon-add
    Back icon-back
    Close icon-close
    Compose icon-compose
    Edit icon-edit
    Menu icon-menu
    Reply icon-reply
    Reply All icon-reply-all
    Send icon-send
    User icon-user

    Note: To find the latest up-to-date icons, consult the Gaia source code on Github.

    To insert a button into your header, create a <menu> of type "toolbar" and use the corresponding class for each item in the toolbar. This is demonstrated in many of the Examples.

    Note: In a right-to-left locale, the back button is actually located at the right side of the screen, and points to the right.

    Examples

    Simple headers

    This example demonstrates some simple headers; it shows several headers in one display (in a real app, you would only have one primary header and possibly a secondary header).

    With add and edit buttons

    This header includes a toolbar that offers edit and add buttons at its right end.

    <section role="region">
      <header>
        <menu type="toolbar">
          <a href="#"><span class="icon icon-edit">edit</span></a>
          <a href="#"><span class="icon icon-add">add</span></a>
        </menu>
        <h1>Messages</h1>
      </header>
    </section>
    

    With a back button and edit button

    The toolbar in this header has a back button at the left end and an edit button at the right.

    <section role="region">
      <header>
        <a href="#"><span class="icon icon-back">back</span></a>
        <menu type="toolbar">
          <button><span class="icon icon-edit">edit</span></button>
        </menu>
        <h1>Jane Doe</h1>
      </header>
    </section>

    With a drawer menu button

    This header adds a button to open a drawer at the left, in addition to edit and add buttons at the right.

    <section role="region">
      <header>
        <button><span class="icon icon-menu">menu</span></button>
        <menu type="toolbar">
          <button><span class="icon icon-edit">edit</span></button>
          <button><span class="icon icon-add">add</span></button>
        </menu>
        <h1>Inbox <em>(2)</em></h1>
      </header>
    </section>
    

    With a close button

    This example presents a header with a close button as well as a "Done" button, then a subheader below it.

    <section role="region">
      <header>
        <button><span class="icon icon-close">close</span></button>
        <menu type="toolbar">
          <button>done</button>
        </menu>
        <h1>Title</h1>
      </header>
      <header>
        <h2>Subheader text</h2>
      </header>
    </section>
    

    CSS

    section[role="region"] {
      margin-bottom: 1.5rem;
      position: relative;
    }

    Working demo

    You can try out the action menu in this live demonstration.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Headers with inputs

    Including a search box in a header is as simple as including a form with the search box and a button to reset the form. In this case, it's a search box for a person in an address book.

    <section role="region">
      <header>
        <button><span class="icon icon-back">back</span></button>
        <menu type="toolbar">
          <button><span class="icon icon-user">user</span></button>
        </menu>
        <form action="#">
          <input type="text" placeholder="search" required="required">
          <button type="reset">Remove text</button>
        </form>
      </header>
    </section>
    

    CSS

    section[role="region"] {
      margin-bottom: 1.5rem;
      position: relative;
    }

    Working demo

    You can take a look at these headers in this live demonstration.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Using the dark theme

    Media apps are encouraged to use the dark theme for their headers; you apply this theme to a header by using the class "skin-dark". The code below shows a simple media header:

    <section role="region" class="skin-dark">
      <header>
        <h1>Song title</h1>
      </header>
    </section>
    

    This code shows a header for a song's detail page, which would show extra information about a song. It has a subheader, and also a back button to return to the main music player view.

    <section role="region" class="skin-dark">
      <header>
        <a href="#"><span class="icon icon-back">back</span></a>
        <h1>Song title</h1>
      </header>
      <header>
        <h2>Subheader text</h2>
      </header>
    </section>
    

    CSS

    section[role="region"] {
      margin-bottom: 1.5rem;
      position: relative;
    }

    Working demo

    These simple dark "media" theme headers are demonstrated in this live sample.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Using the organic theme

    The "organic" theme, which you use by applying the class "skin-organic", is used by settings panels, primarily. Here, the class is applied to a <div> surrounding the header, so that we don't have to individually apply it to each element in the header, but you can do it either way.

    <div class="skin-organic">
      <section role="region">
        <header>
          <h1>Settings</h1>
        </header>
        <header>
          <h2>Subheader text</h2>
        </header>
      </section>
    
      <section role="region">
        <header>
          <a href="#"><span class="icon icon-close">close</span></a>
          <h1>Settings</h1>
        </header>
        <header>
          <h2>Subheader text</h2>
        </header>
      </section>
    </div>
    

    CSS

    section[role="region"] {
      margin-bottom: 1.5rem;
      position: relative;
    }

    Working demo

    You can take a look at these example settings panel headers in this live demonstration.


    Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.

    Document Tags and Contributors

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