使い方(How it works)
ナビゲーションバーを使い始める前に知っておくべきこと:
- ナビゲーションバーは、レスポンシブ可能な折り畳みのために
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
入りの包括用の.navbar
と配色クラスが必要。 - ナビゲーションバーとそのコンテンツは、デフォルトでは幅一杯に表示する。さまざまな方法で横幅を制限するためにコンテナを変更する。
- 空白やFlexユーティリティクラスを使用して、ナビゲーションバー内の間隔や配置を制御。
- ナビゲーションバーはデフォルトでレスポンシブするが、簡単に修正して変更可能。レスポンシブの動作はJavaScriptの折り畳みプラグインに依存。
- 支援技術のユーザーにランドマーク領域として明示するには、
<nav>
要素を使用してアクセシビリティを確認するか、より一般的な<div>
などの要素を使用して、すべてのナビゲーションバーにrole="navigation"
を追加すること。 - 現在のページに
aria-current="page"
を使用するか、セット内の現在のアイテムにaria-current="true"
を使用して、現在のアイテムを示す。 - オプションの
.navbar-scroll
を追加して、max-height
を設定し、展開されたナビゲーションバーのコンテンツをスクロール。
prefers-reduced-motion
メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。
サポート済みのコンテンツ(Supported content)
ナビゲーションバーには、いくつかのサブコンポーネントが組み込まれている。必要に応じて以下から選択:
.navbar-brand
は、会社、製品、プロジェクト名に使用.navbar-nav
は、全高で軽量なナビゲーション(ドロップダウンも含む)に使用.navbar-toggler
は、折り畳みプラグインや他のナビゲーション切り替え機能で使用- Flexや空白ユーティリティは、フォームのコントロールとアクションに使用
.navbar-text
は、テキストの縦方向の中央の文字列を追加する.collapse.navbar-collapse
は、親要素のブレークポイントでナビゲーションバーのコンテンツをグループ化して非表示にする。
以下は、lg
(大)のブレークポイントで自動的にレスポンシブ(中以下のビューポートでは折り畳み表示)する明るめのテーマのナビゲーションバーに組み込まれているすべてのサブコンポーネントの例。
見本
この例では、背景色(bg-light
)と空白(mb-2
, my-lg-0
, me-sm-2
)のユーティリティクラスを使用。
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウン
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="d-flex">
<input type="search" class="form-control me-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
【設定】
nav.navbar.navbar-expand-{breakpoint}.navbar-light.bg-light
(またはdiv.navbar.navbar-expand-{breakpoint}.navbar-light.bg-light[role="navigation"]
) >div.container-{fluid|breakpoint}
《コンテナ》 >a.navbar-brand
《ブランド》+ [button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"]
>span.navbar-toggler-icon
]《切替ボタン》 + {[div.collapse.navbar-collapse[ID]
>ul.navbar-nav.me-auto.mb-2.mb-lg-0
>li.nav-item
>a.nav-link
]《ナビゲーション》 +form.d-flex
《フォーム》}
【アクセシビリティの設定】
button.navbar-toggler
に、aria-expanded="false"
属性(要素の開閉の状態を示す)aria-controls="ID"
属性(切替ボタンとメニューを関連付ける)aria-label
属性(代替テキストを指定)
a.nav-item.nav-link.active
(アクティブメニューのリンク)にaria-current="page"
(支援技術に現在のページであることを伝える)を入れる
【変更履歴】
- 【v5.0.0-alpha1】
.navbar
の直下をdiv.container-{fluid|breakpoint}
(コンテナクラス)で囲む必要あり- ナビゲーション部分:
ul.navbar-nav.mr-auto
⇒ul.navbar-nav.mr-auto.mb-2.mb-lg-0
- ナビゲーションメニューをアクティブにする場合は、
.active
をli.nav-item
に追加するのではなく、その子要素のa.nav-link
に追加 .active
関連のアクセシビリティの設定を変更(a.nav-link
>span.sr-only
⇒a.nav-link[aria-current="page"]
)- ドロップメニュー部分の設定を変更
- フォーム部分:
form.form-inline my-2 my-lg-0
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-toggle="collapse"]
⇒[data-bs-toggle="collapse"]
[data-target="#ID"]
⇒[data-bs-target="#ID"]
[data-toggle="dropdown"]
⇒[data-bs-toggle="dropdown"]
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
.mr(-{breakpoint})-*
⇒.me(-{breakpoint})-*
ブランド(Brand)
.navbar-brand
はほとんどの要素で適用可能だが、ユーティリティクラスやカスタムスタイルを必要とする要素がある場合にはアンカーリンクに設定するのが最適。
.navbar-brand
にイメージを追加するには、カスタムスタイルやユーティリティが必要になる。ここではいくつかの例を表示。
見本
●アンカーリンクでの設定
●見出しでの設定
●画像のみでの設定
●画像とテキストでの設定
Bootstrap5.xの設定例 緑背景が変更箇所
アンカーリンクでの設定<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
</nav>
見出しでの設定<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Bootstrap</span>
</div>
</nav>
画像のみでの設定<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img alt="ブランド" src="..." width="30" height="30">
</a>
</div>
</nav>
画像とテキストでの設定<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" class="d-inline-block align-top" alt="ブランド">
Bootstrap
</a>
</div>
</nav>
【設定】
<a>
などに.navbar-brand
を入れる(文字の大きさは1.25remで固定されている)
ナビゲーション(Nav)
ナビゲーションバーのナビゲーションリンクは、独自の修飾子クラスを使用して .nav
オプションを構築し、適切なレスポンシブ・スタイルのために切替クラスを使用する必要がある。ナビゲーションバーのコンテンツを安全に配置させるために、ナビゲーションバーのナビゲーションはできるだけ多くの横方向の空白を占有するようになる。
現在のページを示すために、.nav-link
に .active
クラスを追加。
アクティブな .nav-link
には、aria-current
属性も追加する必要があるので注意。
1. <nav>
> <ul>
> <li>
での設定
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"無効</a>
</li>
</ul>
</div>
</nav>
2. <nav>
> <div>
での設定
見本
そしてnavのクラスを使用すれば、好きなだけリストベースのアプローチを完全に回避可能。
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
<a class="nav-link" href="#">リンク1</a>
<a class="nav-link" href="#">リンク2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</div><!-- /.navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4の設定例(~v4.5.0) 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">ホーム <span class="sr-only">(現位置)</span></a>
<a class="nav-item nav-link" href="#">リンク1</a>
<a class="nav-item nav-link" href="#">リンク2</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</div>
</div>
</nav>
【設定】
<ul>
を使用する場合:nav.navbar
>ul.navbar-nav
>li.nav-item
>a.nav-link
<div>
を使用する場合:nav.navbar
>div.navbar-nav
>a.nav-link
- モバイル用ナビゲーションボタンとして、必ず
.navbar
に.navbar-expand-{breakpoint}
の追加と、button.navbar-toggler[data-bs-toggle="collapse"]
を設定すること - リンクをアクティブにする場合:
a.nav-link
に.active
を追加 - リンクを無効にする場合:
a.nav-link
に.disabled
を追加
【アクセシビリティの設定】
a.nav-link.active
にaria-current="page"
(支援技術に現在のページであることを伝える)を入れる.disabled
と同じ要素に、tabindex="-1"
(リンクにキーボードフォーカスを受け取らないようにする)とaria-disabled="true"
(支援技術に要素が無効の状態であることを伝える)を入れる
【注意】
<nav>
><div>
の場合にa.nav-link
に.nav-item
の追加は不要【v4.5.1で変更】
【変更履歴】
- 【v5.0.0-alpha1】
- リンクをアクティブにする場合は、
.active
をli.nav-item
に追加するのではなく、その子要素のa.nav-link
に追加 .active
関連のアクセシビリティの設定を変更(a.nav-link
>span.sr-only
⇒a.nav-link[aria-current="page"]
)
- リンクをアクティブにする場合は、
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-toggle="collapse"]
⇒[data-bs-toggle="collapse"]
[data-target="#ID"]
⇒[data-bs-target="#ID"]
3. ドロップダウンの設定
見本
ナビゲーションバーでドロップダウンを使用することも可能。ドロップダウンメニューでは、配置に折り返し要素が必要なため、以下に示すように、.nav-item
と .nav-link
には必ず個別の入れ子要素を使用すること。
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク2</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" id="navbarDropdownMenuLink" aria-expanded="false">ドロップダウン</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
...
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
【設定】
ul.navbar-nav
>(li.nav-item
+)li.nav-item.dropdown
> {a.nav-link.dropdown-toggle[data-bs-toggle="dropdown"]
《ドロップダウンリンク》 + [ul.dropdown-menu
><li>
>a.dropdown-item
]《ドロップメニュー》}
※ul.nav.navbar-nav
>li.nav-item.dropdown
内にドロップメニューを入れる
フォーム(Form)
さまざまなフォームコントロールとコンポーネントをナビゲーションバー内に配置:
1. 一般のフォーム
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</nav>
.navbar
の直接の子要素はFlexレイアウトを使用し、デフォルトで justify-content: space-between
を設定。この動作を調整するには、必要に応じて追加のFlexユーティリティを使用する。
2. フォームの行末揃え
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForm">
<form class="d-flex ms-auto">
<input class="form-control me-2" type="text" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarForm" aria-controls="navbarForm" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarForm">
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="text" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
3. インプットグループを使ったフォーム v5.0.0-alpha1設定変更
見本
インプットグループも機能。ナビゲーションバーがフォーム全体かほとんどフォームの場合、<form>
要素をコンテナとして使用しHTMLを保存する。
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>
4. 小さめのボタンを併用する場合
見本
これらのナビゲーションバーフォームの一部として、さまざまなボタンがサポートされており、異なるサイズの要素の配置が可能。
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button type="button" class="btn btn-outline-success">メインボタン</button>
<button type="button" class="btn btn-sm ms-2 btn-outline-secondary">小さめのボタン</button>
</form>
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button type="button" class="btn btn-outline-success">メインボタン</button>
<button type="button" class="btn btn-sm ml-2 btn-outline-secondary">小さめのボタン</button>
</form>
</nav>
【設定】
form.d-flex
>input.form-control.me-2
《コントロール》 +button.btn.w-100
《ボタン》- フォーム部分の行末揃えには
ul.navbar-nav
に.me-auto
かform.d-flex
に.ms-auto
を追加 - ナビゲーションバーのメニューがフォームのみの場合は、
nav.navbar
>div.container-fluid
>form.d-flex
を、nav.navbar
>form.container-fluid
に変更可能 - コントロール部分にインプットグループ(
div.input-group
)を入れても可
【変更履歴】
- 【v5.0.0-alpha1】
nav.navbar
>form.form-inline
>input.form-control.mr-sm-2
+button.btn
⇒nav.navbar
>div.container-fluid
>form.d-flex
>input.form-control.mr-2
+button.btn.w-100
(.form-inline
は廃止)- インプットグループのアドオン部分を囲む
div.input-group-{prepend|append}
は不要に
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
.ml-*
⇒.ms-*
.mr-*
⇒.me-*
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
テキスト(Text)
ナビゲーションバーには、.navbar-text
の助けを借りて少々のテキストを入れることが可能。このクラスは、テキストの文字列の縦方向の配置と横方向の間隔を調整する。
1. テキストのみ
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">ココがテキストです</span>
</div>
</nav>
必要に応じて、他のコンポーネントやユーティリティと組み合わせる。
2. 他のコンポーネントとの組み合わせ
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarColor" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
</ul>
<span class="navbar-text">
インライン要素とナビゲーションバーのテキスト
</span>
</div>
</div>
</nav>
【設定】
- 文章を
span.navbar-text
で囲む - テキスト部分の行末揃えには
ul.navbar-nav
に.me-auto
かspan.navbar-text
に.ms-auto
を追加
ナビゲーションバーの配色(Color schemes)
テーマのクラスと background-color
ユーティリティの組み合わせにより、ナビゲーションバーの操作が簡単に。明るめの背景色で使用する場合は .navbar-light
、暗めの背景色の場合は .navbar-dark
のどちらかを選択。その後、.bg-*
ユーティリティでカスタマイズ。
黒色のナビゲーションバー
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
...
</div>
</nav>
【設定】
.navbar
に.navbar-dark
(文字を白にする)と.bg-dark
(黒色の背景色)を追加
定義済みの背景色を使用したナビゲーションバー
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
...
</div>
</nav>
【設定】
.navbar
に.navbar-light
(明るめの背景色=黒文字の場合)か.navbar-dark
(暗めの背景色=白文字の場合)を追加して、さらに.bg-{themecolor}
(定義済みの背景色)を追加
任意の背景色のナビゲーションバー
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
...
</div>
</nav>
【設定】
.navbar.navbar-light
か.navbar.navbar-dark
に任意の背景色をスタイル設定
コンテナクラスを使用(Containers)
必須ではないが、ナビゲーションバーを .container
で囲んでページの中央に配置可能。ただし、内部コンテナは引き続き必要である。また .navbar
内にコンテナを追加して、固定か静的トップナビゲーションバーのコンテンツのみを中央に配置することも可能。
レイアウトの違いを見比べること。
幅一杯のナビゲーションバー 実例
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
...
</div><!-- /.container-fluid -->
</nav>
【設定】
.navbar
>.container-fluid
【変更履歴】
- 【v5.0.0-alpha1】
.navbar
⇒.navbar
>.container-fluid
メニューのみがサイトの本体と同じ幅のナビゲーションバー 実例
見本 画像で表示
設定例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
...
</div><!-- /.container -->
</nav>
【設定】
.navbar
>.container
サイトの本体と同じ幅のナビゲーションバー 実例
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
<div class="container-fluid">
...
</div><!-- /.container-fluid -->
</nav>
</div><!-- /.container -->
【設定】
.container
>.navbar
>.container-fluid
※角を丸くしたい場合は、.navbar
に角丸ユーティリティクラス(.rounded(-{side})
)を追加
【変更履歴】
- 【v5.0.0-alpha1】
.container
>.navbar
⇒.container
>.navbar
>.container-fluid
レスポンシブ・コンテナを使用したナビゲーションバー v5.0.0-alpha1新設 実例
レスポンシブ・コンテナを使用してビューポートのサイズに応じてナビゲーションバーの幅が変化。
見本 画像で表示
●ビューポートの幅が特大(≥1200px)の場合
●ビューポートの幅が大(≥992px)の場合
設定例
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-lg">
...
</div><!-- /.container-lg -->
</nav>
【設定】
.navbar
>.container-{breakpoint}
ナビゲーションバーの配置(Placement)
位置ユーティリティを使用して、非静的な位置にナビバーを配置。上に固定、下に固定、上に達したら固定(上部に達するまでページをスクロールし、その位置に留まる)のいずれかを選択。position: fixed
を使用した固定ナビゲーションバーでは、DOMの標準フローから空白が詰まるので、他の要素との重複を避けるため、任意のCSS (例:<body>
での padding-top
) が必要な場合がある。
.sticky-top
で使用される position: sticky
は、すべてのブラウザで完全にサポートされていないことにも注意。
静的トップナビゲーションバー(Static top)実例
通常はスクロールバーを移動させると最上部のナビゲーションバーも一緒に移動(標準のスタイル)。
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
...
</div>
</nav>
【設定】
- 特に追加設定する必要なし
最上部に固定されたナビゲーションバー(Fixed top)実例
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<body style="padding-top:4.5rem;">
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
...
</div>
</nav>
【設定】
.navbar
に.fixed-top
を追加
【注意】
- スクロールした時に最上部がナビゲーションバーと重なるので、別途
<body>
タグにpadding-top:4.5rem;
のCSSスタイルを設定
最下部に固定されたナビゲーションバー(Fixed bottom)実例
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<body style="padding-bottom:4.5rem;">
<nav class="navbar navbar-light bg-light fixed-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
...
</div>
</nav>
【設定】
.navbar
に.fixed-bottom
を追加
【注意】
- スクロールした時に最下部がナビゲーションバーと重なるので、別途
<body>
タグにpadding-bottom:4.5rem;
のCSSスタイルを設定
最上部に達すると固定されるナビゲーションバー(Sticky top)実例
ナビゲーションバーが最上部に達するとそこに固定される。
見本 画像で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<body class="py-3">
<nav class="navbar navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
...
</div>
</nav>
【設定】
.navbar
に.sticky-top
を追加
【注意】
<nav>
を<header>
で囲むのは不可
スクロール(Scrolling)v5.0.0-beta2新設(v4.6.0でバックポート)
.navbar-nav-scroll
を .navbar-nav
(または他のナビゲーションバーのサブコンポーネント)に追加すれば、折り畳まれたナビゲーションバーの切替可能なコンテンツ内で垂直スクロールが有効になる。デフォルトでは、スクロールは 75vh
(またはビューポートの高さの75%)で開始されるが、ローカルのCSSカスタムプロパティ --bs-navbar-height
かカスタムスタイルで上書き可能。より幅広のビューポートでナビゲーションバーが展開されているときは、コンテンツはデフォルトのナビゲーションバーと同じように表示。
この動作には overflow
の潜在的な欠点があるので注意。overflow-y:auto
(ここではコンテンツをスクロールするために必要)を設定すると、overflow-x
は auto
と同等であり、水平方向のコンテンツをトリミングする。
以下は、.navbar-nav-scroll
と style="--bs-scroll-height: 100px;"
を使用したナビゲーションバーの実例であり、最適な間隔のためにいくつか追加のマージンユーティリティが入っている。
見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="ナビゲーションバーの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウン
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div>
</div>
</nav>
※Bootstrap4.xの設定例(v4.6.0~)赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
ドロップダウン
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">メニュー1</a></li>
<li><a class="dropdown-item" href="#">メニュー2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">その他</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div>
</nav>
【設定】
.navbar-nav
に.navbar-nav-scroll
を追加し、スクロール高の設定(style="--bs-scroll-height: 100px;"
)を入れる
【変更履歴】
- 【v5.0.0-beta2】
- スクロール高の設定:
style="max-height: 100px;"
⇒style="--bs-scroll-height: 100px;"
- スクロール高の設定:
レスポンシブ動作(Responsive behaviors)
ナビゲーションバーは、.navbar-toggler
, .navbar-collapse
, .navbar-expand{-sm|-md|-lg|-xl|-xxl}
クラスを使用して、コンテンツがボタンの後で折り畳まれるタイミングを決定可能。他のユーティリティと組み合わせて、特定の要素を表示するか非表示にするかを簡単に選択可能。
折り畳むことのない(常時展開する)ナビゲーションバーの場合は、ナビゲーションバーに .navbar-expand
クラスを追加。常に折り畳むナビゲーションバーの場合には、.navbar-expand
クラスを追加しないこと。
切替(Toggler)v5.0.0-alpha1クラス追加
ナビゲーションの切替は、デフォルトで行頭揃えになっているが、.navbar-brand
のような兄弟要素に従うと、自動的に行末端に配置される。マークアップを元に戻すと、切替ボタンの配置が逆になる。以下に、異なる切替スタイルの例を示す。
1. 折り畳まれるとブランド名も非表示
極小のブレークポイントに .navbar-brand
が表示されていない場合:
見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<a class="navbar-brand" href="#">ブランド</a>
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
...
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navbar">
<a class="navbar-brand" href="#">ブランド</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
...
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
2. 折り畳まれると行頭にブランド名、行末に切替ボタン
見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
...
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
...
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
3. 折り畳まれると行頭に切替ボタン、行末にブランド名
見本 見やすいように常時折り畳んだ状態で表示
Bootstrap5.xの設定例 緑背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
...
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success flex-shrink-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
※Bootstrap4.xの設定例 赤背景が変更箇所
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="レスポンシブ・ナビゲーションバー">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="Navber">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
...
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索..." aria-label="検索...">
<button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
表示の範囲
クラス/ビューポートの幅 |
極小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
超特大 ≥1400px |
---|---|---|---|---|---|---|
.navbar.navbar-expand |
展開 | |||||
.navbar.navbar-expand-sm |
折り畳み | 展開 | ||||
.navbar.navbar-expand-md |
折り畳み | 展開 | ||||
.navbar.navbar-expand-lg |
折り畳み | 展開 | ||||
.navbar.navbar-expand-xl |
折り畳み | 展開 | ||||
.navbar.navbar-expand-xxl v5.0.0-alpha1追加 |
折り畳み | 展開 | ||||
.navbar のみ |
折り畳み |
【設定】
.navbar.navbar-expand-{breakpoint}
> [button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"]
]《ボタン》 +a.navbar-brand
《ブランド》 + [#ID.collapse.navbar-collapse
>ul.navbar-nav
]《メニュー》.navbar-expand-{breakpoint}
は、モバイルサイズでのみ折り畳みたい場合は、.navbar-expand-md
に、タブレットサイズ以下で折り畳みたい場合は、.navbar-expand-lg
を使用(各サイズの動作は様々なナビゲーションバー参照)- 折り畳まれたときにブランドを隠したい場合は、
a.navbar-brand
をdiv.collapse.navbar-collapse
内に入れる - 切替ボタンを行末側に表示したい場合は、
a.navbar-brand
《ブランド》 ⇒button.navbar-toggler
《切替ボタン》 の順に記載 - 切替ボタンを行頭側に表示したい場合は、
button.navbar-toggler
《切替ボタン》 ⇒a.navbar-brand
《ブランド》 の順に記載
【変更履歴】
- 【v5.0.0-alpha1】
.navbar-expand-xxl
が追加
外部コンテンツ(External content)
場合によっては、折り畳みプラグインを使用して、構造的に .navbar
の外側にあるコンテンツのコンテナ要素を切り替える必要がある。Bootstrapのプラグインは id
と data-bs-target
のマッチングで動作するので、簡単に実行可能。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- 非表示コンテンツ -->
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">折り畳みコンテンツ</h4>
<span class="text-muted">ナビゲーションバーブランド経由で切り替え可能。</span>
</div>
</div><!-- /.collapse -->
<!-- 切替ボタン -->
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="折り畳みナビゲーション">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
これを行うときは、追加のJavaScriptを含めて、コンテナを開いたときにプログラムでフォーカスをコンテナに移動することを推奨。そうしないと、キーボードユーザーや支援技術のユーザーは、新しく公開されたコンテンツを見つけるのに苦労する可能性がある。特に、開かれたコンテナがこの解説の構造の切替ボタンの前にある場合はそうである。また、切替ボタンにコンテンツコンテナの id
を指す aria-controls
属性があることを確認することを推奨。理論的には、これにより支援技術のユーザーは切替ボタンからそれが制御するコンテナに直接ジャンプ可能だが、これに対するサポートは現在かなりのパッチが当てられている。
【設定】
- ナビゲーションバー切替ボタン:
.navbar
>button.navbar-toggler[data-bs-toggle="collapse"][data-bs-target="#ID"]
>span.navbar-toggler-icon
- 非表示コンテンツ:
#ID.collapse
- ボタンとコンテンツの順を逆にすると、コンテンツがナビゲーションバーの上に表示される