Navbars is another great widget that is featured in jQuery Mobile. It is a simple navbar but can also be turned into a tab bar that you see in the native mobile applications. It supports up to five buttons and those buttons can also use the icons we used in the last section.

In simple terms, a jQuery Mobile navbar is an unordered list that is wrapped within a div container with data-role of navbar. You can create them in the header or footer of your page.

We are going to add one to our header div element that will serve as our navigation menu in the later chapters. This means for now that it won't be very functional, but the groundwork will be there and we can still see the navbar in action to an extent.

Open up index.html and add the following code before our closing header div element:

        <div data-role="navbar">
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Facilities</a&gt...