Navbar
创建带下拉菜单的导航栏，用于站点主导航。
导航栏（Navbar）组件会用相同的选项初始化所有下拉菜单，因此不必逐个初始化。导航栏内的所有下拉菜单都具备指向感知（aim-aware）能力：只要鼠标指针朝下拉菜单方向移动，菜单就会保持展开。此外还有一个额外的延迟，即使鼠标指针短暂移向其他方向，菜单也依然保持展开。在悬停模式下，如果悬停到另一个菜单项上，当前下拉菜单会立即关闭。
用法
Navbar 组件由导航栏容器、导航栏本身以及一个或多个导航组成。
| 元素 | 描述 |
|---|---|
uk-navbar |
为 <nav> 元素添加该属性来定义 Navbar 组件。 |
.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>
导航栏和导航栏容器都没有水平内边距。要设置与页面其他部分相同的水平内边距，请使用 Container 组件。
<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>透明修饰符
当网站的 hero 区域使用图片或彩色背景时，你可能希望把导航栏设为透明。只需在含有 .uk-navbar-container 类的同一元素上添加 .uk-navbar-transparent 类。如有需要，还可以添加 Inverse 组件 中的 .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> 元素。再为另一个 <div> 元素添加 .uk-navbar-subtitle 类。
<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>内容项
你还可以向导航栏添加自定义内容，例如文本、图标、按钮或表单。为作为内容容器的 <div> 元素添加 .uk-navbar-item 类。
<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>为 <a> 或 <div> 元素添加 Utility 组件 中的 .uk-logo 类来表示你的品牌。
<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>居中 logo
你可以创建带居中 logo 的分栏菜单。只需在同一个导航栏容器内，为一个导航栏添加 uk-navbar-center-left 类，为另一个导航栏添加 uk-navbar-center-right 类。这样 logo 会保持居中，而菜单分别对齐到左右两侧。
<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>切换项
为 <a> 或 <div> 元素添加 .uk-navbar-toggle 类和 uk-navbar-toggle-icon 属性，即可创建一个图标作为切换按钮。默认情况下，该切换按钮不附带任何 JavaScript 行为。举例来说，你可以为它添加 Offcanvas 组件 的抽屉导航，或 Modal 组件 的模态框。
<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="mode: click">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" 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>
<nav class="uk-navbar-container uk-margin">
<div class="uk-container">
<div uk-navbar="mode: click">
<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 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>下拉菜单
导航栏可以包含 Dropdown 组件 的下拉菜单。只需为下拉菜单添加 .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>点击模式
导航栏内的父级菜单项既可以通过悬停，也可以通过点击切换按钮来展开。只需为 uk-navbar 属性添加 mode: click 选项。
<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>对齐
默认情况下，下拉菜单定位在导航栏项的下方，并左对齐。要改变对齐方式，请为 uk-navbar 属性设置 align 选项。
| 位置 | 描述 |
|---|---|
left |
将下拉菜单左对齐。 |
right |
将下拉菜单右对齐。 |
center |
将下拉菜单居中对齐。 |
<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>目标
默认情况下，下拉菜单对齐到它所属的导航栏项。要把下拉菜单定位到其他元素，只需为 uk-navbar 属性添加 target: SELECTOR 选项。
<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
dropbar 会延伸到导航栏的整个宽度，并以不带默认样式的方式显示下拉菜单。要把下拉菜单放进这样的 dropbar 中，请为 uk-navbar 添加 dropbar: true 选项。此外还可以使用 dropbar-anchor 选项，指定 dropbar 将被注入到哪个元素之后。
<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>拉伸
要拉伸下拉菜单，请使用 Drop 组件 及其 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>父级图标
要创建父级图标，只需为 <span> 元素添加 uk-navbar-parent-icon 属性。
<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>宽度与网格
你可以在下拉菜单中放置 Grid 组件 的网格。只需用 <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>粘性导航栏
要实现基础的粘性导航栏，请把导航栏包裹在带有 Sticky 组件 的 uk-sticky 属性的容器中。
导航栏本身有一个修饰符类 uk-navbar-sticky，可为粘性状态确保优化的样式（例如额外的阴影）。要让 Sticky 组件动态添加和移除该类，请设置 cls-active: uk-navbar-sticky。要确保该类被添加到导航栏容器上，请设置 sel-target: .uk-navbar-container。
注意 你可以在 Sticky Navbar 的测试中查看更多示例。
<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>除了使用下拉菜单，你还可以在 dropbar 中显示子导航，它会横跨导航栏下方的整个宽度。只需在 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，让导航栏先消失，等用户向下滚动超过导航栏 200px 后再重新出现。这种情况下，导航栏还能以动画滑入。只需设置 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 透明模式
如果透明导航栏需要打开 dropbar，要优化它的外观，请把 dropbar-transparent-mode 选项设置为以下值之一。
| 模式 | 描述 |
|---|---|
remove |
打开 dropbar 时移除导航栏的透明效果，关闭 dropbar 时再重新添加。 |
behind |
在导航栏后方打开 dropbar，使导航栏内容显示在 dropbar 背景之上。 |
使用 Inverse 组件 可根据背景为透明导航栏着色。要防止导航栏在不再透明时改变颜色，只需为 uk-inverse 属性添加 sel-active: .uk-navbar-transparent 选项。
例如，如果导航栏只在 hero 区域透明，而在粘性状态下不透明，请设置 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，让 dropbar 在导航栏后方打开，这样它就不再透明了。
<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 把 dropbar 放到混合元素之外，并用 container 把下拉菜单放出去。否则 dropbar 和下拉菜单也会与页面背景混合。这也意味着 dropbar 会被放在粘性容器之外。结果就是只有导航栏保持粘性，已打开的 dropbar 会滚出视野。因此我们新增了 close-on-scroll 选项，用于在滚动之前关闭 dropbar。
由于只有白色能与页面背景良好混合，请确保导航栏使用浅色，或使用 .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>分别着色导航栏各部分
要分别着色导航栏的各个部分，只需为 uk-inverse 属性添加 target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right 选项。
<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>关于根据页面背景为导航栏着色的更详细信息，请参阅 Inverse 组件。
组件选项
这些选项都可以应用到组件属性上。多个选项之间用分号分隔。了解更多
| 选项 | 值 | 默认 | 描述 |
|---|---|---|---|
align |
String | left |
下拉菜单的对齐方式（left、right、center）。 |
dropbar |
Boolean | false |
启用或禁用 dropbar 行为。 |
dropbar-anchor |
CSS selector | false |
如果设置，dropbar 将被插入到锚点元素之后。 |
dropbar-transparent-mode |
Boolean, String | false |
dropbar 的透明模式（behind、remove）。 |
stretch |
Boolean, String | false |
在双轴（true）或指定轴（x、y）上拉伸下拉菜单。 |
mode |
String | click, hover |
以逗号分隔的下拉菜单触发方式列表（click、hover）。 |
delay-show |
Number | 0 |
悬停模式下显示下拉菜单前的延迟时间，单位为毫秒。 |
delay-hide |
Number | 800 |
悬停模式下隐藏下拉菜单前的延迟时间，单位为毫秒。 |
boundary |
CSS selector | true |
下拉菜单不可超出的区域，超出时会导致翻转和位移。默认为最近的可滚动祖先元素。 |
target |
Boolean, CSS selector | false |
下拉菜单定位所依据的元素（设为 true 表示窗口）。 |
target-x |
Boolean, CSS selector | false |
下拉菜单定位所依据的元素的 X 轴（设为 true 表示窗口）。 |
target-y |
Boolean, CSS selector | false |
下拉菜单定位所依据的元素的 Y 轴（设为 true 表示窗口）。 |
offset |
Number | 0 |
下拉菜单的偏移量。 |
animation |
String | uk-animation-fade |
以空格分隔的动画名称。以逗号分隔表示动画退出。 |
animate-out |
Boolean | false |
关闭下拉菜单时使用动画。 |
bg-scroll |
Boolean | true |
下拉菜单打开时是否允许背景滚动。 |
close-on-scroll |
Boolean | false |
滚动父级滚动容器时关闭下拉菜单。 |
duration |
Number | 200 |
动画持续时间。 |
container |
Boolean | false |
通过选择器定义目标容器，以指定下拉菜单应追加到 DOM 中的位置。 |
JavaScript
了解更多关于 JavaScript 组件 的信息。
初始化
UIkit.navbar(element, options);事件
以下事件会在绑定了该组件的元素上触发：
| 名称 | 描述 |
|---|---|
beforeshow |
在某个项显示之前触发。可通过在事件上调用 preventDefault() 阻止显示。 |
show |
在某个项显示之后触发。 |
shown |
在某个项的显示动画完成之后触发。 |
beforehide |
在某个项隐藏之前触发。可通过在事件上调用 preventDefault() 阻止隐藏。 |
hide |
在某个项的隐藏动画开始之后触发。 |
hidden |
在某个项隐藏之后触发。 |
可访问性
Navbar 组件遵循 Disclosure 导航菜单 WAI-ARIA 设计模式，并会自动设置相应的 WAI-ARIA 状态和属性。
- 导航项和切换项具有
aria-expanded状态和aria-haspopup属性。 - 切换项还具有
aria-label属性。
键盘交互
可以通过以下按键使用键盘访问 Navbar 组件。
- tab 或 shift+tab 键将焦点移入或移出导航栏。
- left/right arrow 键在导航栏各项之间移动。在悬停模式下，下拉菜单会自动打开。如果焦点位于最后一项，则移动到第一项。
- enter 或 space 键打开和关闭当前聚焦的导航栏项的下拉菜单。
- up/down arrow 键在下拉菜单的导航项之间移动。如果焦点位于最后一项，则移动到第一项。
- esc 键关闭任何下拉菜单，即使焦点已经移到其他元素上。
国际化
切换项组件使用以下翻译字符串。了解更多关于 翻译组件 的信息。
| 键 | 默认 | 描述 |
|---|---|---|
label |
Open Menu |
aria-label 属性。 |