# jQuery Mobile Toolbars

« Previous
Next Chapter »

## 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:

## Example

<div data-role="footer" style="text-align:center;">
Try it yourself »

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.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples