Bootstrap5下拉菜單：點擊展開的導航選項列表

在網頁開發中，導航菜單是不可或缺的一部分。但當菜單項較多時，直接羅列會佔用大量空間，影響頁面美觀。Bootstrap5的下拉菜單（Dropdown）完美解決了這個問題——它可以將多個選項“摺疊”在一個按鈕下，點擊按鈕後才展開列表，既節省空間又保持界面簡潔。

一、準備工作：引入Bootstrap5及依賴¶

要使用Bootstrap5的下拉菜單，首先需要引入Bootstrap的CSS和JavaScript文件。注意，Bootstrap5的下拉菜單依賴 Popper.js（用於定位菜單），因此需按順序引入以下資源：

<!-- 引入Bootstrap5的CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 先引入Popper.js（下拉菜單依賴它定位） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

<!-- 再引入Bootstrap5的JavaScript（包含下拉菜單功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

二、創建基本下拉菜單¶

下拉菜單的核心結構由三部分組成：容器、觸發按鈕和選項列表。以下是一個完整的示例：

<div class="dropdown">
  <!-- 觸發按鈕 -->
  <button class="btn btn-primary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-bs-toggle="dropdown" 
          aria-expanded="false">
    我的菜單
  </button>

  <!-- 下拉選項列表 -->
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">首頁</a></li>
    <li><a class="dropdown-item" href="#">產品</a></li>
    <li><a class="dropdown-item active" href="#">關於我們</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1">聯繫我們</a></li>
  </ul>
</div>

三、結構解析（初學者必看）¶

容器：
外層用 <div class="dropdown"> 包裹，這是下拉菜單的“根容器”，所有元素必須在這個容器內。
觸發按鈕：
- class="btn btn-primary dropdown-toggle"：btn 是按鈕基礎樣式，btn-primary 是藍色主題，dropdown-toggle 是觸發下拉的關鍵類。
- data-bs-toggle="dropdown"：告訴Bootstrap這是一個下拉菜單觸發器，點擊會展開/收起列表。
- aria-expanded="false"：無障礙屬性，初始狀態下拉菜單未展開，設爲 false；展開後會自動變爲 true。
- id="dropdownMenuButton"：與下拉列表關聯，用於無障礙訪問（可選但推薦）。
選項列表：
- class="dropdown-menu"：下拉列表的容器，默認左對齊，可通過 dropdown-menu-end 設爲右對齊。
- 列表項用 <li> 包裹，內部通過 <a class="dropdown-item"> 或 <button class="dropdown-item"> 定義選項。
- active：高亮當前選中項（藍色背景）。
- disabled：禁用選項（灰色且不可點擊，需加 tabindex="-1" 防止鍵盤訪問）。
- dropdown-divider：分割線（用 <hr> 實現，可分隔不同類別的選項）。

四、交互邏輯（無需額外代碼）¶

Bootstrap5的下拉菜單已內置交互邏輯，只需按上述結構編寫HTML，點擊觸發按鈕即可展開/收起列表。點擊菜單項後，下拉菜單會自動關閉（無需手動寫JavaScript）。

五、進階用法：對齊與方向¶

右對齊下拉菜單：在 dropdown-menu 中添加 dropdown-menu-end，菜單會靠右展開：

  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">

向上/向下展開：默認下拉菜單向下展開，若需向上展開（如底部空間不足），可在容器上添加 dropup 類：

  <div class="dropdown dropup"> <!-- 向上展開 -->

六、常見問題解決¶

下拉菜單無法展開？
檢查是否引入了Popper.js和Bootstrap的JavaScript，且順序正確（先Popper，後Bootstrap）：

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

菜單項樣式錯亂？
確保所有選項都在 <li> 內，且 <a> 或 <button> 使用 dropdown-item 類。

總結¶

Bootstrap5下拉菜單的核心是：dropdown 容器 + dropdown-toggle 按鈕 + dropdown-menu 列表，配合Popper.js和Bootstrap JS實現交互。通過簡單的類名（如 active、disabled、dropdown-menu-end），即可快速實現高亮、禁用、對齊等功能，無需複雜代碼。掌握這些基礎後，你就能輕鬆構建簡潔高效的導航菜單了！