子导航
为子导航定义各种样式。
用法
要应用此组件，请使用以下class。要对齐子导航，例如使其水平居中，可以使用Flex 组件。
| Class | Description |
|---|---|
.uk-subnav |
添加到<ul>元素中定义子导航组件。使用<a>元素作为导航列表中的导航项。
|
.uk-active |
添加到列表项以应用活动状态。 |
要添加没有链接的列表项，请使用<span>元素而不是<a>。还可以将.uk-disabledclass添加到<li>元素来禁用<a>元素，这样会从锚点中移除href属性，使其无法通过键盘导航选中它。
<ul class="uk-subnav">
<li class="uk-active"><a href=""></a></li>
<li><a href=""></a></li>
<li><span></span></li>
</ul>
-
<ul class="uk-subnav" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><span>Disabled</span></li> </ul>
Note为了更好的布局效果，如果导航单元要换到下一行，可以添加Margin
组件中的uk-margin 属性。
分隔线
添加.uk-subnav-divider用线条将菜单单元分隔开。
<ul class="uk-subnav uk-subnav-divider">...</ul>
-
<ul class="uk-subnav uk-subnav-divider" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul>
胶囊效果
添加.uk-subnav-pill class可以添加背景来突出显示活动菜单项。
<ul class="uk-subnav uk-subnav-pill">...</ul>
-
<ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul>
带下拉菜单的子导航
可以将下拉组件Dropdown组件中的下拉列表与子导航一起使用。
<ul class="uk-subnav">
<li>
<a href=""></a>
<div uk-dropdown="mode: click;"></div>
</li>
</ul>
-
<ul class="uk-subnav uk-subnav-pill" uk-margin> <li class="uk-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li> <a href="#">More <span uk-icon="icon: triangle-down"></span></a> <div uk-dropdown="mode: click;"> <ul class="uk-nav uk-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>