跳至主要内容

文档

子导航

定义子导航的不同样式。

用法

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

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

要添加没有链接的列表项，请使用 <span> 元素而不是 <a>。或者，通过将 .uk-disabled 类添加到 <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 类以使用线条分隔菜单项。

<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 类以使用背景突出显示活动菜单项。

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