二级导航

为二级导航设置不同的样式风格

用法

使用以下类名来应用这个组件。对齐一个二级导航，比如水平居中，你可以使用 Flex 组件。

Example

• Item
• Item
• Item
• Disabled

Markup

<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 类名，用线条将菜单条目分隔开。

Example

• Item
• Item
• Item
• Disabled

Markup

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

二级导航弹丸

添加 .uk-subnav-pill 类名，使选中状态的菜单条目拥有背景色。只需为菜单条目添加.uk-active 类名，就能让它呈现选中的状态。

Example

• Item
• Item
• Item
• Disabled

Markup

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

带下拉菜单的二级导航

这个例子展示了如何使用带有 下拉菜单 的二级导航。

Example

• Active
• Item
• Disabled
• More
  • Item
  • Another item
  • Header
  • Item
  • Another item
  • Separated item

Markup

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

    <!-- 这是启用JavaScript的容器 -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- 这是拨动下拉菜单的导航项 -->
        <a href="">...</a>

        <!-- 这是下拉菜单 -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>