jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar , typically within a header or footer.
A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
The navbar items are set to divide the space evenly so in this case, each button is 1/2 the width of the browser window:
Adding a third item will automatically make each button 1/3 the width of the browser window:
Adding a fourth more item will automatically make each button 1/4 the width of the browser window:
The navbar maxes out with 5 items, each 1/5 the width of the browser window:
If more than 5 items are added, the navbar will simply wrap to multiple lines:
As a fallback, navbars with 1 item will simply render as 100%.
If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.
Icons can be added to navbar items by adding the data-icon attribute specifying a standard mobile icon to each anchor.
Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor.
You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:
Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.
Navbars can be set to any theme color by data-theme attribute to the links and specifying any theme swatch.