子导航

为子导航定义不同的样式。

用法

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

类	描述
`.uk-subnav`	将此类添加到 `<ul>` 元素，并将 `<a>` 元素嵌套在列表中。
`.uk-active`	将此类添加到列表项以应用活动状态。
`.uk-disabled`	将此类添加到列表项以应用禁用状态。

示例

标记

<ul class="uk-subnav">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

修饰符

子导航线

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

示例

标记

<ul class="uk-subnav uk-subnav-line">
    <li>...</li>
</ul>

子导航胶囊

添加 .uk-subnav-pill 类以使用背景突出显示活动菜单项。要将活动状态应用于菜单项，只需添加 .uk-active 类。

示例

标记

<ul class="uk-subnav uk-subnav-pill">
    <li class="uk-active">...</li>
</ul>

带有下拉菜单的子导航

这是一个如何将子导航与下拉菜单组件结合使用的示例。

示例

标记

<ul class="uk-subnav">
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

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

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>