Latest web development tutorials
 

jQuery Mobile Navigation Bars


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:

Example

<a href="#anylink" data-icon="search">Search</a>
Try it Yourself »

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":

Example

<li><a href="#anylink" class="ui-btn-active">Home</a></li>
Try it Yourself »

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