เมนูและการนำทาง

เมนูคือชุดลิงก์ที่ผู้เข้าชมใช้เดินทางในเว็บของคุณ ปกติจะอยู่บนส่วนหัว (header) ของทุกหน้า และย่อลงเป็นปุ่มขีดสามขีดบนมือถือ

เว็บหนึ่งไซต์มีเมนูหนึ่งชุด แก้ที่ ตั้งค่า → เมนู (/admin/settings/menus) ครั้งแรกที่เปิดหน้านี้ ระบบจะสร้างเมนูชื่อ Main Menu ให้อัตโนมัติแล้วพาเข้าหน้าแก้ไข (/admin/settings/menus/{id})

ใครแก้เมนูได้

บทบาท	แก้เมนูได้
super_admin	ได้
admin	ได้
editor	ไม่ได้ (ไม่เห็นเมนูนี้ในแถบข้าง)
writer	ไม่ได้

เมนูไม่ถูกจำกัดตามแพ็กเกจ และไม่ต้องเปิดฟีเจอร์ทดลอง สิทธิ์ตามบทบาทเป็นเงื่อนไขเดียว ดูรายละเอียดบทบาทที่ ผู้ใช้และสิทธิ์

หน้าแก้ไขเมนูมีอะไร

• ฝั่งซ้าย รายการเมนูเรียงเป็นต้นไม้ แต่ละแถวมีที่จับสำหรับลาก คลิกที่แถวเพื่อเปิดช่องแก้ไขใต้แถวนั้น
• ใต้รายการ ปุ่ม เพิ่มหน้า (Add Page) และ เพิ่มรายการ (Add Item)
• ฝั่งขวา สถานะ ฉบับร่าง/เผยแพร่ · จำนวนรายการ · ปุ่ม อัปเดต (เปลี่ยนเป็น บันทึกทั้งหมด เมื่อมีลำดับค้างอยู่)

เพิ่มรายการเมนู

เพิ่มหน้า

1. กด เพิ่มหน้า
2. เลือกหน้าจากรายการ (แสดงเฉพาะหน้าที่สถานะ เผยแพร่ ในภาษาหลัก และเยื้องตามลำดับชั้นแม่ลูก)
3. ระบบเพิ่มรายการให้ทันที ป้ายกำกับใช้ชื่อหน้านั้น

วิธีนี้ผูกรายการกับตัวหน้าโดยตรง ไม่ได้จำแค่ข้อความ URL ผลคือ

• ถ้าคุณเปลี่ยน Slug ของหน้าในภายหลัง ลิงก์ในเมนูจะตามไปเอง
• ถ้าหน้าอยู่ใต้หน้าอื่น ลิงก์จะออกมาเป็นเส้นทางเต็ม เช่น /about/team
• ถ้าเว็บมีหลายภาษา ระบบจะสลับไปหน้าที่แปลไว้ของภาษานั้นให้ (ดูหัวข้อ หลายภาษา ด้านล่าง)

ถ้าคุณย้ายหน้าที่ผูกไว้กลับเป็นฉบับร่าง รายการยังอยู่ในเมนูแต่ลิงก์จะพาไปหน้าที่หาไม่พบ ให้ลบรายการหรือเผยแพร่หน้านั้นอีกครั้ง

เพิ่มรายการ

กด เพิ่มรายการ ระบบสร้างรายการชื่อ New Item แล้วเปิดช่องแก้ไขให้ กรอกป้ายกำกับกับ URL เอง เหมาะกับลิงก์ไปเว็บอื่น หรือเส้นทางที่ไม่ได้เป็นหน้า เช่น /posts

ตั้งค่าแต่ละรายการ

คลิกที่แถวเพื่อเปิดช่องแก้ไข

ช่อง	ความหมาย
ป้ายกำกับ (Label)	ข้อความที่ผู้เข้าชมเห็น ถ้าเว็บมีมากกว่าหนึ่งภาษา จะมีแท็บภาษาเล็ก ๆ อยู่มุมขวาของช่องนี้
ประเภท (Type)	ลิงก์ (Link) · หน้า (Page) · กลุ่ม (Group) · เนื้อหา (Content)
URL	ใส่เส้นทางในเว็บโดยขึ้นต้นด้วย / เช่น /contact หรือใส่ที่อยู่เต็มของเว็บอื่น เช่น https://... ช่องนี้จะเปลี่ยนเป็นตัวเลือกรายชื่อหน้าเมื่อประเภทเป็น หน้า · ประเภท กลุ่ม กับ เนื้อหา ไม่มีช่องนี้ให้กรอก
เป้าหมาย (Target)	หน้าต่างเดิม หรือ แท็บใหม่ (ประเภท กลุ่ม กับ เนื้อหา ไม่มีช่องนี้)
คลาส CSS (CSS Class)	คลาสเพิ่มเติมที่ใส่ให้ลิงก์นั้น สำหรับคนที่ต้องการจัดสไตล์เอง
เมกะเมนู (Mega menu)	มีให้เฉพาะรายการชั้นบนสุด เปิดเพื่อให้รายการย่อยกลายเป็นแผงหลายคอลัมน์

กดปุ่ม อัปเดต เพื่อบันทึกรายการนั้น ปุ่ม ลบ อยู่ขวาสุดของช่องแก้ไข

ข้อสังเกตของประเภทรายการ

• กลุ่ม (Group) ใช้เป็นหัวข้อที่มีรายการย่อยอยู่ข้างใต้ ประเภทนี้ไม่เก็บ URL ผลคือถ้าผู้เข้าชมคลิกที่ตัวหัวข้อ จะไปที่หน้าแรกของเว็บ รายการย่อยจะเปิดเมื่อเอาเมาส์ชี้
• เนื้อหา (Content) เปิดช่อง เนื้อหา HTML ให้กรอก แต่เมนูที่แสดงบนเว็บผ่าน {{nav}} ใช้เฉพาะป้ายกำกับกับ URL ของรายการ ไม่ได้นำ HTML นั้นไปแสดง
• รายการที่ไม่มี URL ทุกประเภทจะลิงก์ไปหน้าแรก

จัดลำดับและทำเมนูย่อย

1. ลากที่จับด้านซ้ายของแถวขึ้นลงเพื่อสลับลำดับ
2. ลากไปทางขวาประมาณหนึ่งขั้น (24 พิกเซล) เพื่อยุบเข้าไปเป็นรายการย่อยของแถวที่อยู่เหนือมัน
3. ปล่อยเมาส์แล้วระบบบันทึกลำดับให้เอง จะมีข้อความ บันทึกลำดับแล้ว ขึ้นมุมล่างขวา

เรื่องที่ควรรู้

• ซ้อนได้หลายชั้น เมนูย่อยชั้นลึกจะเปิดออกด้านข้างบนจอคอมพิวเตอร์
• รายการที่มีลูกจะมีลูกศรให้พับ/คลี่ในหน้าแก้ไข เพื่อให้ลากง่ายขึ้น
• ลากรายการเข้าไปเป็นลูกของตัวเองหรือของลูกตัวเองไม่ได้ ระบบจะยกเลิกการลากนั้น
• ลบรายการแม่ จะลบรายการย่อยทั้งหมดใต้มันไปด้วย

เมกะเมนู

เมกะเมนูคือแผงกว้างที่กางออกใต้รายการชั้นบนสุด แบ่งเป็นหลายคอลัมน์ โครงสร้างที่ระบบคาดหวังคือสามชั้น

1. รายการชั้นบนสุด = ตัวที่ติ๊ก เมกะเมนู
2. ลูกของมัน = หัวคอลัมน์
3. หลานของมัน = ลิงก์ในคอลัมน์นั้น

เมื่อติ๊กเมกะเมนูแล้วจะมีตัวเลือก ความกว้างเมกะเมนู ให้เลือก

ตัวเลือก	ความกว้างต่ำสุดของแผง
ค่าเริ่มต้น	560px
แคบ	480px
กลาง	640px
กว้าง	800px
กว้างพิเศษ	1024px
เต็มความกว้างหน้าจอ	กางเต็มจอ

บนมือถือ เมกะเมนูจะแสดงเป็นหัวข้อพับได้ในลิ้นชักเมนู โดยแต่ละคอลัมน์กลายเป็นกลุ่มลิงก์เรียงลงมา

ตำแหน่งที่เมนูไปโผล่

เมนูของไซต์ถูกกำหนดตำแหน่งเป็น header ไว้ตายตัว เว็บสาธารณะจะหยิบเมนูที่ตำแหน่ง header และสถานะ เผยแพร่ มาใช้

ตัวธีมเป็นคนตัดสินว่าจะวางเมนูไว้ตรงไหน โดยใส่แท็ก {{nav}} ลงในส่วนหัวหรือส่วนท้าย ทั้งเมนูบนจอคอมพิวเตอร์ ลิ้นชักบนมือถือ และเมนูในส่วนท้าย อ่านจากเมนูชุดเดียวกันนี้ทั้งหมด

ระบบไม่มีเมนูส่วนท้ายแยกให้ตั้งค่า ถ้าธีมเขียน {{nav location="footer"}} ผลที่ได้คือรายการชุดเดียวกับส่วนหัว

ถ้ายังไม่ได้ตั้งเมนู

เว็บจะไม่ปล่อยให้ส่วนหัวว่าง เมื่อเข้าเงื่อนไขข้อใดข้อหนึ่งต่อไปนี้

• ยังไม่มีเมนูที่สถานะ เผยแพร่
• เมนูมีอยู่แต่ยังไม่มีรายการเลย

ระบบจะสร้างเมนูสำรองให้จาก

1. ลิงก์ Home ไปหน้าแรก
2. หน้าที่สถานะ เผยแพร่ ทุกหน้าที่อยู่ชั้นบนสุด (ไม่รวมหน้า slug home) เรียงตามชื่อ
3. ลิงก์ประเภทเนื้อหาที่เปิดใช้อยู่ ตามตารางนี้

ประเภทเนื้อหา	ลิงก์	ป้ายกำกับ
posts	/posts	บล็อก (Blog)
events	/events	Events
products	/products	Products
staffs	/staffs	Staff
books	/books	Books
docs	/docs	Docs

ลิงก์ /docs ในตารางนี้ไม่มีหน้ารวมรองรับ ระบบมีแต่หน้าเอกสารรายตัวที่ /docs/{slug} ถ้ากดจะเจอหน้าไม่พบ เว้นแต่คุณสร้างหน้าที่ slug docs ไว้เอง

เมื่อเมนูของคุณมีรายการอย่างน้อยหนึ่งรายการและเผยแพร่แล้ว เมนูนั้นจะคุมส่วนหัวทั้งหมด ลิงก์สำรองข้างต้นจะหายไปหมด รวมทั้งลิงก์ Home ด้วย ถ้ายังต้องการลิงก์กลับหน้าแรก ให้เพิ่มรายการที่ URL เป็น / เอง

ถ้าตั้งสถานะเมนูเป็น ฉบับร่าง เว็บจะกลับไปใช้เมนูสำรอง ใช้ท่านี้ได้ตอนที่อยากพักเมนูที่กำลังจัดอยู่

ธีมนำเมนูไปแสดงอย่างไร

{{nav}} ทำงานเฉพาะใน ส่วนหัว และ ส่วนท้าย ของธีม (ตั้งค่า → ธีม แท็บ General ช่อง ส่วนหัว / ส่วนท้าย) ใส่ในเนื้อหาหน้าหรือใน Template ของเนื้อหาจะไม่ทำงาน

ธีมเริ่มต้นเขียนไว้แบบนี้ในส่วนหัว

<nav class="hidden md:flex items-center gap-1">
  {{nav}}
</nav>
<div class="md:hidden">
  {{nav mobile="true"}}
</div>

คุณสมบัติที่ {{nav}} รับได้

คุณสมบัติ	ผล
class="..."	คลาสของกรอบนอก <ul> ผสมทับค่าตั้งต้น (เมนูบนจอคอมพิวเตอร์คือ flex items-center gap-1 ลิ้นชักมือถือคือ space-y-1 text-base)
itemClass="..."	คลาสของลิงก์แต่ละอัน
activeClass="..."	คลาสที่ผสมทับ itemClass เมื่อลิงก์ตรงกับหน้าที่กำลังเปิดอยู่
location="mobile" หรือ mobile="true"	เปลี่ยนไปแสดงเป็นปุ่มขีดสามขีดพร้อมลิ้นชักเมนูเต็มจอ

ในธีมเริ่มต้น ถ้าไม่ส่ง itemClass ลิงก์จะใช้สไตล์ที่มาจากชิ้นส่วน Nav Item ซึ่งเน้นลิงก์ของหน้าที่กำลังเปิดอยู่ให้ต่างจากลิงก์อื่นอยู่แล้ว และ activeClass จะไม่มีผล ถ้าอยากคุมสไตล์เอง ให้ส่ง itemClass มาคู่กับ activeClass

ตัวอย่าง

{{nav class="flex items-center gap-4" itemClass="text-sm text-gray-600 hover:text-black" activeClass="text-black font-semibold"}}

ปรับหน้าตาเมนูลึกกว่านั้น

โครงสร้าง HTML ของเมนูแยกเป็นชิ้นส่วนย่อยที่แก้ได้ที่ ตั้งค่า → ธีม แท็บ Nav (/admin/settings/themes/{id}/nav)

ชิ้นส่วน	ใช้ทำอะไร
Nav Item	ลิงก์แต่ละอันบนจอคอมพิวเตอร์
Nav Submenu	กรอบของกล่องเมนูย่อยที่กางลงมา
Nav Mega Header	กรอบของแผงเมกะเมนู
Nav Mega Column	หนึ่งคอลัมน์ในแผงเมกะเมนู
Nav Mobile Item	ลิงก์แต่ละอันในลิ้นชักมือถือ
Nav Mobile Submenu	หัวข้อพับได้ในลิ้นชักมือถือ
Nav Mobile Mega	หัวข้อเมกะเมนูในลิ้นชักมือถือ
Nav Mobile Mega Column	คอลัมน์ของเมกะเมนูในลิ้นชักมือถือ
Nav Mobile Drawer	ตัวลิ้นชักทั้งใบ

ถ้าแก้ Nav Mobile Drawer ต้องเก็บสองอย่างนี้ไว้ ไม่งั้นลิ้นชักจะพัง

• ปุ่มปิดที่มีคลาส nav-mobile-close
• แท็ก {{items}} ตำแหน่งที่รายการเมนูจะไปลง

ในธีมเริ่มต้น (Default) ชิ้นส่วนเหล่านี้ลบไม่ได้ ถ้าแก้เพลินจนเสียให้ใช้ Reset เพื่อคืนค่าโรงงาน ส่วนธีมอื่นที่ไม่ได้กำหนดชิ้นส่วนไหนไว้ จะยืมของธีมเริ่มต้นไปใช้ให้เอง อ่านเรื่องธีมเพิ่มที่ ธีมและเทมเพลต และดูแท็กอื่น ๆ ที่ แท็กเทมเพลต

เว็บหลายภาษา

• ป้ายกำกับเก็บแยกตามภาษา แท็บภาษาจะโผล่ในช่อง ป้ายกำกับ เมื่อ ตั้งค่า → ทั่วไป ตั้งภาษาไว้มากกว่าหนึ่งภาษา
• ปุ่ม แปลส่วนที่ขาด ในแถบขวาจะปรากฏเมื่อมีมากกว่าหนึ่งภาษา และใส่ AI API Key ไว้ที่ ตั้งค่า → ทั่วไป หัวข้อ AI Features แล้ว กดแล้วระบบจะไล่แปลป้ายกำกับที่ยังขาดภาษาจากภาษาหลัก
• เวลาผู้เข้าชมอยู่บนหน้าภาษาอื่น เช่น /th/about ลิงก์ภายในในเมนูจะเติมคำนำหน้าภาษาให้เอง ลิงก์ไปเว็บอื่น อีเมล และเบอร์โทร ไม่ถูกแตะ
• รายการประเภท หน้า จะสลับไปหน้าที่แปลไว้ของภาษานั้นให้ ถ้าหน้านั้นยังไม่มีคำแปล จะใช้เส้นทางของหน้าต้นฉบับต่อไป
• ตัวเลือกในปุ่ม เพิ่มหน้า แสดงเฉพาะหน้าในภาษาหลัก เพราะเมนูมีชุดเดียวใช้ร่วมกันทุกภาษา

จัดเมนูด้วย AI

ถ้าใส่ AI API Key ไว้แล้ว จะมีปุ่ม AI อยู่มุมขวาบนของหน้าแก้ไขเมนู เปิดกล่อง AI Menu Manager

1. พิมพ์สิ่งที่ต้องการ เช่น เอาของเดิมออกแล้วสร้างใหม่จากหน้าภาษาอังกฤษ
2. ระบบเสนอเป็นรายการงานที่จะทำ พร้อมบอกจำนวนขั้น
3. ตรวจแล้วกด Run plan เพื่อลงมือ หรือ Start over เพื่อสั่งใหม่

งานที่ AI เสนอได้มี ล้างรายการทั้งหมด · ดึงหน้าที่เผยแพร่เข้ามาเป็นรายการ · เพิ่มรายการ · เพิ่มกลุ่มพร้อมรายการย่อย · ลบรายการที่ชื่อตรงกับที่ระบุ ทุกอย่างเกิดหลังคุณกดยืนยันเท่านั้น

บันทึกแล้วแต่เว็บยังเป็นของเดิม

หน้าเว็บสาธารณะถูกเก็บแคชไว้เพื่อความเร็ว การบันทึกเมนูจะสั่งให้แคชอัปเดต แต่ต้องรอให้กระจายไปทั่วเครือข่าย โดยทั่วไปประมาณหนึ่งนาที

ถ้ารอแล้วยังไม่เปลี่ยน ไปที่ ตั้งค่า → ทั่วไป แล้วกด ล้างแคช / รีบิลด์เว็บ ปุ่มนี้ไม่ลบเนื้อหาอะไร

ตรวจเมื่อเมนูไม่ขึ้น

อาการ	สิ่งที่ต้องดู
ส่วนหัวแสดงลิงก์ที่คุณไม่ได้ใส่	เมนูยังเป็นฉบับร่าง หรือยังไม่มีรายการ ระบบจึงใช้เมนูสำรอง
แก้เมนูแล้วเว็บไม่เปลี่ยน	รอประมาณหนึ่งนาที แล้วกด ล้างแคช / รีบิลด์เว็บ
เมนูหายไปทั้งชุด เหลือแค่ Home กับลิงก์ประเภทเนื้อหา	ประเภทเนื้อหา Pages ถูกปิดที่ ตั้งค่า → ทั่วไป หัวข้อ เมนูแอดมิน (Admin Menu) เปิดกลับแล้วเมนูจะกลับมา
ไม่เห็น ตั้งค่า → เมนู ในแถบข้าง	บทบาทของคุณเป็น editor หรือ writer ต้องเป็น admin ขึ้นไป
คลิกรายการแล้วเจอหน้าไม่พบ	หน้าที่ผูกไว้ถูกย้ายเป็นฉบับร่างหรือถูกลบ ดู หน้าและบทความ
คลิกหัวข้อที่มีเมนูย่อยแล้วเด้งไปหน้าแรก	รายการนั้นไม่มี URL ใส่ URL ให้ หรือปล่อยไว้แบบนั้นถ้าต้องการให้เป็นแค่หัวข้อ