jQuery Mobile Navigation Bars
A navigation bar consists of a group of links that are aligned horizontally, typically within a header or footer:
The bar is coded as an unordered list of links wrapped inside a <div> element that has the data-role="navbar" attribute:
Example
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Try it Yourself »By default, links inside a navigation bar will automatically turn into a
button (no need for class="ui-btn"
or data-role="button").
The buttons are, by default, as wide as its content. Use an unordered list
to divide the buttons equally: 1 button takes 100% of the width,
2 buttons share 50% each, 3 buttons 33.3%, etc. However, if you specify more
than 5 buttons in the navbar, it will wrap to multiple lines (see "More
Examples" below).
Icons in Navigation Buttons
To add an icon to your navigation button, use the data-icon attribute:
The data-icon attribute use the same values as the CSS classes specified in the "Icons" chapter. The only difference is that, instead of specifying class="ui-icon-value", you specify the attribute of data-icon="value".
| Attribute Value | Description | Icon |
|---|---|---|
| data-icon="home" | Home | |
| data-icon="arrow-r" | Right Arrow | |
| data-icon="search" | Search |
For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.
Positioning Icons
Just like with the "ui-btn-icon-position" class (specified in the "Icons" chapter), you can choose where the icon should be positioned in the navigation button: top, right, bottom or left.
The icon position is set on the navbar container - it is not possible to position each individual button link. Use the data-iconpos attribute to specify the position:
| Attribute Value | Description | Example |
|---|---|---|
| data-iconpos="top" | Top icon alignment | Try it |
| data-iconpos="right" | Right icon alignment | Try it |
| data-iconpos="bottom" | Bottom icon alignment | Try it |
| data-iconpos="left" | Left icon alignment | Try it |
By default, icons in navigation buttons are placed above the text (data-iconpos="top").
Active Buttons
When a link in the navbar is tapped/clicked, it gets the selected (pressed down) look.
To achieve this look without having to tap the link, use the class="ui-btn-active":
For multiple pages, you might want the "selected" look for each button that represents the page the user is on. To do so, add the "ui-state-persist" class to your links, as well as the "ui-btn-active" class:
Example
<li><a href="#anylink"
class="ui-btn-active ui-state-persist">Home</a></li>
Try it Yourself »More Examples
Navbars in content
How to add a navigation bar inside data-role="content".
Navbars in footer
How to add a navigation bar inside the footer.
More than 5 buttons
A demonstration of 10 buttons in a navigation bar