Bootstrapドロップダウンの位置と向きを完全ガイド！.dropup・.dropend・.dropstart・.dropdown-menu-endを初心者向けに解説

位置と向きの制御：.dropup/.dropend/.dropstart と .dropdown-menu-end

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのドロップダウンって、下以外にも表示できるんですか？」

先生

「できますよ。ボタンの上や右、左に表示することもできます。」

生徒

「メニューの位置がズレることがあって困ってました……」

先生

「それなら、位置と向きを制御するクラスを順番に見ていきましょう。」

1. Bootstrapのドロップダウンとは何か

Bootstrapのドロップダウンとは、ボタンをクリックするとメニューが表示される仕組みのことです。スマホやパソコンの画面で、設定メニューや操作一覧をまとめるときによく使われます。初心者の方は、引き出しのように中身が出てくる仕組みだと考えると理解しやすいです。

Bootstrap5では、クラスを指定するだけでドロップダウンの見た目や動きを簡単に調整できます。その中でも「どの方向に表示するか」「右寄せにするか」といった位置の制御はとても重要です。

2. 下に表示される基本のドロップダウン

何も指定しない場合、ドロップダウンメニューはボタンの下に表示されます。これがBootstrapの標準動作です。まずは基本の形をしっかり確認しておきましょう。


<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        メニュー
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">項目1</a></li>
        <li><a class="dropdown-item" href="#">項目2</a></li>
    </ul>
</div>

ブラウザ表示

このように、特別な指定をしなくても下方向にメニューが開きます。ここから向きを変えていきます。

3. 上に表示する.dropupの使い方

.dropupは、ドロップダウンメニューをボタンの上に表示したいときに使います。画面の下側にボタンがある場合、下に表示すると見切れてしまうことがあります。そのような場面で役立ちます。

例えるなら、下にスペースがないのでフタが上に開く箱のようなイメージです。


<div class="dropup">
    <button class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
        上に表示
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">設定</a></li>
        <li><a class="dropdown-item" href="#">ログアウト</a></li>
    </ul>
</div>

ブラウザ表示

4. 右に表示する.dropendの特徴

.dropendは、ドロップダウンメニューをボタンの右側に表示します。横並びのメニューや、サイドバーの中で使うときに便利です。

本棚の横から引き出す引き出しを想像すると、動きが分かりやすくなります。


<div class="dropend">
    <button class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
        右に表示
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">編集</a></li>
        <li><a class="dropdown-item" href="#">削除</a></li>
    </ul>
</div>

ブラウザ表示

5. 左に表示する.dropstartの使いどころ

.dropstartは、ボタンの左側にドロップダウンメニューを表示します。.dropendとは逆の動きです。画面の右端にボタンがある場合に便利です。

右にスペースがないので、左に開くドアだと考えるとイメージしやすいです。


<div class="dropstart">
    <button class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
        左に表示
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">詳細</a></li>
        <li><a class="dropdown-item" href="#">閉じる</a></li>
    </ul>
</div>

ブラウザ表示

6. 右寄せにする.dropdown-menu-end

.dropdown-menu-endは、ドロップダウンメニューの中身を右寄せにしたいときに使います。ボタンの右端にメニューを揃えたい場合に便利です。

文字の右揃えとは違い、メニュー全体の位置を右に合わせる点がポイントです。


<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
        右寄せメニュー
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">プロフィール</a></li>
        <li><a class="dropdown-item" href="#">設定</a></li>
    </ul>
</div>

ブラウザ表示