{"id":100,"date":"2023-08-25T17:34:53","date_gmt":"2023-08-25T17:34:53","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=100"},"modified":"2023-08-25T17:34:53","modified_gmt":"2023-08-25T17:34:53","slug":"navbar","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/navbar\/","title":{"rendered":"Navbar Widget"},"content":{"rendered":"

\nNavbar Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a navbar widget<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
defaults<\/a><\/div>\n
disabled<\/a><\/div>\n
iconpos<\/a><\/div>\n
initSelector<\/a><\/div>\n<\/div>\n

Methods<\/h3><\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

Simple navbar<\/h2>\n\t\t

jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar, typically within a header or footer. There is also a persistent navbar variation that works more like a tab bar that stays fixed as you navigate across pages.<\/p>\n\t\t

A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar"<\/code> attribute. This is an example of a two-button navbar:<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<div<\/span> data-role<\/span>="navbar"<\/span>><\/span><\/code><\/div><\/div>
  <ul<\/span>><\/span><\/code><\/div><\/div>
    <li<\/span>><\/span><a<\/span> href<\/span>="a.html"<\/span>><\/span>One<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
    <li<\/span>><\/span><a<\/span> href<\/span>="b.html"<\/span>><\/span>Two<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
  <\/ul<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><!-- \/navbar --><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
When a link in the navbar is clicked it gets the active (selected) state. The ui-btn-active<\/code> class is first removed from all anchors in the navbar before it is added to the activated link. If this is a link to another page, the class will be removed again after the transition has completed.<\/p>\n\t\t
To set an item to the active state upon initialization of the navbar, add class="ui-btn-active"<\/code> to the corresponding anchor in your markup. Additionaly add a class of ui-state-persist<\/code> to make the framework restore the active state each time the page is shown while it exists in the DOM. The example below shows a navbar with item "One" set to active:<\/p>\n\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<div<\/span> data-role<\/span>="navbar"<\/span>><\/span><\/code><\/div><\/div>
  <ul<\/span>><\/span><\/code><\/div><\/div>
    <li<\/span>><\/span><a<\/span> href<\/span>="a.html"<\/span> class<\/span>="ui-btn-active ui-state-persist"<\/span>><\/span>One<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
    <li<\/span>><\/span><a<\/span> href<\/span>="b.html"<\/span>><\/span>Two<\/a<\/span>><\/span><\/li<\/span>><\/span><\/code><\/div><\/div>
  <\/ul<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><!-- \/navbar --><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
Note that this on applies to navbars that are inside a page. If you use a true persistent toolbar that lives outside the page and want to set current item to the active state, you have to add a script that adds the class="ui-btn-active"<\/code> class.<\/p>\n\n\t\t
The navbar items are set to divide the space evenly so in this case, each button is 1\/2 the width of the browser window:\n\t\t