The Nav Bar widget can be added anywhere in a page — header, content, or footer region — to provide a navigation bar that accommodates an unlimited number of options in a compact layout.
The Nav Bar is structured as a 3-column element; it displays up to 3 items per row in a horizontal bar with out without icons. (If more than 3 items are in the navigation list, the nav bar displays a second row with option slots.)
The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a data-role="navbar" attribute to the list.
<div data-role="navbar">
<ul>
<li><a href="bars-fixed.html">Fixed</a></li>
<li><a href="bars-inline.html">Inline</a></li>
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
<li><a href="bars-persist.html">Persistent</a></li>
<li><a href="bars-themes.html">Themes</a></li>
</ul>
</div><!-- /navbar -->
The markup above creates a two-row nav bar element in the body of the page, like this:
The navbar can be added inside the header or footer bar; if you want it to persist, simply add a data-position="fixed" attribute to the header or footer div container.