jQuery Mobile Navigation Bar

jQuery Mobile Navigation Bar

The navigation bar is composed of a set of horizontally aligned links, usually located within the header or footer.

By default, the links in the navigation bar are automatically converted to buttons (no need for data-role="button").

Use the data-role="navbar" attribute to define the navigation bar:

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

Tip:The width of the button is consistent with its content by default. Use an unordered list to evenly divide the buttons: one button occupies 100% of the width, two buttons each share 50% of the width, three buttons 33.3%, and so on. However, if you specify five or more buttons in the navigation bar, it will wrap into multiple lines (refer to the "More Examples" at the bottom of the page).

Active Button

When a link in the navigation bar is clicked, it will obtain the selected appearance (pressed).

If you want to achieve this appearance without clicking the link, use class="ui-btn-active":

Example

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

Try It Yourself

For multiple pages, you may need to set the "selected" appearance for each button to indicate that the user is browsing that page. If you do this, add the "ui-state-persist" class and the "ui-btn-active" class to the link:

Example

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>

Try It Yourself

More Examples

Navigation bar in the content
How to add a navigation bar in data-role="content".
Navigation bar in the footer
How to add a navigation bar in the footer.
Position icons in the navigation bar
How to place icons inside the footer navigation bar.
More than five buttons
Demonstrate ten buttons in the navigation bar.