jQuery Mobile - Navbars in headers


You can add the navbar to the top of the page by adding the navbar container within the header block.


Following example demonstrates the use of navbars in headers in jQuery Mobile.

<!DOCTYPE html>
      <title>Navbars in headers</title>
      <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>

      <div data-role = "header" style = "overflow:hidden;">
         <h2>This is Header</h2>
         <a href = "#" data-icon = "gear" class = "ui-btn-right">Options</a>
         <div data-role = "navbar">
               <li><a href = "#" class = "ui-btn-active">Home</a></li>
               <li><a href = "#">About Us</a></li>
               <li><a href = "#">Contact Us</a></li>


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

  • Save the above html code as navbar_headers.html file in your server root folder.

  • Open this HTML file as http://localhost/navbar_headers.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started