Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery Mobile Navbar iconpos Option

  • Last Updated : 17 Jan, 2022

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. 

In this article, we are going to learn the jQuery Mobile Navbar iconpos Option. The iconpos option asks for positioning the icon for the Navbar items. 

Syntax: The iconpos option takes a string input and should be one of the above types. The default value is “top”.

$("#gfgnavbar").navbar({
   iconpos: "right"
});

Values: The following are the values that this option takes:

  • left: It positions the icon to the left of the text.
  • right:  It positions the icon to the right of the text.
  • top:  It positions the icon to the top of the text.
  • bottom:  It positions the icon to the bottom of the text.
  • none: The icon does not appear.
  • notext: The icon only appears, no text appears.

 

CDN Links: Use the following CDN Links for the jQuery Mobile Project.

<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.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we have positioned the icon to right using the “right” value for iconpos option.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
        </div>
        <div data-role="navbar" id="gfgnavbar">
            <ul>
                <li>
                    <a href="#one" data-icon="cloud">
                        One
                    </a>
                </li>
                <li>
                    <a href="#two" data-icon="star">
                        Two
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="main" 
             class="ui-content">
            <h3>
              jQuery Mobile Navbar
              iconpos Option
            </h3>
        </div>
  
    </div>
    <script>
        $("#gfgnavbar").navbar({
            iconpos: "right"
        });
    </script>
</body>
  
</html>

Output:

jQuery Mobile Navbar iconpos Option

Reference: https://api.jquerymobile.com/navbar/#option-iconpos


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!