บทที่ 6: Navigation Components
เรียนรู้การสร้างระบบนำทางที่สมบูรณ์ด้วย MUI สำหรับมือใหม่! 🗂️
💡 ทำไม Navigation ถึงสำคัญ?
• 🧭 User Orientation: ช่วยผู้ใช้รู้ว่าอยู่ที่ไหนในแอป
• 🚀 Easy Access: เข้าถึงฟีเจอร์ต่างๆ ได้ง่ายและรวดเร็ว
• 📱 Responsive Design: รองรับทุกขนาดหน้าจออย่างลงตัว
• ✨ Professional Look: ทำให้แอปดูเป็นมืออาชีพและใช้งานง่าย
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- สร้าง AppBar และ Toolbar
navigation bar ที่ทันสมัย
- ใช้ Drawer และ Menu
sidebar และ dropdown menu
- จัดการ Tabs navigation
การนำทางแบบแท็บ
- สร้าง Breadcrumbs
แสดงเส้นทางปัจจุบัน
- Responsive Navigation
navigation ที่รองรับทุกขนาดจอ
- Complete App Layout
layout แอปที่สมบูรณ์
🧭 AppBar & Toolbar
AppBar เป็น navigation bar หลักของแอป ใช้ร่วมกับ Toolbar เพื่อจัดเรียง elements
🎯 AppBar Variants
static
AppBar ปกติที่ไม่เลื่อนตาม scroll
เหมาะสำหรับ:
หน้าที่ไม่ต้องการ sticky navigation
✅ ข้อดี:
• ไม่รบกวน content
• เหมาะกับหน้าสั้น
⚠️ ข้อควรระวัง:
• หายไปเมื่อ scroll ลง
fixed
AppBar ติดอยู่ด้านบนเสมอ
เหมาะสำหรับ:
แอปที่ต้องการ navigation เข้าถึงได้ตลอด
✅ ข้อดี:
• เข้าถึงได้ตลอดเวลา
• UX ดี
⚠️ ข้อควรระวัง:
• กินพื้นที่หน้าจอ
• อาจบดบังเนื้อหา
sticky
AppBar ที่ sticky เมื่อ scroll
เหมาะสำหรับ:
การนำทางที่ต้องการความยืดหยุ่น
✅ ข้อดี:
• ยืดหยุ่น
• ไม่กินพื้นที่เมื่อไม่จำเป็น
⚠️ ข้อควรระวัง:
• พฤติกรรมซับซ้อนกว่า