
Bootstrap 5 การสร้าง Dropdown Menu
Dropdown Menu คือเมนูที่อนุญาตให้ผู้ใช้สามารถคลิกเลือกรายการ 1 เมนู จากรายการเมนูทั้งหมดที่บราจุอยู่ด้านใน
<div class="dropdown"> <button type="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> <li><a class="dropdown-item" href="#">เมนู 3</a></li> </ul> </div>
- บรรทัดที่ 1 สร้าง Container ด้วยเอลิเมนต์
<div>
พร้อมระบุคลาส.dropdown
- บรรทัดที่ 2 สร้างปุ่ม (หรือลิงก์ก็ได้) พร้อมระบุคลาส
.dropdown-toggle
และกำหนดแอททริบิวต์data-bs-toggle="dropdown"
สำหรับเปิดรายการเมนู - บรรทัดที่ 5 สร้างรายการด้วยเอลิเมนต์
<ul>
พร้อมระบุคลาส.dropdown-menu
สำหรับบรรจุรายการเมนู - บรรทัดที่ 6-8 สร้างรายการเมนูด้วยเอลิเมนต์
<li>
ซึ่งบรรลุเอลิเมนต์<a>
สำหรับสร้างลิงก์ไว้ดวย และภายในเอลิเมนต์<a>
ระบุคลาส.dropdown-item
เพื่อบอกว่านี่คือรายการเมนู

ถ้าต้องการสร้างตัวคั่นระหว่างรายการเมนู สามารถทำได้โดยใช้คลาส .dropdown-divider
ร่วมกับแท็ก <hr>
<div class="dropdown"> <button type="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> <li><a class="dropdown-item" href="#">เมนู 3</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">เมนู 5</a></li> <li><a class="dropdown-item" href="#">เมนู 6</a></li> </ul> </div>
การสร้างหัวเมนู
ถ้าต้องการสร้างหัวเมนูเป็นรายการที่คลิกไม่ได้ เช่น เพื่อจะบอกว่าเมนูต่อไปนี้อยู่หมวดไหน เป็นต้น สามารถทำได้โดยใช้คลาส .dropdown-header
ร่วมกับแท็กประเภท Heading
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>
ในตัวอย่าง มี Dropdown Header 2 จุด คือ “รายการอาหาร” และ “รายการเครื่องดื่ม”

กำหนดสถานะ Active หรือ Disabled
ถ้าต้องการไฮไลต์ให้รู้ว่าขณะนี้เมนูไหนกำลัง Active อยู่ สามารถทำได้โดยใช้งานคลาส .active
ในเอลิเมนต์ <a>
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>
เมนูที่มีสถานะ Active จะมีสีพื้นหลังเป็นสีน้ำเงิน ในตัวอย่าง เมนู “กระเพาะปลาเนื้อปู” อยู่ในสถานะ Active

ถ้าต้องการปิดใช้งานเมนูใด ให้กำหนดคลาส .disabled
ภายในแท็ก <a>
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>
เมนูที่ถูกปิด ตัวอักษรจะเป็นสีเทาจางและไม่สามารถคลิกได้ ในตัวอย่าง เมนู “เป๊ปซี่” ถูกปิดอยู่

กำหนดตำแหน่งของ Dropdown
โดยปกติ เมื่อคลิกที่ Dropdown Menu รายการเมนูจะปรากฏที่ด้านล่างของ Dropdown แต่เราสามารถกำหนดให้รายการเมนูปรากฏทางด้านหน้าหรือด้านหลังของ Dropdown ได้ โดยการใช้งานคลาส .dropend
เพื่อให้รายการเมนูปรากฏทางด้านหลัว หรือใช้คลาส .dropstart
เพื่อให้รายการเมนูปรากฏทางด้านหน้า โดยคลาสดังกล่าว ให้วางไว้ที่เอลิเมนต์เดียวกันกับคลาส .dropdown
<div class="dropdown dropend"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>

<div class="dropdown dropstart text-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>

กำหนดให้รายการเมนูแสดงชิดด้านขวา
โดยปกติ รายการเมนูจะแสดงผลทางด้านล่างของ Dropdown และชิดด้านซ้ายเสมอ แต่ถ้าเราต้องการให้รายการเมนูแสดงผลชิดขวา ก็สามารถทำได้เช่นกัน โดยใช้งานคลาส .dropdown-menu-end
<div class="dropdown dropdown-menu-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> ดร็อปดาวน์เมนูที่กำหนดให้รายการเมนูแสดงผลชิดด้านขวา </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>

แสดงรายการเมนูด้านบน
โดยค่าเริ่มต้น เมื่อคลิกที่ Dropdown รายการเมนูจะแสดงเรียงลงมาด้านล่าง แต่ถ้าเราต้องการความแปลกใหม่ จะให้รายการเมนูแสดงเรียงขึ้นด้านบนบ้างก็ได้ เพียงแค่เปลี่ยนจากคลาส .dropdown
เป็นคลาส .dropup
แค่นั้นเอง
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p> <div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> คลิกเลือกเมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> </ul> </div>

Dropdown Text
ถ้าต้องการแสดงเพียงข้อความธรรมดาในเมนูโดยไม่ต้องมีการลิงก์ไปที่อื่น ก็สามารถทำได้โดยการใช้คลาส .dropdown-item-text
ร่วมกับเอลิเมนต์ <span>
นอกจากนี้ คลาส .dropdown-item-text
ยังใช้ร่วมกับเอลิเมนต์ <a>
เพื่อให้ลิงก์แสดงผลตามสไตล์ของลิงก์ทั่ว ๆ ไปก็ได้ด้วยเช่นกัน
<div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> คลิกเลือกเมนู </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">รายการอาหาร</h5></li> <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li> <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li> <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li> <li><hr class="dropdown-divider"/></li> <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li> <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li> <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li> <li><a class="dropdown-item-text" href="#">เมนูแบบลิงก์ทั่วไป</a></li> <li><span class="dropdown-item-text">ข้อความธรรมดา</span></li> </ul> </div>

สร้างปุ่มกับ Dropdown ไว้ด้วยกัน
เราสามารถสร้างปุ่มกดกับ Dropdown Menu ไว้ด้วยกัน โดยให้แสดงผลเป็นกลุ่มเดียวกันก็ได้ ดังตัวอย่าง
<div class="btn-group"> <button type="button" class="btn btn-primary">Computer PC</button> <button type="button" class="btn btn-primary">Notebook</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Smart Phone</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">iPhone</a></li> <li><a class="dropdown-item" href="#">Oppo</a></li> </ul> </div> </div>

หรือจะให้แสดงผลเป็นแนวตั้ง ก็ทำได้ เพียงแค่เปลี่ยนคลาส .btn-group
เป็นคลาส .btn-group-vertical
เท่านั้น
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Computer PC</button> <button type="button" class="btn btn-primary">Notebook</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Smart Phone</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">iPhone</a></li> <li><a class="dropdown-item" href="#">Oppo</a></li> </ul> </div> </div>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples