jQuery Mobile Navigation Bar
A navigation bar consists of a set of horizontally arranged links, typically contained within a header or footer.
By default, links in the navigation bar will automatically become buttons (no need for data-role="button").
Use the data-role="navbar" attribute to define a navigation bar:
Example data-role="navbar"
| | By default, the width of the button is the same as its content. Use an unordered list to evenly divide the button widths: 1 button takes up 100% width, 2 buttons each take up 50% width, 3 buttons each take up 33.3% width, and so on. However, if you specify more than 5 buttons in the navigation bar, they will wrap into multiple lines (see "More Examples"). <br> | | --- | --- |
Navigation Button Icons
We can add icons to navigation buttons using the data-icon attribute:
Example
<a href="#anylink" data-icon="search">Search</a>
The data-icon attribute uses the same values as the CSS classes in the Icons section. The CSS class uses class="ui-icon-*value*", while the data-icon attribute uses 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 jQuery Mobile button icons, visit our jQuery Mobile Icons Reference.
Positioning Icons
Similar to the ui-btn-icon-*position* classes (detailed in the Icons section), you can set the icon position: top, right, bottom, or left.
Set the icon position on the navigation bar container using the data-iconpos attribute:
| Attribute Value | Description | Example |
|---|---|---|
| data-iconpos="top" | Icon top aligned | Try it |
| data-iconpos="right" | Icon right aligned | Try it |
| data-iconpos="bottom" | Icon bottom aligned | Try it |
| data-iconpos="left" | Icon left aligned | Try it |
| | By default, the navigation button icon is positioned above the text (data-iconpos="top"). | | --- | --- |
Activating Buttons
When a link in the navigation bar is clicked, it will get the selected (pressed) appearance.
To achieve this appearance without clicking the link, use class="ui-btn-active":
Example class="ui-btn-active"
For multiple pages, you might want each button's selected appearance to represent the current page the user is on. To do this, add ui-state-persist and ui-btn-active to the link's class: