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.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started