Navbars

Code

<div data-role="footer" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a href="#home" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
      <li><a href="#search" data-icon="search">Search</a></li>
      <li><a href="#profile" data-icon="user">Profile</a></li>
      <li><a href="#settings" data-icon="gear">Settings</a></li>
      <li><a href="#more" data-icon="grid">More</a></li>
    </ul>
  </div>
</div>

<!-- Top navbar inside header -->
<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#" class="ui-btn-active">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

Explanation

The navbar widget renders a horizontal grid of up to five icon buttons that auto-fit equal widths. The ui-btn-active class marks the current item, and ui-state-persist keeps that state across page loads when used with $.mobile.navigate. Place navbars inside a header for top tabs or a footer for bottom navigation.

More jQuery Mobile Snippets