導覽列
使用下拉選單建立主要網站導覽的導覽列。
導覽列元件會使用相同的選項初始化所有下拉選單，因此它們不必單獨初始化。導覽列中的所有下拉選單都具有目標感知功能。這表示只要滑鼠指標朝向下拉選單移動，下拉選單就會保持開啟。額外的延遲時間可確保即使滑鼠指標短暫地朝向另一個方向移動，下拉選單仍保持開啟。在懸停模式下，如果懸停在另一個選單項目上，下拉選單會立即關閉。
用法
導覽列元件包含導覽列容器、導覽列本身以及一個或多個導覽。
| 元素 | 描述 |
|---|---|
uk-navbar |
將此屬性新增至 <nav> 元素以定義導覽列元件。 |
.uk-navbar-container |
將此類別新增至相同的 <nav> 元素或父元素，以新增導覽列背景樣式。 |
.uk-navbar-left.uk-navbar-center.uk-navbar-right |
將這些類別之一新增至 <div> 元素以對齊導覽。 |
.uk-navbar-nav |
將此類別新增至 <ul> 元素以建立導覽。使用 <a> 元素作為列表中的選單項目。 |
.uk-parent |
新增此類別以指示父選單項目。 |
.uk-active |
新增此類別以指示活動選單項目。 |
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href=""></a></li>
<li class="uk-parent"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</nav><nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</nav>
導覽列和導覽列容器都沒有水平內距。若要設定與頁面其餘部分相同的水平內距，請使用 容器元件。
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>…</div>
</div>
</nav><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>多個導覽
您可以在導覽列容器內放置多個導覽。這樣，您可以在同一個導覽列內擁有靠左對齊、置中和靠右對齊的導覽。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">…</div>
<div class="uk-navbar-center">…</div>
<div class="uk-navbar-right">…</div>
</nav><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>透明修飾符
當您將圖片或彩色背景用於網站的英雄區塊時，您可能希望將導覽列設為透明。只需在與 .uk-navbar-container 類別相同的元素上新增 .uk-navbar-transparent 類別即可。如有必要，請新增 反向元件 中的 .uk-light 或 .uk-dark 類別來調整導覽列顏色。
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>…</nav>
<div class="uk-position-relative">
<img src="images/light.jpg" width="1800" height="1200" alt="">
<div class="uk-position-top">
<nav class="uk-navbar-container uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>副標題
若要定義副標題，請在項目的 <a> 元素內建立 <div> 元素。將 .uk-navbar-subtitle 類別新增至另一個 <div> 元素。
<li>
<a href="">
<div>
…
<div class="uk-navbar-subtitle"></div>
</div>
</a>
</li><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="#">
<div>
Active
<div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a>
</li>
<li>
<a href="#">
<div>
Parent
<div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">
<div>
Item
<div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>內容項目
您也可以將自訂內容新增至導覽列，例如文字、圖示、按鈕或表單。將 .uk-navbar-item 類別新增至作為內容容器的 <div> 元素。
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a href="" class="uk-navbar-item uk-logo"></a>
<ul class="uk-navbar-nav">…</ul>
<div class="uk-navbar-item">…</div>
</div>
</nav>從 實用工具元件 將 .uk-logo 類別新增至 <a> 或 <div> 元素，以指示您的品牌。
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#" aria-label="Back to Home">Logo</a>
<ul class="uk-navbar-nav">
<li>
<a href="#">
<span class="uk-icon uk-margin-xsmall-right" uk-icon="icon: star"></span>
Features
</a>
</li>
</ul>
<div class="uk-navbar-item">
<div>Some <a href="#">Link</a></div>
</div>
<div class="uk-navbar-item">
<form action="javascript:void(0)">
<input class="uk-input uk-form-width-small" type="text" placeholder="Input" aria-label="Input">
<button class="uk-button uk-button-default">Button</button>
</form>
</div>
</div>
</div>
</div>
</nav>置中標誌
您可以建立具有置中標誌的分割選單。只需將 uk-navbar-center-left 類別新增至一個導覽列，並將 uk-navbar-center-right 類別新增至同一導覽列容器內的另一個導覽列。這會將您的標誌保持置中，並將選單對齊至左側和右側。
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left">…</div>
<a href="" class="uk-navbar-item uk-logo"></a>
<div class="uk-navbar-center-right">…</div>
</div>
</div><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-center">
<div class="uk-navbar-center-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<div class="uk-navbar-center-right">
<ul class="uk-navbar-nav">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>切換項目
將 .uk-navbar-toggle 類別和 uk-navbar-toggle-icon 屬性新增至 <a> 或 <div> 元素以建立圖示作為切換。依預設，沒有將 JavaScript 附加至切換。例如，您可以從 場外元件 新增場外導覽，或從 模態元件 新增模態視窗。
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href=""></a>
</div>
</div><nav class="uk-navbar-container uk-margin">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
</div>
</div>
</div>
</nav>
<nav class="uk-navbar-container uk-margin">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-xsmall-left">Menu</span>
</a>
</div>
</div>
</div>
</nav>若要使用平滑動畫將切換圖示從選單圖示變更為關閉圖示，請新增 .uk-navbar-toggle-animate 類別。
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href=""></a><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>下拉選單
導覽列可以包含 下拉選單元件 中的下拉選單。只需將 .uk-navbar-dropdown 修飾符新增至下拉選單，使其完美融入導覽列樣式。將 .uk-navbar-dropdown-nav 類別新增至下拉選單內的導覽。
<ul class="uk-navbar-nav">
<li>
<a href=""></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">…</ul>
</div>
</li>
</ul><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>點擊模式
導覽列內的父項目可以透過懸停或點擊切換來啟用。只需將 mode: click 選項新增至 uk-navbar 屬性即可。
<nav class="uk-navbar-container" uk-navbar="mode: click">…</nav><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="mode: click">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>對齊
依預設，下拉選單會放置在導覽列項目下方，並向左對齊。若要變更對齊方式，請將 align 選項設定為 uk-navbar 屬性。
| 位置 | 描述 |
|---|---|
左 |
將下拉選單對齊至左側。 |
右 |
將下拉選單對齊至右側。 |
置中 |
將下拉選單對齊至中心。 |
<div uk-navbar="align: center"></div><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="align: center">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>目標
依預設，下拉選單會對齊其導覽列項目。若要將下拉選單放置到不同的元素，只需將 target: SELECTOR 選項新增至 uk-navbar 屬性即可。
<nav class="uk-navbar-container" uk-navbar="target: !.uk-navbar">…</nav><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="target: !.uk-navbar; align: center">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
<div class="uk-drop-grid uk-child-width-1-3" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>下拉橫幅
下拉橫幅會延伸至導覽列的完整寬度，並顯示不具有預設樣式的下拉選單。若要將下拉選單放置在此類下拉橫幅內，請將 dropbar: true 選項新增至 uk-navbar。或者，使用 dropbar-anchor 選項來選取要將下拉橫幅插入標記之後的元素。
<nav class="uk-navbar-container" uk-navbar="dropbar: true">…</nav><div class="uk-position-relative">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>延展
若要延展下拉選單，請使用 下拉元件 及其 stretch 選項。在下列範例中，下拉選單會對齊至父導覽列的邊界。
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">…</div><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href>Parent</a>
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href>Parent</a>
<div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>父圖示
若要建立父圖示，只需將 uk-navbar-parent-icon 屬性新增至 <span> 元素即可。
<ul class="uk-navbar-nav">
<li>
<a href="">Parent <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">…</div>
</li>
</ul><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">Parent <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>寬度和網格
您可以在下拉選單內放置 網格元件 的網格。只需使用 <div> 元素包裝內容並新增 uk-grid 屬性。如果網格在下拉選單不再符合其容器時應該自動堆疊，只需新增 .uk-drop-grid 類別。
若要容納最多五個欄，您也需要新增下列類別之一。如果欄不再符合容器，它們會堆疊。
| 類別 | 描述 |
|---|---|
.uk-navbar-dropdown-width-2 |
新增此類別以將下拉選單的寬度加倍。 |
.uk-navbar-dropdown-width-3 |
新增此類別以將下拉選單的寬度增加三倍。 |
.uk-navbar-dropdown-width-4 |
新增此類別以將下拉選單的寬度乘以四。 |
.uk-navbar-dropdown-width-5 |
新增此類別以將下拉選單的寬度乘以五。 |
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">…</ul>
</div>
<div>…</div>
</div>
</div><nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="#">Two Columns</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>黏性導覽列
對於基本的黏性導覽列，請使用 黏性元件 的 uk-sticky 屬性，將導覽列包裝在容器內。
導覽列本身具有修飾符類別 uk-navbar-sticky，可確保針對黏性狀態進行最佳化樣式 (例如，額外的陰影)。若要讓黏性元件動態新增和移除該類別，請設定 cls-active: uk-navbar-sticky。若要確保將類別新增至導覽列容器，請設定 sel-target: .uk-navbar-container。
注意 您可以在 黏性導覽列 的測試中檢視更多範例。
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: + *; offset: 80">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-section-secondary uk-background-cover" style="background-image: url('images/dark.jpg');">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>您也可以使用下拉橫幅 (而非使用下拉選單) 顯示子導覽，該橫幅會在導覽列下方延伸至完整寬度。只需在 uk-navbar 屬性中設定 dropbar: true。
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar="dropbar: true">…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: + *; offset: 80">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-section-secondary uk-background-cover" style="background-image: url('images/dark.jpg');">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
透明黏性導覽列
當 透明導覽列 變成黏性時，通常需要移除 .uk-navbar-transparent 類別以及 .uk-light 或 .uk-dark，並在導覽列回到非黏性狀態時再次新增它們。若要執行此操作，請設定 cls-inactive: uk-navbar-transparent uk-light。
依預設，類別的立即切換看起來不太理想。相反地，設定 start: 200 以讓導覽列在使用者向下捲動超過導覽列 200 像素時消失，然後重新出現。在這種情況下，導覽列也可以滑入動畫。只需設定 animation: uk-animation-slide-top。
<div uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
<nav class="uk-navbar-container uk-light" uk-navbar>…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-section-secondary uk-background-cover uk-preserve-color" style="background-image: url('images/dark.jpg');">
<div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; end: ! *; offset: 80">
<nav class="uk-navbar-container uk-light">
<div class="uk-container uk-container-expand">
<div uk-navbar>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>下拉橫幅透明模式
若要最佳化透明導覽列在開啟下拉橫幅時的外觀，請將 dropbar-transparent-mode 選項設定為下列值之一。
| 模式 | 描述 |
|---|---|
移除 |
當下拉橫幅開啟時移除導覽列透明度，並在下拉橫幅關閉時新增透明度。 |
背景 |
在導覽列後面開啟下拉橫幅，以便在下拉橫幅背景上方顯示導覽列內容。 |
使用 反向元件 以根據後方的背景來為透明導覽列著色。若要防止導覽列在停止透明時變更其顏色，只需將 sel-active: .uk-navbar-transparent 選項新增至 uk-inverse 屬性。
例如，如果導覽列僅在英雄區塊中透明，但在黏性時不透明，請設定 dropbar-transparent-mode: remove。
<div uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent" uk-navbar="dropbar: true; dropbar-transparent-mode: remove">…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-section-secondary uk-background-cover uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
<div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: ! *; offset: 80">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-transparent-mode: remove; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>或者，如果導覽列即使在黏性時始終透明，請設定 dropbar-transparent-mode: behind，以便在導覽列後面開啟下拉橫幅，使其不再透明。
<div class="uk-inverse-light">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high" uk-inverse="sel-active: .uk-navbar-transparent" uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">…</nav>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-section-secondary uk-background-cover uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: ! *; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high" uk-inverse="sel-active: .uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar="dropbar: true; dropbar-transparent-mode: behind; dropbar-anchor: !.uk-navbar-container; target-y: !.uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="uk-section uk-light">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>使用黏性透明導覽列時，通常會將其與頁面背景混合。在這種情況下，下拉橫幅需要使用 dropbar-anchor 放置在混合元素之外，而下拉選單需要使用 container 放置在混合元素之外。否則，下拉橫幅和下拉選單也會與頁面背景混合。這也表示下拉橫幅會放置在黏性容器之外。因此，只有導覽列會保持黏性，而開啟的下拉橫幅會捲動出檢視範圍。這就是我們新增新的 close-on-scroll 選項以在捲動之前關閉下拉橫幅的原因。
由於只有白色與頁面背景混合良好，請確定導覽列具有淺色，或使用 .uk-light 類別。請勿使用 uk-inverse 屬性來自動為導覽列著色。
<div class="uk-blend-difference uk-position-z-index-high" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent uk-light" uk-navbar="container: !.uk-section-default; dropbar: true; dropbar-transparent-mode: behind; close-on-scroll: true; dropbar-anchor: !.uk-blend-difference">…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-section-default uk-background-cover uk-preserve-color" style="background-image: url('images/light.jpg');">
<div id="test">
<div class="uk-blend-difference uk-position-z-index-high" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-section-default; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent uk-light">
<div class="uk-container">
<div uk-navbar="container: #test; dropbar: true; dropbar-transparent-mode: behind; close-on-scroll: true; dropbar-anchor: !.uk-blend-difference; target-y: #test .uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>單獨為導覽列部分著色
若要單獨為導覽列部分著色，只需將 target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right 選項新增至 uk-inverse 屬性。
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right" uk-navbar>…</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">…</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">…</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">…</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<div uk-height-placeholder="!.uk-position-relative .uk-position-top" class="uk-margin-remove-adjacent"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>如需根據頁面背景來為導覽列著色的詳細資訊，請參閱 反向元件。
元件選項
以下任何選項皆可套用於元件屬性。多個選項請以分號分隔。深入了解
| 選項 | 數值 | 預設值 | 描述 |
|---|---|---|---|
align |
字串 | 左 |
下拉選單對齊方式（left、right、center）。 |
dropbar |
布林值 | false |
啟用或停用 dropbar 行為。 |
dropbar-anchor |
CSS 選擇器 | false |
若設定，dropbar 將插入於錨點元素之後。 |
dropbar-transparent-mode |
布林值、字串 | false |
dropbar 透明模式（behind、remove）。 |
stretch |
布林值、字串 | false |
在兩軸（true）或指定軸（x、y）上延展下拉選單。 |
mode |
字串 | click、hover |
下拉選單觸發行為模式的逗號分隔清單（click、hover）。 |
delay-show |
數值 | 0 |
在 hover 模式下，下拉選單顯示前的延遲時間，單位為毫秒 (ms)。 |
delay-hide |
數值 | 800 |
在 hover 模式下，下拉選單隱藏前的延遲時間，單位為毫秒 (ms)。 |
boundary |
CSS 選擇器 | true |
下拉選單不可超出的區域，超出時會翻轉和移動。預設為最近的可捲動祖先元素。 |
target |
布林值、CSS 選擇器 | false |
下拉選單定位的元素（true 表示視窗）。 |
target-x |
布林值、CSS 選擇器 | false |
下拉選單定位的元素的 X 軸（true 表示視窗）。 |
target-y |
布林值、CSS 選擇器 | false |
下拉選單定位的元素的 Y 軸（true 表示視窗）。 |
offset |
數值 | 0 |
下拉選單的偏移量。 |
animation |
字串 | uk-animation-fade |
以空格分隔的動畫名稱。淡出動畫則以逗號分隔。 |
animate-out |
布林值 | false |
關閉下拉選單時使用動畫。 |
bg-scroll |
布林值 | true |
允許在下拉選單開啟時捲動背景。 |
close-on-scroll |
布林值 | false |
捲動父捲動容器時關閉下拉選單。 |
duration |
數值 | 200 |
動畫持續時間。 |
container |
布林值 | false |
透過選擇器定義目標容器，以指定下拉選單在 DOM 中的附加位置。 |
JavaScript
深入了解 JavaScript 元件。
初始化
UIkit.navbar(element, options);事件
以下事件將在附加此元件的元素上觸發
| 名稱 | 描述 |
|---|---|
beforeshow |
在項目顯示前觸發。可透過在事件上呼叫 preventDefault() 來阻止顯示。 |
show |
在項目顯示後觸發。 |
shown |
在項目顯示動畫完成後觸發。 |
beforehide |
在項目隱藏前觸發。可透過在事件上呼叫 preventDefault() 來阻止隱藏。 |
hide |
在項目隱藏動畫開始後觸發。 |
hidden |
在項目隱藏後觸發。 |
無障礙功能
Navbar 元件遵循 Disclosure Navigation Menu WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 狀態和屬性。
- 導覽項目 和 切換項目 具有
aria-expanded狀態和aria-haspopup屬性。 - 切換項目 也具有
aria-label屬性。
鍵盤互動
可以使用以下按鍵透過鍵盤存取 Navbar 元件。
- tab 或 shift+tab 按鍵將焦點放置在 navbar 內或外。
- 左/右箭頭 按鍵在 navbar 項目之間導覽。在 hover 模式下，下拉選單會自動開啟。如果焦點位於最後一個項目，則會移動到第一個項目。
- enter 或 space 按鍵會開啟和關閉焦點 navbar 項目的下拉選單。
- 上/下箭頭 按鍵會在下拉選單中的導覽項目之間導覽。如果焦點位於最後一個項目，則會移動到第一個項目。
- esc 按鍵會關閉任何下拉選單，即使焦點已移動到另一個元素。
國際化
切換項目元件使用以下翻譯字串。深入了解 翻譯元件。
| 鍵 | 預設值 | 描述 |
|---|---|---|
label |
開啟選單 |
aria-label 屬性。 |