jQuery Mobile Navbar
A navbar consists of a group of horizontally arranged links, typically contained within a header or footer.
By default, links in a navbar automatically become buttons (no need for data-role="button").
Use the data-role="navbar" attribute to define a navbar:
Example
<div data-role="navbar">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../index.html">Page 2</a></li>
<li><a href="../index.html">Search</a></li>
</ul>
</div>
</div>
Try it »
 |
By default, the width of a button is the same as its content. Use an unordered list to divide the button widths equally: 1 button is 100% width, 2 buttons are each 50% width, 3 buttons are each 33.3% width, and so on. However, if you specify more than 5 buttons in the navbar, they will be split into multiple lines (see "More Examples"). |
|---|
Navbar Button Icons
We can use the data-icon attribute to add icons to navbar buttons:
The data-icon attribute uses the same values as the CSS classes in the Icons chapter. The CSS class usage is class="ui-icon-value", data-icon attribute usage: data-icon="value"。
| Attribute Values | Description | Icon |
|---|---|---|
| data-icon="home" | Home | |
| data-icon="arrow-r" | Right Arrow | |
| data-icon="search" | Search |
For a complete reference of all jQuery Mobile button icons, please visit ourjQuery Mobile Icons Reference Manual。
Positioning Icons
Just like the "ui-btn-icon-position" class (described in detail in the Icons chapter), you can set the icon position: top, right, bottom, or left.
The icon position is set on the navbar container, using thedata-iconposattribute to specify the position:
| Attribute Values | Description | Example |
|---|---|---|
| data-iconpos="top" | Icon aligned to the top | Try it |
| data-iconpos="right" | Icon aligned to the right | Try it |
| data-iconpos="bottom" | Icon aligned to the bottom | Try it |
| data-iconpos="left" | Icon aligned to the left | Try it |
|
By default, the icon of navbar buttons is positioned above the text (data-iconpos="top"). |
|---|
Active Button
When a link in the navbar is clicked, it will get a selected (pressed) appearance.
If you want this appearance without clicking the link, use class="ui-btn-active":
For multiple pages, you may want each button's selected appearance to represent the page the user is currently on. To do this, add "ui-state-persist" and "ui-btn-active" to the link's class:
More Examples
Navbar in Content
How to add a navbar inside data-role="content".
Navbar in Footer
How to add a navbar inside a footer.
Positioning Icons in a Navbar
How to position icons in a navbar inside a footer.
More Than 5 Buttons
Demonstration of 10 buttons in a navbar.