Zenn
🕌

Bootstrap｜基本のナビゲーションメニュー

2023/08/18に公開
Bootstrap
CSS
HTML
#
プログラミング初心者
#
dmmwebcamp
tech

このようなナビゲーションメニューのコードについて、解説します。

<header class="p-2">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <%= link_to "Company", root_path, class: "navbar-brand text-dark" %>

    <div>
      <nav class="mb-2">
        <ul class="navbar-nav list-group-horizontal">
          <li class="nav-item"><%= link_to "About", "#", class: "btn btn-outline-secondary mr-3" %></li>
          <li class="nav-item"><%= link_to "商品一覧", "#", class: "btn btn-outline-secondary mr-3" %></li>
          <li class="nav-item"><%= link_to "新規登録", "#", class: "btn btn-outline-secondary mr-3" %></li>
          <li class="nav-item"><%= link_to "ログイン", "#", class: "btn btn-outline-secondary mr-3" %></li>
        </ul>
      </nav>

      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </div>
</header>

一つずつ解説します。

<header class="p-2">

この部分は header なので、<header>タグで囲みます。全体的にpaddingが欲しかったので、p-2を追加しました。

<div class="d-flex justify-content-between align-items-center mb-4">

次に、全要素を囲むための <div>タグを作成しました。また、左側の「Companyロゴ」と右側に配置する「メニュー＋検索ボックス」を上下中央揃えにしたいので、d-flex justify-content-between align-items-center mb-4クラスを追加しました。

d-flexで、子要素をフレックスアイテムにすることができます。
justify-content-betweenで、2つの要素を左端と右端に配置することができます。
align-items-centerで、上下中央揃えができます。
mb-4は margin-bottomの意です。

 <%= link_to "Company", root_path, class: "navbar-brand text-dark" %>

左端のロゴ部分です。

<div>

右端のメニュー部分と検索部分を囲む <div>タグです。

<nav class="mb-2">

右端のメニュー部分を囲む <nav>タグです。この要素の中身がナビゲーションメニューであることを表しています。

<ul class="navbar-nav list-group-horizontal">

メニューを囲む <ul>タグです。
navbar-navはナビゲーションメニューの <ul>タグにつけるクラスです。レスポンシブでハンバーガーメニューを使う時には必須ですが、今回はなくても問題ないです。
list-group-horizontalで、リストを横並びにします。

<li class="nav-item"><%= link_to "About", "#", class: "btn btn-outline-secondary mr-3" %></li>
<li class="nav-item"><%= link_to "商品一覧", "#", class: "btn btn-outline-secondary mr-3" %></li>
<li class="nav-item"><%= link_to "新規登録", "#", class: "btn btn-outline-secondary mr-3" %></li>
<li class="nav-item"><%= link_to "ログイン", "#", class: "btn btn-outline-secondary mr-3" %></li>

メニュー部分の各要素です。
nav-item ナビゲーションメニューの各要素につけるクラスです。
mr-3はmargin-rightの意です。

<form class="form-inline">
　<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
　<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

検索ボックス部分です。Bootstrapの公式サイトにテンプレートがあったので、そのまま使用しました。
https://getbootstrap.jp/docs/4.4/components/navbar/#forms

Discussion