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 つ用意されており、マウスオーバー状態とアクティブ状態にそれぞれスタイルが当てられている。
ページの最上部にナビゲーションを固定させたり、アイテムを縦に並べたり、反転色にしたり色をつけたり、アイテムのコンテンツをアイコンにしたり、他のコンポーネントにナビゲーションをくっつけて表示したり、オプションもたくさんある。
設定を工夫すればページネーションなどにも使えるコンポーネントなので、使いどころは多そうだ。
