ナビゲーションバーは、通常、ヘッダーかフッター内に横に配置されたリンクのグループで構成されます：
バーは、data-role="navbar" 属性を持つ <div> 要素内にラップされたリンクの順序なしリストとしてコード化します：
<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 »デフォルトでは、ナビゲーションバー内のリンクは自動的にボタンに変わります（class="ui-btn" や data-role="button" は必要はありません）。
ボタンの幅は、デフォルトではコンテンツの幅と同じになります。順序なしリストを使用して、ボタンを均等に分割します：
ボタンが1つの場合は幅が100％、2つの場合はそれぞれ50％、3つの場合は33.3％などです。ただし、ナビゲーションバーに5つ以上のボタンを指定すると、
複数の行に折り返されます（下の「例」を参照してください）。
ナビゲーションボタンにアイコンを追加するには、data-icon 属性を使用します：
data-icon 属性は、「アイコン」の章で指定した CSS クラスと同じ値を使用します。 唯一の違いは、class="ui-icon-value" を指定する代わりに、 data-icon="value"属性を指定することです。
| 属性値 | 説明 | アイコン |
|---|---|---|
| data-icon="home" | ホーム | |
| data-icon="arrow-r" | 右矢印 | |
| data-icon="search" | 検索 |
jQuery Mobile ボタンアイコンすべての完全なリファレンスについては、 jQuery Mobile アイコン・リファレンス をご覧ください。
「アイコン」の章で指定した "ui-btn-icon-position" クラスの場合と同様に、ナビゲーションボタンのアイコンの位置を 次のいずれかに指定できます：top、right、bottom、left。
アイコンの配置は、ナビゲーションバーのコンテナに設定します。個々のボタンリンクの配置を指定することはできません。 data-iconpos 属性を使用して配置を指定します：
| 属性値 | 説明 | 例 |
|---|---|---|
| data-iconpos="top" | アイコンを上に配置する | Try it |
| data-iconpos="right" | アイコンを右に配置する | Try it |
| data-iconpos="bottom" | アイコンを下に配置する | Try it |
| data-iconpos="left" | アイコンを左に配置する | Try it |
デフォルトでは、ナビゲーションボタンのアイコンはテキストの上に配置されます（data-iconpos="top"）。
ナビゲーションバーのリンクをタップ/クリックすると、選択された（押下された）外観になります。
リンクをタップすることなくこの外観にするには、class="ui-btn-active" を使用します：
複数ページの場合、ユーザが見ているページを表すために、各ボタンに「選択した」という外観が必要な場合があります。 これを行うには、リンクに "ui-state-persist" クラスと "ui-btn-active" クラスを追加します：
コンテンツ内のナビゲーションバー
data-role="content" 内にナビゲーションバーを追加する方法。
フッター内のナビゲーションバー
フッター内にナビゲーションバーを追加する方法。
5つ以上のボタン
ナビゲーションバーに10個のボタンのデモ。