jQuery Mobile Toolbars

Toolbars are typically placed inside the header and footer to make navigation easily accessible:

Header Bar

The header bar usually contains the page title/logo or one to two buttons (typically home, options, or search).

You can add buttons to the left or right of the header.

The following code will add a button to the left of the header title text and a button to the right of the header title text:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome to My Homepage</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

The following code will add a button to the left of the header title text:

Example

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome to My Homepage</h1>
</div>

However, if you place the button link after the <h1> element, the text on the right will not be displayed. To add a button to the right of the header title, specify the class as "ui-btn-right":

Example

<div data-role="header">
  <h1>Welcome to My Homepage</h1>
  <a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>

| | The header can contain one or two buttons, while the footer has no restrictions. | | --- | --- |

Footer Bar

The footer bar is more flexible than the header bar - they are more functional and variable throughout the page, so they can contain as many buttons as needed:

Example

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Facebook</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Twitter</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Instagram</a>
</div>

Note: The styling of the footer is different from the header (no padding and space, and buttons are not centered). We can use simple styles to solve this problem:

Example

<div data-role="footer" style="text-align:center;">

You can also group buttons horizontally or vertically in the footer:

Example

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Facebook</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Follow me on Instagram</a>
  </div>
</div>

Positioning Header and Footer Bars

Headers and footers can be positioned in three ways:

• Inline - Default. The header and footer bars are inline with the page content.
• Fixed - The header and footer bars are fixed at the top and bottom of the page.
• Fullscreen - Similar to Fixed positioning, the header and footer bars are fixed at the top and bottom of the page. However, they do not automatically reappear when scrolled out of the screen unless clicked, which is useful for applications with photos or videos to enhance immersion. Note that this mode covers the page content, so it's best used in specific occasions.

Use the data-position attribute to position the header and footer bars:

Inline Positioning (Default) data-position="inline"

Fixed Positioning data-position="fixed"

To enable fullscreen positioning, use data-position="fixed" and add the data-fullscreen attribute to the element:

Fullscreen Positioning data-fullscreen="true"

Tip: Fullscreen positioning is suitable for photos, images, and videos.

Tip: In fixed and fullscreen positioning, the header and footer bars can be hidden and shown by tapping the screen.

More Examples

Displaying Icons Only on Toolbars