Toolbar basics

Toolbar types

In jQuery Mobile, there are two standard types of toolbars: Headers and Footers.

• The Header bar serves as the page title, is usually the first element inside each mobile page, and typically contains a page title and up to two buttons.
• The Footer bar is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.

It's very common to have a horizontal navigation or tab bar inside the header and/or footer; jQuery Mobile includes a navbar widget that turns an unordered list of links into a horizontal button bar, which works well in these instances.

View the data- attribute reference to see all the possible attributes you can add to toolbars.

Toolbar positioning options

Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "inline" positioning mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.

A "fixed" positioning mode provides the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript. The toolbars start in their natural positions on the page, like the "inline" mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.

At any time, tapping the screen will toggle the visibility of the fixed toolbars: tapping the page when the toolbars aren't visible brings them into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.

To set this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.

A "fullscreen" position mode works just like the fixed mode except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to fill the whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit over page content so this is best used for specific situations.