jQuery Mobile Toolbars

Toolbar elements are usually located within the header and footer - making navigation easy to access:

Header Bar

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

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

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

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

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

	The header can contain one or two buttons, while the footer has no limit.

Footer Bar

The footer bar is more flexible than the header bar - it is more functional and versatile throughout the page, so it can contain as many buttons as you want:

Note:The footer is styled differently from the header (no padding and spacing, and buttons are not centered). We can use simple styling to fix this:

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

Positioning Header and Footer Bars

Header and footer can be positioned in three ways:

• Inline - Default. Header and footer bars are inline with the page content.
• Fixed - Header and footer bars are fixed at the top and bottom of the page.
• Fullscreen - Basically the same as Fixed positioning mode, the header and footer bars are fixed at the top and bottom of the page. However, when the toolbar scrolls off the screen, it will not automatically reappear unless you tap the screen. This is very useful for image or video applications that enhance immersion. Note that in this mode the toolbar will cover the page content, so it is best used in special situations.

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

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

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

Tip:In fixed and fullscreen positioning, tapping the screen will hide and show the header and footer bars.

More Examples

Display Icons Only on Toolbars
To display only icons on toolbars, you can use the ui-btn-icon-notext class.