jQuery Mobile - Navbars Icons Position

Description

The navbar icons can be positioned on the navbar container instead of every single link. Navbar icons can be positioned left, right, top or bottom of the text using data-iconpos attribute.

Example

Following example demonstrates the use of navbar icons position in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Navbar Icons Position</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>
   </head>

   <body>
      <p>Icons placed at bottom:</p>
      <div data-role = "navbar" data-iconpos = "bottom">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at top:</p>
      <div data-role = "navbar" data-iconpos = "top">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at left:</p>
      <div data-role = "navbar" data-iconpos = "left">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
      
      <p>Icons placed at right:</p>
      <div data-role = "navbar" data-iconpos = "right">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</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_icons_position.html file in your server root folder.
Open this HTML file as http://localhost/navbar_icons_position.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started