Semantic UI Doc ( Collections - Menu ) を読む

Semantic UI の Menu を読んだ。メニューにテーマは 4 個ある。

Flexbox を使ったナビゲーションの集合コンポーネント。

ナビゲーションの見た目はいくつか変更でき、タブのような見た目、グローバルナビゲーションような見た目 、サイドナビゲーションのように縦に並んだ見た目などがある。

コードはこんな感じで、.menu コンテナーとその子要素 .item がある。またナビゲーションのアイテムに吹き出しをつけた見た目にするなど、アクティブ状態を示すためのクラスも用意されている。

<div class="ui three item menu">
  <a class="active item">Editorials</a>
  <a class="item">Reviews</a>
  <a class="item">Upcoming Events</a>
</div>

ナビゲーションにはタイトルの他、説明文章やフォームの入力欄、ボタンやリンクを含むことができる。ナビゲーションのアイテムをマウスオーバー（またはクリック）したとき、ドロップダウンリストやポップアップを表示することも可能。同じ階層のナビゲーションを 2 つ並べることもできる。あとはサブナビゲーションも。

状態は 2 つ用意されており、マウスオーバー状態とアクティブ状態にそれぞれスタイルが当てられている。

ページの最上部にナビゲーションを固定させたり、アイテムを縦に並べたり、反転色にしたり色をつけたり、アイテムのコンテンツをアイコンにしたり、他のコンポーネントにナビゲーションをくっつけて表示したり、オプションもたくさんある。

設定を工夫すればページネーションなどにも使えるコンポーネントなので、使いどころは多そうだ。