ナビゲーションバー

ナビゲーションバー用コンポーネント(部品一式)。

基本例と部品構成

構造

• バー nav.navbar
  • トグラー設定 .navbar-expand-md (mdブレークポイントで展開/折り畳み)
  • 配色設定 .navbar-light.bg-light ⇒ バーの配色
  • ブランド表示 a.navbar-brand
    • テキスト Navbar
  • トグラー button.navbar-toggler (折り畳み時に表示)
    • アイコン(三本線) span.navbar-toggler-icon
  • 折り畳みラッパー div.collapse.navbar-collapse (展開時に表示 ⇒ トグラー )
    • ナビゲーション ul.navbar-nav.mr-auto
      • アイテム Home Link ...
    • フォーム form.form-inline
      • 入力コントロール input.form-control
      • ボタン button.btn.btn-outline-success

ブランド表示

(1) 標準 (a|span).navbar-brand

構造

• バー nav.navbar
  • 色設定は バーの配色 を参照
  • ブランド表示 (a|span).navbar-brand 属性
    • (要素が a の場合) 属性 href="..."
    • テキスト(例) Navbar

(2) ヘッダ風スタイル (a|span).navbar-brand.h1

構造

• バー(同上)
  • ブランド表示 (a|span).navbar-brand.h1.mb-0 属性
    • ヘッダ風テキスト設定 .h1 ( タイポグラフィ - 見出し を参照)
    • マージン調整 .mb-0 (ヘッダ用マージン設定を除去)

(3) 画像のみ

構造

• バー(同上)
  • ブランド表示 (a|span).navbar-brand
    • 画像 img 属性
      • 属性 href="..."
      • 属性 width="..."
      • 属性 height="..."
      • 属性 alt="..."

(4) 画像とテキスト

構造

• バー(同上)
  • ブランド表示 (a|span).navbar-brand
    • 画像 img 属性
      • 表示 .d-inline-block (⇒ 表示ユーティリティ )
      • 上下アラインメント .align-top (⇒ 上下アライン )
      • 他の属性は(3) 画像のみと同じ
    • テキスト  Bootstrap (画像との間に空白文字が必要)

ナビゲーション

レスポンシブ動作するナビゲーションバーではナビゲーションとトグラーを組み合わせて用いる。トグラーで指定したブレークポイントより画面幅が小さくなるとバーに配置したナビゲーションアイテムが自動的に折り畳まれ、展開用アイコンを表示する。

(1) 標準的な例: ul ベースのナビゲーションを使用

構造

• バー
  • ブランド表示
  • トグラー (詳しくは トグラーの例 参照)
  • 折り畳みラッパーdiv.collapse.navbar-collapse 属性
    • 属性(必須) id="navbarNavAltMarkup"
    • ナビゲーション ul.navbar-nav
      • アクティブアイテムの場合 li.nav-item.active
        • リンク a.nav-item.nav-link.active 属性
          • 属性 href="..."
          • テキスト(例) Home
          • スクリーンリーダ用 span.sr-only
            • テキスト (current)
      • 他の(通常とdisabled)アイテムは ナビゲーション - 基本構成 と同様

(2) ナビゲーションのベース要素に div.navbar-nav を用いる場合(DOM階層を1層低くできる)

構造

(3) ドロップダウン付き

構造

フォーム

ナビゲーションバーの内部にインラインフォーム form.form-inline を用いることができる。

(1) 単純な例(トグラーなし)

構造

• バー(トグラーなし)
  • インラインフォーム form.form-inline
    • 入力コントロール input.form-control 属性
      • (レスポンシブ)マージン .mr-sm-2
      • 属性 type="search"
      • 属性 placeholder="Search"
      • アクセシビリティ属性 aria-label="Search"
    • アウトラインボタン button.btn.btn-outline-success 属性
      • (レスポンシブ)マージン .my-2.my-sm-0
      • 属性 type="submit"
      • テキスト Search

(2) 配置

構造

• バーに .justify-content-between を追加(⇒ Flexboxユーティリティ )
  • ブランド表示
  • インラインフォーム - (1) 単純な例(トグラーなし) と同じ

(3) インプットグループ を用いる場合

構造

• バー(同じ)
  • インラインフォーム form.form-inline
    • インプットグループ div.input-group
      • 内部は インプットグループ - 基本例 と同様

(4) ボタンとそのサイズ設定

構造

• バー
  • インラインフォーム form.form-inline
    • アウトラインボタン button.btn.btn-outline-success 属性
      • 属性 type="button"
      • テキスト Main button
    • アウトラインボタン(小) button.btn.btn-sm.btn-outline-secondary 属性
      • マージン .ml-2 (⇒ 空白ユーティリティ )
      • 属性 type="button"
      • テキスト Smaller button

テキスト

ナビゲーションバー内部の通常テキストには span.navbar-text を用いる。

例(1)

例(2)

バーの配色

テキスト配色と背景色の両方で設定する。

• テキスト配色(どちらか片方を必ず設定).navbar-(light|dark)
  • .navbar-light : 明色背景用テキスト配色
  • .navbar-dark : 暗色背景用テキスト配色
• 背景色 .bg-(primary|secondary|...)
  • 背景色を参照
  • カスタムスタイルによる記述も可(例) style="backgroudnd-color: lightblue;"

例(公式ドキュメントより、若干修正)

nav.navbar.navbar-dark.bg-dark

nav.navbar.navbar-dark.bg-primary

nav.navbar.navbar-light +属性 style="background-color: #e3f2fd;"

コンテナ

ナビゲーションバーをコンテナの外部(通常は body のすぐ下)に配置すると画面幅いっぱいに表示する(次はその例)。

本ページのこれ以外のナビゲーションバーはすべてコンテナ div.container の内側に設定している(レスポンシブ幅、中央揃え配置)。

次の例は表示は上とほぼ同じだが、画面幅がlg以上の時だけブランド表示の手前にパディングを多めに取る。これはナビゲーションバー内部にコンテナを用いた場合の特殊動作を説明するためのもの。

構造

• ナビゲーションバー nav.navbar
  • トグラー設定 .navbar-expand-lg (lgブレークポイントで展開/折り畳み)
  • コンテナ div.container
    • ブランド表示 Navbar

デフォルト状態のコンテナは左右15pxずつのパディング(gutter)を設定するが、トグラー付きナビゲーションバーの内部にあるコンテナは折り畳み時にパディング(gutter)を除去する。

• 幅≥lg (展開時) ⇒ gutterを設定 (Navbar の手前に15px余計にパディングが付く)
• 幅<lg (折り畳み時) ⇒ gutterを除去

バーの配置

• デフォルト: position: relative
• 上端固定: position: fixed
• 下端固定: position: fixed
• 上端張り付き: position: sticky

(1) デフォルト nav.navbar (ページと一緒にスクロールする)

(2) 上端固定 nav.navbar.fixed-top

⇒ デモページ

(3) 下端固定 nav.navbar.fixed-bottom

⇒ デモページ

(4) 上端張り付き nav.navbar.sticky-top

⇒ デモページ

レスポンシブ動作の設定

ナビゲーションバーはトグラーを使ってレスポンシブ動作を行う。

• 2種類のレイアウト(展開/折り畳み)を特定のブレークポイント(lt, md, lg, xlのいずれか)で切り替える
• 展開時はバーに配置したすべてのアイテム(ブランド、ナビゲーション、フォーム等)を表示する
• 折り畳み時はアイテムを非表示にして三本線アイコンを表示
  • アイコンをクリックすると折り畳まれていたアイテムを展開して上下積み重ね表示

トグラー

基本例

構造

• バー nav.navbar.navbar-light.bg-light 属性
  • トグラー設定 .navbar-expand-md (mdブレークポイントで展開/折り畳み)
  • ブランド表示 a.navbar-brand ...
  • トグラー button.navbar-toggler (折り畳み時に表示) 属性
    • 属性 type="button"
    • 属性 data-toggle="collapse"
    • 属性 data-target="#toggler-demo" (折り畳みラッパーを設定)
    • アクセシビリティ属性 aria-controls="toggler-demo"
    • アクセシビリティ属性 aria-expanded="false"
    • アクセシビリティ属性 aria-label="Toggle navigation"
    • アイコン(三本線) span.navbar-toggler-icon
  • 折り畳みラッパー div.collapse.navbar-collapse (展開時に表示) 属性
    • 属性(必須) id="toggler-demo"
    • ナビゲーション ul.navbar-nav 属性
      • (レスポンシブ)マージン調整 .mr-auto.mt-2.mt-md-0
      • アイテム li.nav-item(.active)
    • フォーム form.form-inline ...

トグラーのブレークポイント設定は .navbar-expand-(sm|md|lg|xl) を用いるが、常に展開したままにする場合は代わりに .navbar-expand を用いる。次の例は上の基本例と同じだが .nabvar-expand-md を .nabvar-expand に変えただけのもの(折り畳まない)。

バリエーション(1) 折り畳み時にブランドも非表示にする(アイコンのみ表示)

構造

• バー
  • トグラー
  • 折り畳みラッパー
    • ブランド表示(ここに移動)

バリエーション(2) 折り畳み時にブランド表示を右、アイコンを左にする

構造

• 要素のDOM順序を次の通り変更する
  • トグラー
  • ブランド表示
  • 折り畳みラッパー

バーの外にあるコンテントの折り畳み

トグラーを使ってバーの外にあるコンテントの折り畳みも行うことができる。

構造

• 折り畳みラッパー(バーの外) div.collapse 属性
  • 属性(必須) id="{wrapper-id}"
  • 折り畳むコンテント div.bg-dark.p-4
    • 内部テキスト Collapsed content ...
• バー nav.navbar.navbar-dark.bg-dark (常に畳み込み状態)
  • トグラー button.navbar-toggler 属性
    • 属性 type="button"
    • 属性 data-toggle="collapse"
    • 属性 data-target="#{wrapper-id}"
    • 他の設定は トグラー - 基本例 を参照
    • アイコン(三本線) span.navbar-toggler-icon