Working with navbar in jQuery Mobile

A navigation toolbar, or navbar, is a widget built into jQuery Mobile that allows you to add navigation links to your page. Similar to the built-in grid system, the navbar is capable of containing five columns. To add a navbar to your page, you must use a container element with an attribute of data-role="navbar". Inside the container you must have an unordered list with each column inside an li element.

 <div data-role="navbar">
   <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
   </ul>
 </div>

A Page with a navbar Inside the Header Toolbar

  <div data-role="page">
    <div data-role="header" data-position="inline">
      <a href="#">Contacts</a>
      <h1>I am a header toolbar</h1>
      <a href="#">Config</a>
      <div data-role="navbar">
        <ul>
          <li><a href="#">Rock</a></li>
          <li><a href="#">Paper</a></li>
          <li><a href="#">Scissors</a></li>
        </ul>
      </div>
    </div>
  </div>

Using a navbar in the Footer Toolbar

 <div data-role="footer">
   <div data-role="navbar">
     <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
     </ul>
   </div>
 </div>

Positioning the Toolbars
There are two different ways of doing this. You can either use fixed or full screen positioning on the toolbar.
To make a toolbar use the fixed position, you need to add data-position="fixed" to the  toolbar.

  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>

To use the full screen position you need to add data-fullscreen="true" to the div element that also has the attribute of data-role="page". You then need to make sure that both the header and footer toolbars contain data-position="fixed".

<div data-role="page" data-fullscreen="true">
Setting Up a Persistent navbar in the Footer Toolbar
 <div data-role="footer" data-position="fixed" data-id="rps">
   <div data-role="navbar">
     <ul>
       <li><a href="persistent_rock.html" class="ui-btn-active ui-state-
rsist">Rock</a></li>
       <li><a href="persistent_paper.html">Paper</a></li>
       <li><a href="persistent_scissors.html">Scissors</a></li>
     </ul>
   </div>
 </div>

In above code div element with the attributes of data-role="footer", data-position="fixed", and data-id="rps". The first two attributes are the required setup for creating a footer toolbar and using fixed positioning. The data-id="rps" keeps navbar visible while the page is transitioning. This works only when the value inside the data-id attribute is the same on the current page and the one being transitioned to.