跳至主要內容

文件

子導覽列

定義子導覽列的不同樣式。

使用方式

要套用此元件，請使用以下類別。若要對齊子導覽列，例如將其水平置中，可以使用彈性元件。

類別 說明
.uk-subnav 將此類別新增至 <ul> 元素以定義子導覽列元件。在清單內使用 <a> 元素作為導覽項目。
.uk-active 將此類別新增至清單項目以套用啟用狀態。

若要新增沒有連結的清單項目，請使用 <span> 元素取代 <a>。或者，停用 <a> 元素，方法是將 .uk-disabled 類別新增至 <li> 元素，並從錨點移除 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>

注意 為了更好的版面配置，如果項目應該換到下一行，請從外距元件新增 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>