# 導航欄 為導航欄定義不同風格的樣式。 ## 用法 導航欄組件包括導航欄本身及一個或多個導航菜單。 | Class | 描述 | | --- | --- | | `.uk-navbar` | 添加這個類到 `&lt;nav&gt;` 元素中，定義導航欄組件。 | | `.uk-navbar-nav` | 添加這個類到 `&lt;ul&gt;` 元素來創建導航。使用 `&lt;a&gt;` 元素作為列表中的菜單項。 | | `.uk-active` | 添加這個類到一個列表項中，對其應用選中的狀態。 | | `.uk-parent` | 添加這個類來表示一個父級菜單項。 | ### 示例  ### Code ``` <nav class="uk-navbar"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="">...</a></li> <li><a href="">...</a></li> <li class="uk-parent"><a href="">...</a></li> </ul> </nav> ``` * * * ### 導航欄翻轉 添加 `.uk-navbar-flip` 類到一個 `&lt;div&gt;` 元素中，將其進行分組并將導航項對齊到導航欄右側。 #### 示例  ### Code ``` <nav class="uk-navbar"> <div class="uk-navbar-flip"> <ul class="uk-navbar-nav"> <li><a href="">...</a></li> </ul> </div> </nav> ``` * * * ### 導航欄副標題 為列表項中的 `&lt;a&gt;` 元素添加 `.uk-navbar-nav-subtitle` 類來表示一個副標題。使用 `&lt;div&gt;` 元素作為副標題本身。 #### 示例  ### Code ``` <nav class="uk-navbar"> <ul class="uk-navbar-nav"> <li><a href="" class="uk-navbar-nav-subtitle"> ... <div>...</div> </a></li> </ul> </nav> ``` * * * ## 內容 你還可以在導航欄中添加自定義的內容，如文本、圖標、按鈕、表單，甚至是一個撥動器。默認情況下，撥動器并沒有附屬 JavaScript。舉例來說，可以為導航欄添加一個 [抽屜組件](offcanvas.html "Off-canvas component") 。 | Class | 描述 | | --- | --- | | `.uk-navbar-content` | 添加這個類到 `&lt;div&gt;` 元素中，使它作為一個自定義內容的容器。內容將被垂直居中。 | | `.uk-navbar-brand` | 添加這個類到一個 `&lt;a&gt;` 或 `&lt;div&gt;` 元素中，來表示你的品牌。 | | `.uk-navbar-center` | 添加這個類來居中你的導航欄內容或品牌。該元素必須為導航欄的最后一個子元素。 | | `.uk-navbar-toggle` | 添加這個類到一個 `&lt;a&gt;` 或 `&lt;div&gt;` 元素中，創建一個作為撥動開關的圖標。 | | `.uk-navbar-toggle-alt` | 添加這個類來替換 撥動開關 默認的圖標。 | ### 示例  ### Code ``` <nav class="uk-navbar"> <a href="" class="uk-navbar-brand">...</a> <ul class="uk-navbar-nav">...</ul> <div class="uk-navbar-content">...</div> <div class="uk-navbar-content uk-navbar-center">...</div> <a href="" class="uk-navbar-toggle"></a> </nav> ``` * * * ## 響應式可見性 要隱藏或顯示導航欄中的某些項目，只需添加 [效果組件](utility.html "Utility component") 中的響應式可見性類。這是非常方便的，比如你想在移動設備中使用一個撥動器來觸發導航。 ### 示例 調整你的瀏覽器窗口大小可以看到它是怎么運行的。  Lorem ipsum dolor sit amet, [consetetur](#) sadipscing elitr. ### Code ``` <nav class="uk-navbar"> <ul class="uk-navbar-nav uk-hidden-small">...</ul> <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a> </nav> <div id="my-id" class="uk-offcanvas"> ... </div> ``` 注意 在這個示例中，我們從 [抽屜組件](offcanvas.html "Off-canvas component") 中添加了一個側邊欄抽屜。 * * * ## 修飾 為了以不同的風格顯示導航欄，只需添加修飾類。這些修飾類可以相互組合使用。 ### 附著式的導航欄 添加 `.uk-navbar-attached` 類來優化附到視圖頂部的導航欄樣式。比如移除圓角。 ### 示例  ### Code ``` <nav class="uk-navbar uk-navbar-attached">...</nav> ``` * * * ## 帶有下拉菜單的導航欄 導航欄可以包含 [下拉菜單組件](dropdown.html "Dropdown component") 中的下拉菜單。只需添加 `.uk-dropdown-navbar` 修飾類到下拉菜單中，它可以完美的融入到導航欄的樣式中。 ### 示例