跳到主要内容

文档

导航

为列表导航定义不同的样式。

用法

要应用此组件，请使用以下类。

类 描述
.uk-nav 将此类添加到 <ul> 元素以定义导航组件。在列表中使用 <a> 元素作为导航项。
.uk-active 将此类添加到列表项以将激活状态应用于菜单项。 
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

注意 默认情况下，导航没有样式。这就是为什么添加修饰符类很重要。在我们的示例中，我们正在使用 .uk-nav-default 类。

嵌套导航

将 .uk-parent 类添加到某个项目以将其转换为父项。将 .uk-nav-sub 类添加到项目内部的 <ul> 元素以创建子导航。

<ul class="uk-nav">
    <li class="uk-parent">
        <a href=""></a>
        <ul class="uk-nav-sub">
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>…</ul>
            </li>
        </ul>
    </li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

手风琴

默认情况下，子菜单项始终可见。要应用手风琴效果，只需将 uk-nav 属性添加到主 <ul>。

注意 该属性会自动设置 .uk-nav 类，因此您不必手动应用它。

<ul uk-nav>…</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

父项图标

要创建父项图标，只需将 uk-nav-parent-icon 属性添加到 <span> 元素。

<ul uk-nav>
    <li>
        <a href="">Parent <span uk-nav-parent-icon></span></a>
        …
    </li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

多个打开的子导航

单击父项时，打开的子导航将关闭，一次只允许打开一个嵌套列表。要允许多个打开的子导航，只需将 multiple: true 选项添加到该属性。

<ul uk-nav="multiple: true">…</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav="multiple: true">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

标题和分隔符

将以下类之一添加到列表项以创建标题或项目之间的分隔符。

元素 描述
.uk-nav-header 将此类添加到 <li> 元素以创建标题。
.uk-nav-divider 将此类添加到 <li> 元素以创建分隔导航项的分隔符。 
<li class="uk-nav-header"></li>

<li class="uk-nav-divider"></li>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <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>

副标题

将 .uk-nav-subtitle 类添加到 div 元素以创建带有副标题的项目。

<ul class="uk-nav">
    <li>
        <a href="">
            <div>
                Item
                <div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div>
            </div>
        </a>
    </li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
    </ul>
</div>

默认修饰符

添加 .uk-nav-default 类，使导航具有默认样式。您可以将导航放在卡片内或内容中的任何其他位置。

<ul class="uk-nav uk-nav-default">…</ul>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
</div>

主修饰符

添加 .uk-nav-primary 类，使导航具有更独特的样式，例如将其放置在模态框内时。

<ul class="uk-nav uk-nav-primary">…</ul>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

辅助修饰符

如果导航有副标题，则添加 .uk-nav-secondary 类以获得额外的样式。

<ul class="uk-nav uk-nav-secondary">…</ul>
<div class="uk-width-1-2@s">
    <ul class="uk-nav uk-nav-secondary">
        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
    </ul>
</div>

居中修饰符

将 .uk-nav-center 类添加到中心导航项目。这可以与默认和主样式修饰符结合使用。

<ul class="uk-nav uk-nav-default uk-nav-center">…</ul>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-center" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

分隔符修饰符

添加 .uk-nav-divider 类以使用线条分隔导航项。这可以与默认、主和辅助样式修饰符结合使用。

<ul class="uk-nav uk-nav-default uk-nav-divider">…</ul>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-divider" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

尺寸修饰符

添加以下类之一以修改主导航的大小。

类 描述
.uk-nav-medium 添加此类以应用中等大小的主导航。
.uk-nav-large 添加此类以应用大型主导航。
.uk-nav-xlarge 添加此类以应用超大型主导航。 
<ul class="uk-nav uk-nav-primary uk-nav-large">…</ul>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-large" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

添加 .uk-dropdown-nav 类以将导航放置在 下拉组件 的默认下拉菜单中。

<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <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>

添加 .uk-navbar-dropdown-nav 类以将导航放置在 导航栏组件 的导航栏下拉菜单中。

<div class="uk-navbar-dropdown">
    <ul class="uk-nav uk-navbar-dropdown-nav">…</ul>
</div>
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-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>

    </div>
</nav>

导航可以在来自 侧边栏组件 的侧边栏内使用。无需添加修饰符类。

打开 
<a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle>Open</a>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <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>
</div>

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多

选项 值 默认值 描述
targets CSS 选择器 > .uk-parent 要切换的元素。
toggle CSS 选择器 > a 切换元素。
content CSS 选择器 > ul 内容元素。
collapsible 布尔值 true 允许关闭所有项。
multiple 布尔值 布尔值 false
允许打开多个项。 transition 字符串 ease
要使用的过渡效果。 animation true 布尔值，字符串
用空格分隔的 动画 名称。用逗号分隔以表示动画退出。 duration 200 数字

JavaScript

动画持续时间，以毫秒为单位。

了解有关 JavaScript 组件的更多信息。

UIkit.nav(element, options);

初始化

方法

切换

UIkit.nav(element).toggle(index, animate);

以下方法可用于该组件

切换内容窗格。 名称 默认值 描述
类型 索引 0 字符串、数字、节点
要切换的导航窗格。基于 0 的索引。 布尔值 true animate