メインコンテンツへスキップ

ドキュメント

ナビゲーション

リストナビゲーションに異なるスタイルを定義します。

使用方法

このコンポーネントを適用するには、次のクラスを使用します。

クラス 説明
.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クラスを追加して、親にします。 サブナビゲーションを作成するには、アイテム内の<ul>要素に.uk-nav-subクラスを追加します。

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

アコーディオン

デフォルトでは、子メニューアイテムは常に表示されます。アコーディオン効果を適用するには、メインの<ul>にuk-nav属性を追加するだけです。

注記 属性は自動的に.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>

親アイコン

親アイコンを作成するには、<span>要素にuk-nav-parent-icon属性を追加するだけです。

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

複数の開いているサブナビゲーション

親アイテムをクリックすると、開いているアイテムが閉じ、一度に開くことができるネストされたリストは1つだけになります。複数のサブナビゲーションを開くことができるようにするには、属性に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>

サブタイトル

div要素に.uk-nav-subtitleクラスを追加して、アイテムのサブタイトルを作成します。

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

デフォルトモディファイア

.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-small-right" uk-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#"><span class="uk-margin-small-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>

センタリングモディファイア

ナビゲーションアイテムを中央に配置するには、.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を渡すことで、開始アニメーションを抑制します。