jQuery Mobile: Navigation bar icon positioning

This entry is part 54 of 73 in the series jQuery Mobile

Using our previous example where we put the navigation bar in the footer, we set the icon position of the bar to either the left or the right.

In the below example, we put it on the right hand side of the button.

Navigation Bar Icon Position
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>


    <div data-role='content'>
        <p>You can put your content here...</p>

    <div data-role='footer' data-position='fixed'>
        <div data-role='navbar' data-iconpos='right'>
                <li><a href='#' data-icon='grid'>Summary</a></li>
                <li><a href='#' data-icon='star' class='ui-btn-active'>Favs</a></li>
                <li><a href='#' data-icon='gear'>Setup</a></li>
        </div><!-- /navbar -->
        <h4 style='text-align:center;'>I'm the footer</h4>

Try The Code

To put the icons on the left, we just have to modify line 21 to data-iconpos=’left’.

Icon Position
Series Navigation<< jQuery Mobile: Navigation bar in the footer
jQuery Mobile: Navigation bar and header in swatch b >>

Leave a comment

Leave a Reply