Bootstrap5 ナビゲーションバー

ナビゲーションバーは通常、ページの上部に配置します。

以下のクラスを使用して.navbar標準のナビゲーションバーを作成し、その後ろに続けます：.navbar-expand-xxl|xl|lg|md|smクラスでレスポンシブ対応のナビゲーションバーを作成します（大画面では水平に展開し、小画面では垂直に重なります）。

ナビゲーションバー上のオプションは、<ul>要素を使用して、class="navbar-nav"クラスを追加します。次に、<li>要素に.nav-itemクラスを追加し、<a>要素に.nav-linkクラスを使用します：

例

<!--小画面では水平ナビゲーションバーが垂直に切り替わります--> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

実際に試す »

垂直ナビゲーションバー

削除することで.navbar-expand-xxl|xl|lg|md|smクラスを使って垂直ナビゲーションバーを作成します：

例

<!--垂直ナビゲーションバー--> <nav class="navbar bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>

実際に試す »

中央揃えのナビゲーションバー

追加することで.justify-content-centerクラスを使って中央揃えのナビゲーションバーを作成します：

例

<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>

実際に試す »

異なる色のナビゲーションバー

以下のクラスを使用して、異なる色のナビゲーションバーを作成できます：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkと.bg-light)。

ヒント：暗い背景の場合は.navbar-darkテキストの色を明るい色に設定する必要があります。明るい背景の場合は.navbar-lightテキストの色を暗い色に設定する必要があります。

例

<!--灰色の背景に黒い文字--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!--黒い背景に白い文字--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--青い背景に白い文字--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

実際に試す »

アクティブ状態と無効状態: 選択したオプションをハイライト表示するには、<a>要素に.activeクラスを追加します。.disabledクラスは、そのリンクをクリック不可に設定するために使用されます。

ブランド/ロゴ

.navbar-brandクラスはブランド/ロゴをハイライト表示するために使用します：

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>

実際に試す »

次のクラスを使用できます：.navbar-brandクラスを使用して画像をナビゲーションバーに適合させます。

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav>

実際に試す »

折りたたみナビゲーションバー

通常、小画面ではナビゲーションバーを折りたたみ、クリックしてナビゲーションオプションを表示します。

折りたたみナビゲーションバーを作成するには、ボタンに次の属性を追加します：class="navbar-toggler"、data-bs-toggle="collapse"、data-target="#thetarget"クラス。次に、class="collapse navbar-collapse"クラスの div 内にナビゲーションコンテンツ（リンク）を配置します。div 要素の id はボタンのdata-targetで指定された id と一致させます：

例

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav>

実際に試す »

ナビゲーションバーでドロップダウンメニューを使用する

ナビゲーションバーにドロップダウンメニューを設定できます：

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

実際に試す »

ナビゲーションバーのフォームとボタン

ナビゲーションバーのフォーム<form>要素はclass="form-inline"クラスを使用して入力ボックスとボタンを配置します：

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success" type="submit">Search</button> </form> </nav>

実際に試す »

他の入力ボックスクラスも使用できます。例：.input-group-addonクラスは、入力ボックスの前にラベルを追加するために使用します。

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>

実際に試す »

ナビゲーションバーのテキスト

使用して、.navbar-textクラスでナビゲーションバー上の非リンクテキストを設定すると、水平方向の配置、色、内側の余白が同じになります。

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>

実際に試す »

固定ナビゲーションバー

ナビゲーションバーは上部または下部に固定できます。

以下のクラスを使用して.fixed-topナビゲーションバーを固定します：

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

実際に試す »

.fixed-bottomクラスはナビゲーションバーを下部に固定するために使用します：

例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

実際に試す »

ナビゲーションバーのサンプル

例


実際に試す »
その他の拡張