跳到主要内容

文档

子导航

定义子导航的不同样式。

用法

要应用此组件，请使用以下类。要对齐子导航，例如使其水平居中，可以使用弹性布局组件。

类 描述
.uk-subnav 将此class添加到 <ul> 元素以定义子导航组件。使用 <a> 元素作为列表中的导航项。
.uk-active 将此class添加到列表项以应用活动状态。

要添加没有链接的列表项，请使用 <span> 元素而不是 <a>。或者，通过将 .uk-disabled class添加到 <li> 元素并从锚点移除 href 属性来禁用 <a> 元素，使其无法通过键盘导航访问。

<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>

注意 为了更好的布局，如果项目应该换行到下一行，请添加来自外边距组件的 uk-margin 属性。

分隔符修饰符

添加 .uk-subnav-divider class 以使用线条分隔菜单项。

<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>

您还可以将来自下拉菜单组件的下拉菜单与子导航一起使用。

<ul class="uk-subnav">
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </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>