The toolbar widget is used to enhance headers and footers.
The header is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the left and/or right of the title for navigation or actions.
The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. The framework add class
ui-title to headings that are immediate children of toolbars. All heading levels with class
ui-title are styled identically by default to maintain visual consistency.
The footer is a toolbar at the bottom of the page that can contain a wide range of content, from form elements to navbars.
The footer bar has the same basic structure as the header except it uses the
data-role attribute value of
footer. Headings that are immediate children of the footer get class
ui-title, just like headers.
Powered by jQuery Mobile
The header and footer toolbar inherit the theme swatch from the page by default but you can easily set the theme swatch color. If you use external fixed toolbars you always have to set a theme, because there is no parent page from which they can inherit the theme.
If you want to use the same toolbar on multiple pages, you can use external toolbars.
Toolbars can be set to fixed position by adding the
data-position="fixed" to the header or footer. This will make them remain at the top (header) or bottom (footer) of the window at all time instead of scrolling with the page. See fixed toolbars.
The toolbars can be set to fullscreen fixed position that overlays the toolbar over the content by adding the
data-fullscreen="true" to a fixed header. See fullscreen toolbars.
External fixed toolbars
See persistent toolbars.
Buttons in toolbars
The framework automatically enhances links in toolbars as buttons with inline and mini style, but this has been deprecated in version 1.4. The same goes for positioning the first two buttons in a header left and right if they are immediate child of the header. The demos below prepare you for the next version.
Header button position classes
You can use the
ui-btn-right classes to position buttons in the header.
Buttons in headers without a heading
The heading in the header bar has some margin that will give the bar its height. If you choose not to use a heading, you will need to add an element with
class="ui-title" so that the bar can get the height and display correctly.
Buttons in footers
ui-btn-right were not meant to be used in footers, because they do not account for the possible presence of text, navbars, and and other elements often present in footers. You can nevertheless achieve a similar effect when you add a bit of custom CSS.
Adding back button to header
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's
addBackBtn option is true. This can also be set via markup if the header has a
If you use the attribute
If you just want a reverse transition without actually going back in history, you should use the
Customizing the back button text
If you'd like to configure the back button text, you can either use the
data-back-btn-text="previous" attribute on your header element, or set it programmatically via the toolbar plugin's options:
$.mobile.toolbar.prototype.options.backBtnText = "previous";
Default back button style
If you'd like to configure the back button theme, you can use:
$.mobile.toolbar.prototype.options.backBtnTheme = "a";
If you're doing this programmatically, set this option inside the
mobileinit event handler.
See navbar for examples of navigation bars inside toolbars.
To group buttons into a button set, wrap the links in an element with
By default, toolbars don't have any padding to accommodate nav bars and other widgets. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and add class
ui-bar to that element or apply your own padding rule in your custom CSS.