Skip to content

ナビバー

水平・垂直ナビゲーションバー。

基本的な使い方

html
<nav class="kit-navbar">
  <a class="kit-navbar-brand" href="#">ブランド</a>
  <a class="kit-navbar-item -active" href="#">ホーム</a>
  <a class="kit-navbar-item" href="#">概要</a>
  <a class="kit-navbar-item" href="#">連絡先</a>
  <div class="kit-navbar-group">
    <a class="kit-navbar-item" href="#">ログイン</a>
  </div>
</nav>

垂直(サイドバー)

html
<nav class="kit-navbar -vertical">
  <a class="kit-navbar-brand" href="#">ブランド</a>
  <a class="kit-navbar-item -active" href="#">ダッシュボード</a>
  <a class="kit-navbar-item" href="#">設定</a>
  <a class="kit-navbar-item" href="#">ファイル</a>
</nav>

コンパクト

html
<nav class="kit-navbar -compact">
  <a class="kit-navbar-brand" href="#">アプリ</a>
  <a class="kit-navbar-item -active" href="#">ホーム</a>
  <a class="kit-navbar-item" href="#">ファイル</a>
  <a class="kit-navbar-item" href="#">設定</a>
</nav>