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 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 fixes the toolbars to either the top or bottom of the viewport on browsers that support CSS fixed positioning (which includes most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others). In browsers that don't support fixed positioning, the toolbars will fall back to static, inline position in the page.

When tap-toggling is enabled, 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. One caveat is that fixed toolbars never truly hide, but toggle between fixed and static positioning. This means that if you're at the top of a page, you can't tap-toggle a header toolbar out of view, as it instead toggles into its spot in the document flow at the top of the page. The same goes for fixed footers when scrolled to the very bottom of a document.

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

A "fullscreen" position mode works just like the fixed mode except that the toolbars overlay the page content, rather than reserving a place in the document when not in fixed mode. 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 hidden or 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.