การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Navs

Navs เป็นหนึ่งในองค์ประกอบของ Bootstrap 5 ที่ใช้สำหรับสร้างเมนูการนำทาง (Navigation) ในหน้าเว็บ ซึ่งมีลักษณะต่าง ๆ ที่สามารถปรับแต่งและประยุกต์ใช้งานได้หลากหลายรูปแบบ เช่น เมนูแบบแถวนอน (Horizontal Navs), เมนูแบบแนวตั้ง (Vertical Navs), เมนูแบบแท็บ (Tabs) และเมนูแบบปุ่มสลับ (Pills)

เมนูแบบแถวนอน (Horizontal Navs)

การสร้างเมนูแบบแถวนอนใน Bootstrap 5 สามารถทำได้ง่าย ๆ โดยการใช้คลาส .nav ร่วมกับ .nav-item และ .nav-link

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">หน้าหลัก</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">เกี่ยวกับเรา</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">บริการ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">ติดต่อเรา</a>
  </li>
</ul>
  • คลาส .nav ใช้กำหนดให้รายการที่อยู่ภายในถูกจัดเรียงในแนวนอน
  • คลาส .nav-item ใช้กำหนดแต่ละไอเท็มภายในรายการ
  • คลาส .nav-link ใช้กำหนดให้เป็นลิงก์ และ .active ใช้ระบุสถานะของลิงก์ที่ถูกเลือก (active)

เมนูแบบแนวตั้ง (Vertical Navs)

สามารถสร้างเมนูแบบแนวตั้งได้โดยการเพิ่มคลาส .flex-column เข้าไปในรายการ Nav

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">หน้าหลัก</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">เกี่ยวกับเรา</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">บริการ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">ติดต่อเรา</a>
  </li>
</ul>
  • คลาส .flex-column จะทำให้ไอเท็มภายในรายการถูกจัดเรียงในแนวตั้งแทน

เมนูแบบแท็บ (Tabs)

เมนูแบบแท็บจะใช้คลาส .nav-tabs เพื่อกำหนดให้ลิงก์มีลักษณะเหมือนแท็บ ซึ่งสามารถใช้ในการสร้างแถบเมนูที่สลับไปมาระหว่างเนื้อหาได้

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">หน้าหลัก</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">เกี่ยวกับเรา</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">บริการ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">ติดต่อเรา</a>
  </li>
</ul>

คลาส .nav-tabs ใช้กำหนดรูปแบบการจัดเรียงลิงก์ให้เป็นแท็บ และ .active ใช้เพื่อระบุแท็บที่ถูกเลือก

เมนูแบบปุ่มสลับ (Pills)

เมนูแบบปุ่มสลับ (Pills) สามารถสร้างได้โดยการใช้คลาส .nav-pills ซึ่งทำให้ลิงก์ดูเป็นปุ่มที่สามารถกดเพื่อเปลี่ยนแถบเนื้อหาได้

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">หน้าหลัก</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">เกี่ยวกับเรา</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">บริการ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">ติดต่อเรา</a>
  </li>
</ul>

คลาส .nav-pills จะทำให้ไอเท็มมีลักษณะเหมือนปุ่ม และสามารถใช้งานร่วมกับการจัดการเนื้อหาที่มีการสลับไปมาได้

เมนูพร้อม Dropdown

Bootstrap 5 ยังรองรับการสร้างเมนูที่มีตัวเลือกซ่อนหรือ Dropdown โดยการเพิ่ม .dropdown และใช้ .dropdown-toggle สำหรับแสดงรายการย่อย

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">หน้าหลัก</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">เมนูเพิ่มเติม</a>
    <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>
  </li>
</ul>
  • คลาส .dropdown ใช้กำหนดไอเท็มที่มีเมนูย่อย
  • คลาส .dropdown-toggle ใช้ในการแสดงตัวเลือกเมนูย่อย
  • คลาส .dropdown-menu ใช้สร้างรายการย่อยภายในเมนู

การใช้งาน Navs ร่วมกับ JavaScript

Bootstrap 5 รองรับการใช้งานร่วมกับ JavaScript เพื่อสร้างเมนูที่มีการตอบสนองต่อการคลิกและเปลี่ยนเนื้อหาภายในแท็บ เช่น การสลับเนื้อหาด้วย Tab-pane

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">หน้าหลัก</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">โปรไฟล์</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>เนื้อหาของหน้าหลัก</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>เนื้อหาของโปรไฟล์</p>
  </div>
</div>
  • คลาส .tab-content ใช้สำหรับแสดงเนื้อหาที่จะสลับเมื่อคลิกแท็บ
  • คลาส .tab-pane ใช้กำหนดเนื้อหาในแต่ละแท็บ

สรุป

Navs ใน Bootstrap 5 เป็นเครื่องมือที่มีความยืดหยุ่น สามารถนำมาประยุกต์ใช้งานได้หลากหลายรูปแบบ ไม่ว่าจะเป็นเมนูแถวนอน แนวตั้ง แท็บ ปุ่มสลับ หรือเมนู Dropdown นอกจากนี้ยังสามารถใช้งานร่วมกับ JavaScript เพื่อสร้างการตอบสนองที่ซับซ้อนได้

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ