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

ドキュメント

サブナビ

サブナビゲーションのさまざまなスタイルを定義します。

使い方

このコンポーネントを適用するには、以下のクラスを使用します。サブナビを整列させる（例：水平方向に中央揃えにする）には、Flexコンポーネントを使用できます。

クラス 説明
.uk-subnav サブナビコンポーネントを定義するには、<ul>要素にこのクラスを追加します。リスト内のナビアイテムには<a>要素を使用します。
.uk-active アクティブな状態を適用するには、リストアイテムにこのクラスを追加します。

リンクなしでリストアイテムを追加するには、<a>の代わりに<span>要素を使用します。または、キーボード操作でアクセスできないように、<li>要素に.uk-disabledクラスを追加し、アンカーから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>