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

ドキュメント

アイコンナビ

アイコンで構成されたナビゲーションを作成します。

使い方

このコンポーネントを適用するには、.uk-iconnav クラスを <ul> 要素に追加します。リスト内のメニュー項目として <a> 要素を使用し、アイコンコンポーネントからアイコンを追加します。メニュー項目にアクティブ状態を適用するには、.uk-active クラスを追加します。

<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: check"></a></li>
</ul>
  • <ul class="uk-iconnav">
    <li><a href="#" uk-icon="icon: plus"></a></li>
    <li><a href="#" uk-icon="icon: file-edit"></a></li>
    <li><a href="#" uk-icon="icon: copy"></a></li>
    <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>

垂直方向の配置

デフォルトでは、アイコンナビのアイテムは水平方向に配置されます。垂直方向の配置を適用するには、.uk-iconnav-vertical クラスを追加します。

<ul class="uk-iconnav uk-iconnav-vertical">…</ul>
  • <ul class="uk-iconnav uk-iconnav-vertical">
    <li><a href="#" uk-icon="icon: plus"></a></li>
    <li><a href="#" uk-icon="icon: file-edit"></a></li>
    <li><a href="#" uk-icon="icon: copy"></a></li>
    <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>

アクセシビリティ

適切なWAI-ARIAのロール、状態、およびプロパティをアイコンナビコンポーネントに設定します。

<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: check" aria-label="…"></a></li>
</ul>