子导航／Subnav

为子导航定义各种样式。

用法

要应用此组件，请使用以下class。要对齐子导航，例如使其水平居中，可以使用 Flex 组件.

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

要添加没有链接的列表项，请使用 <span> 元素而不是 <a>。还可以将 .uk-disabled class添加到<li>元素来禁用 <a> 元素，这样会从锚点中移除 href 属性，使其无法通过键盘导航选中它。

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

注意 为了更好的布局效果，如果导航单元要换到下一行，可以添加 Margin 组件 中的 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>

可以将下拉组件 Dropdown 组件 中的下拉列表与子导航一起使用。

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

        <!-- 这是切换下拉菜单的菜单项 -->
        <a href=""></a>

        <!-- 这是下拉菜单 -->
        <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>

上一篇： Sticky

下一篇： Svg

subnav.md

# 子导航／Subnav

<p class="uk-text-lead">为子导航定义各种样式。</p>

## Usage-用法

要应用此组件，请使用以下class。要对齐子导航，例如使其水平居中，可以使用 [Flex 组件](flex.md).

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

要添加没有链接的列表项，请使用 `<span>` 元素而不是 `<a>`。还可以将 `.uk-disabled` class添加到`<li>`元素来禁用 `<a>` 元素，这样会从锚点中移除 `href` 属性，使其无法通过键盘导航选中它。

```html
<ul class="uk-subnav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>
```

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

**注意** 为了更好的布局效果，如果导航单元要换到下一行，可以添加 [Margin 组件](margin.md) 中的 `uk-margin` 属性。

***

## Divider modifier-分隔线

添加 `.uk-subnav-divider` class用线条将菜单单元分隔开。

```html
<ul class="uk-subnav uk-subnav-divider">...</ul>
```

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

***

## Pill modifier-胶囊效果

添加 `.uk-subnav-pill` class可以添加背景来突出显示活动菜单项。

```html
<ul class="uk-subnav uk-subnav-pill">...</ul>
```

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

***

## Subnav and Dropdown-子导航和下拉菜单

可以将下拉组件 [Dropdown 组件](dropdown.md) 中的下拉列表与子导航一起使用。

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

        <!-- 这是切换下拉菜单的菜单项 -->
        <a href=""></a>

        <!-- 这是下拉菜单 -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">...</ul>
        </div>

    </li>
</ul>
```

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