##

Demos

Menu Search

# Toolbar

## Headers

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.

## Header markup

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. All heading levels are styled identically by default to maintain visual consistency.

# Page Title

## Fixed position

The header can be set to fixed position by adding the `data-position="fixed"` to the header. See fixed toolbars.

## Fullscreen position

The header can be set to fullscreen fixed position that overlays the toolbars over the content by adding the `data-fullscreen="true"` to a fixed header. See fullscreen toolbars.

## Theme

The `header` toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.

# Page Title

Headers can optionally be positioned as fixed so they remain at the top of the screen at all times instead of scrolling with the page.

## Buttons

The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.

Cancel

# My App

Save

## Making buttons visually stand out

Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. To make a button visually stand out add a `data-theme` attribute to set the button swatch for contrast.

Cancel

# Edit Contact

Save

## Button position classes

The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of `ui-btn-left` or `ui-btn-right` to the anchor.

# Page Title

Options

## Buttons in toolbars 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.

Options

## Adding Back buttons

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 page div has a `data-add-back-btn="true"` attribute.

If you use the attribute `data-rel="back"` on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.

If you just want a reverse transition without actually going back in history, you should use the `data-direction="reverse"` attribute.

## 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 page element, or set it programmatically via the page plugin's options:
`$.mobile.page.prototype.options.backBtnText = "previous";`

### Default back button style

If you'd like to configure the back button role-theme, you can use:
`$.mobile.page.prototype.options.backBtnTheme = "a";`
If you're doing this programmatically, set this option inside the mobileinit event handler.

## Custom header configurations

If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as `div`. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.

It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the `ui-bar` class to apply standard bar padding and add the `ui-bar-b` class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)

### I'm just a div with bar classes and a mini inline Button

Note that `.ui-bar` should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element instead.

By writing some simple styles, it's easy to build message bars like this:

### This is an alert message.

Dismiss

And here's some additional text in a paragraph.

## Footers

The footer is a toolbar at the bottom of the page that can contain a wide range of content, from form elements to navbars.

## Footer markup

The `footer` bar has the same basic structure as the header except it uses the `data-role` attribute value of `footer`. The `footer` toolbar will be themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.

Add Up Down

The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers. Since footers do not have the same prescriptive markup conventions as headers, we recommend using layout grids or writing custom styles to achieve the design you want.

Any link or valid button markup added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to inline styling so the button is only as wide as the text and icons it contains.

By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a `class="ui-bar"` to the footer.

Note that `.ui-bar` should not be added to header or footer bars that span the full width of the page, as the additional padding will cause a full-width element to break out of its parent container. To add padding inside of a full-width toolbar, wrap the toolbar's contents in an element and apply the padding to that element.

## Grouped buttons

To group buttons into a button set, wrap the links in an element with `data-role="controlgroup"` and `data-type="horizontal"` attributes.

`<div data-role="controlgroup" data-type="horizontal">`

This creates a grouped set of buttons:

Add Up Down

## Adding form elements

Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar. We recommend using mini-sized form elements in toolbars by adding the `data-mini="true"` attribute:

Shipping:

## Fixed & Persistent footers

In situations where the footer is a global navigation element, you may want it to appear fixed so it doesn't scroll out of view. It's also possible to make a fixed toolbar persistent so it appears to not move between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.

To make a footer persistent between transitions, add the `data-id` attribute to the footer of all relevant pages and use the same `id` value for each. For example, by adding `data-id="myfooter"` to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to `data-position="fixed"` so they are in view during the transition.

- Menu
- Home
- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo

- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo