jQuery Mobile - Navbar Basics

Description

Navbar can be created using the data-role = "navbar" attribute. When a navbar button is clicked, it obtains the active state. The ui-btn-active class will be removed from all navbar anchors and is added to the link which is activated.

If this is a link to other page, then, after the transition completion class will be removed again. Depending upon the navbar items, the width of the browser will be evenly divided among the items.

Example

Following example demonstrates the use of basic navbar in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <p>Navbar will be rendered 100% with one item.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
         </ul>
      </div>
      
      <p>Navbar will be rendered 50% with two items.</p>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" class = "ui-btn-active">One</a></li>
            <li><a href = "#">Two</a></li>
         </ul>
      </div>
      
      <p>Each button will take 1/3 width of the browser window when navbar has 3 items.</p>
      <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>
      
      <p>Each button will take 1/4 width of the browser window when navbar has 4 items.</p>
      <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>
            <li><a href = "#">Four</a></li>
         </ul>
      </div>
      
      <p>Each button will take 1/5 width of the browser window when navbar has 5 items.</p>
      <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>
            <li><a href = "#">Four</a></li>
            <li><a href = "#">Five</a></li>
         </ul>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as navbar_basic.html file in your server root folder.
Open this HTML file as http://localhost/navbar_basic.html and the following output will be displayed.

jquery_mobile_widgets.htm