jQuery Mobile navigation bar

Navigation bar is a set of links arranged horizontally composition, typically contained within the head or tail.

By default, the links in the navigation bar will automatically become the button (no data-role = "button").

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

Examples

try it"

	By default, the width of the button and its contents the same. Use an unordered list to evenly divide the width of buttons: one button to 100% of the width of two buttons each accounted for 50% of the width of three buttons each accounted for 33,3% of the width, and so on. However, if you specify more than five buttons in the navigation bar will be split into multiple lines (See "More examples").

Navigation button icons

We can use the data-icon attribute to add icons for the navigation buttons:

Examples

<a href="#anylink" data-icon="search"> Search </a>

try it"

data-icon attribute with the CSS class section of the icon using the same value. CSS class to use class = "ui-icon- value" , data-icon attribute to use data-icon = "value".

Property Value	description	icon
data-icon = "home"	Home
data-icon = "arrow-r"	On the right arrow
data-icon = "search"	search for

For a complete reference manual for all button icons jQuery Mobile, visit our jQuery Mobile icon Reference Manual .

Location icon

Like "ui-btn-icon- position" same category (icon section are described in detail), you can set the location of the icon displayed: top (head), right (on the right), bottom (bottom) or left (on the left ).

Location icon on the navigation bar container is provided, using the data-iconpos attribute to specify the location:

Property Value	description	Examples
data-iconpos = "top"	Align the top icon	try it
data-iconpos = "right"	Icon on the right-aligned	try it
data-iconpos = "bottom"	Align the bottom icon	try it
data-iconpos = "left"	Align the left icon	try it

	By default, the icon is located above the navigation buttons text (data-iconpos = "top").

Activation button

When a link on the navigation bar is clicked, it will get selected (pressed) appearance.

If you want to get this appearance do not click the link, use class = "ui-btn-active":

Examples

try it"

For multiple pages, you may want to check the appearance of each button on behalf of the current page the user is located. To do this, add "ui-state-persist" and "ui-btn-active" link to the class: