jQuery Mobile provides a manner to navigate and style a navigation link at the same time. It uses the data-role=”navbar” to accomplish this task.
The navbar can handle up to five navigation links. Icons can be set optionally as well. If you have more than five links, it will split the navbar into two columns, with enough rows to display all of the links.
The navbar is a div, with a data-role of navbar. Inside the div, is an unordered list, with anchors (links) inside list items. One link per list item.
Use the internal navigation if you have multiple internal pages. If you have external pages, create the links as as normal links.
The navbar can exist either within the header or footer of the page. You just need to put it inside the appropriate tag structure.
It is important to note that the navbar needs to exist on each (virtual) page. These can change from page to page, which is why you have to place it on each page, even if you have multiple virtual pages within the same physical page. This is because the navbar needs to be within the page to display. jQuery Mobile will not display anything outside of the div which the data-role of page.
Using Icons
A list of available icons are listed on jQuery Mobile’s website at: http://api.jquerymobile.com/icons/
You can add an icon to a navbar location by adding the data-icon attribute to your link.
Icon Positioning
By default, the icon’s are posted to the top of the navigation links. However, by adding the data-iconpos attribute to the adjust the position of the icon. The values available to data-iconpos are:
- top
- right
- bottom
- left
Custom Icons
Additionally, you can set the icon type to “custom” and then style icons from an external source. You will need to add CSS to your custom style sheet to know which image to show for which ID, as in the example below.
Styling Your Navbar
By default, the navbar picks up the theme defined in your page. However, you can change the theme if you want to.
You can style the navbar by adding a class to your div. You will want to add ui-body-a, if you wanted the theme “a“. Of course, you can pick a different theme letter if you want, as long as your theme style sheet support that theme letter. This is the same class you can use if you are applying a theme to a section of your jQuery Mobile Website.
Persistent Navbar
You can get a navbar to stay in a fixed location if you use the data-position=”fixed” attribute/value. This will sometimes have some issues, and it occasionally will move a little in some browsers, but works fairly well in most modern devices.
jQuery Mobile Navigation Bars & Links was originally found on Access 2 Learn
