UIkit3.x文档

子导航

为子导航定义各种样式。

用法

要应用此组件,请使用以下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>