jQuery Mobile - Navbar Widget

The navbar widget is a set of buttons, which links you to other web pages or sections. jQuery mobile provides a basic navbar widget consisting of buttons upto 5 and an optional icon in a bar.

Following table lists navbar types used in jQuery mobile.

Sr.No. Navbar type & Description
1 Navbar basics

Navbar can be created using the data-role = "navbar" attribute.

2 Multi-row

Whenever a navbar consists of more than 5 items, all the items will be wrapped to multiple lines two across.

3 Navbars in headers

You can add a navbar to the top of the page by adding the navbar container within the header block.

4 Navbars in footers

To add the navbar to the page's bottom, wrap the navbar within a container with a data-role = "footer" attribute.

5 Persistent

The persistent navbar works like a tab bar that appears to be fixed as you browse across the pages.

6 Icons

To add icons to your navbar use data-icon attribute to each anchor.

7 Icon position

The navbar icons can be positioned on the navbar container instead of every single link.

8 3rd party icon sets

You can add third party icons to your navbar. To achieve this, just add custom styles to link to the icons and place them in the navbar.

9 Themes

Just like buttons, the theme swatch will be inherited by the navbars from their parent container.

10 Navbars with button elements

Instead of using links inside the navbar, you can also use button elements.

Kickstart Your Career

Get certified by completing the course

Get Started