跳至主要內容

文件

導覽列

定義清單導覽的不同樣式。

用法

要套用此組件，請使用以下類別。

類別 描述
.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);

切換內容窗格。

名稱 類型 預設 描述
index 字串、數字、節點 0 要切換的導覽窗格。 從 0 開始的索引。
animate 布林值 true 傳遞 false 以抑制開啟動畫。