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:
|By default, links inside a navigation bar will automatically turn into a
button (no need for class="ui-btn"
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).
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".
For a complete reference of all the jQuery Mobile button icons, please go to our jQuery Mobile Icons Reference.
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:
|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").|
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:
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