jQuery Mobile是一個基于jQuery的移動端開發框架，它提供了豐富的組件和工具，用于快速地構建移動端網頁和應用程序。其中，導航組件是開發移動端應用程序中不可或缺的一部分。

<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn-active">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>

上面的代碼是一個基本的導航組件示例，使用了一個data-role為“navbar”的div元素，以及三個包含鏈接的li元素。通過設置class屬性為“ui-btn-active”，可以指定當前處于激活狀態的鏈接。

<div data-role="header">
<h1>My App</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn-active">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
</div>
<div data-role="panel" id="nav-panel">
<ul data-role="listview">
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu2">Menu 2</a></li>
<li><a href="#menu3">Menu 3</a></li>
</ul>
</div>

為了更好地管理導航和菜單組件，可以將它們與header和panel組件結合使用。如上面的代碼所示，我們使用header組件來展示應用程序名稱和菜單按鈕，并使用panel組件來創建一個滑動式的菜單。在header組件中還可以通過設置data-position="fixed"屬性，使其固定在頁面頂部，方便用戶瀏覽。