jQuery Mobile: Navigation bar

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

jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.

A navbar is coded as an unordered list of links wrapped in a container element that has the data-role=’navbar’ attribute.

To set an item to the active state, add class=’ui-btn-active’ to an anchor in the markup. 

In an earlier example, we have made some brief introduction to navbar.  We make some slight change to this example by adding class=’ui-btn-active’ to set the first home button to active state.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>
        <div data-role='navbar'>
            <ul>
                <li><a href='#' data-icon='home' class='ui-btn-active' >Home</a></li>
                <li><a href='#' data-icon='arrow-r'>Latest Posts</a></li>
                <li><a href='#' data-icon='search'>Search</a></li>
            </ul>
        </div>
    </div>

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

    <div data-role='footer'>
        <h1>My Footer</h1>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery Mobile: Formatted content
jQuery Mobile: Button on the right hand side of the header >>