jQuery Mobile Toolbars
Toolbar elements are often placed inside headers and footers - for "easy-access" navigation:
Header Bars
The header is located at the top of the page and usually contain a page title/logo or one or two buttons (typically home, options or search).
You can add buttons to the left and/or to the right side in the header.
The code below, will add a "Home" button to the left and a "Search" 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>
Try it Yourself »The following code will only add a button to the left side of the header title:
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>
Try it Yourself »The following code will only add a button to the right side of the header title:
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>
Try it Yourself »A header can contain one or two buttons, while the footer has no limit.
Footer Bars
The footer is located at the bottom of the page.
The footer is more flexible than the header - it is more functional and changeable throughout pages, and can therefore contain as many buttons as needed:
Example
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
Try it Yourself »Tip: The buttons in the footer are not centered by default. To fix this, simply use CSS:
You can also group buttons in the footer horizontally or vertically:
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">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>
Try it Yourself »Positioning Headers and Footers
The header and the footer can be positioned in three ways:
- Inline - Default. Headers and footers are inline with the page content
- Fixed - Headers and footers will remain positioned at the top and bottom of the page
- Fullscreen - Behaves like fixed; headers and footers will remain positioned at the top and bottom, but also over the page content. It is also slightly see-through
Use the data-position attribute to position your headers and footers:
Inline Position (Default)
<div data-role="header" data-position="inline"></div>
<div data-role="footer"
data-position="inline"></div>
Try it Yourself »Fixed Position
<div data-role="header" data-position="fixed"></div>
<div data-role="footer"
data-position="fixed"></div>
Try it Yourself »To enable the fullscreen position, use data-position="fixed" and add the data-fullscreen attribute to the element:
Fullscreen Position
<div data-role="header"
data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true"></div>
Try it Yourself »Tip: The fullscreen position is ideal for photos, images and videos.
Tip: Tapping the screen will hide and show headers and footers for both fixed and fullscreen positions.
More Examples
Displaying only the icon in toolbars
Using the ui-btn-icon-notext class to only display the icon in header and footer buttons.