jQuery Mobile Navigation Bars

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Navigation Bars

« Previous
Next Chapter »

## jQuery Mobile Navigation Bars

A navigation bar consists of a group of links that are aligned horizontally, typically within a header or footer.

By default, the links in the navigation bar will automatically turn into buttons (no need for data-role="button").

Use the data-role="navbar" attribute to define a navigation bar:

## Example

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Try it yourself »

The buttons are, by default, as wide as its content. Use an unordered list to divide the buttons equally: 1 button takes 100% of the width, 2 buttons share 50% each, 3 buttons 33,3%, etc. However, if you specify more than 5 buttons in the navbar, it will wrap to multiple lines (see "More Examples" below).

## Active Buttons

When a link in the navbar is tapped, it gets the selected (pressed down) look.

To achieve this look without having to tap the link, use the class="ui-btn-active":

## Example

<li><a href="#anylink" class="ui-btn-active">Home</a></li>
Try it yourself »

For multiple pages, you might want the "selected" look for each button that represents the page the user is on. To do so, add the "ui-state-persist" class to your links, as well as the "ui-btn-active" class:

## Example

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
Try it yourself »

## More Examples

Navbars in content
How to add a navigation bar inside data-role="content".

Navbars in footer
How to add a navigation bar inside the footer.

Positioning icons in navbars
How to position icons in a navigation bar inside a footer.

More than 5 buttons
A demonstration of 10 buttons in a navigation bar

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE