Mobile
Active: แพ็กเสริม · 7 รายการ
SECTION 6A · COMPONENT QA
Zone Subnav Lab
รายการทั้ง 6 โซนจาก 6A.3 พร้อม active state, กรณีไม่มี active, horizontal overflow บนมือถือ, การเปรียบเทียบกับ filter chips และ PDP Section Tabs
Devices
Active: มือถือ · 7 รายการ
Fibre
Active: เช็กพื้นที่ · 6 รายการ
Entertainment
Active: ถ่ายทอดสด · 6 รายการ
Privileges
Active: แลกพอยท์ · 5 รายการ
Services
Active: AI และ Productivity · 5 รายการ
No active state
ใช้กับหน้า compare / how-it-works ตาม 6A.4
Mobile overflow · 390px
Active อยู่ท้ายรายการและจะเลื่อนเข้ามาใน viewport อัตโนมัติ
P6.1 PLACEMENT DECISION
ใต้ Header ไม่ใช่ใต้ Hero
แบบ A · เลือกใช้HeaderZone SubnavBreadcrumbHero
แบบ B · ไม่เลือกHeaderBreadcrumbHeroZone Subnav
แบบ A ทำให้ตำแหน่งทางเดินในโซนคงที่ แม้หน้าไม่มี Hero และผู้เข้าจาก Search เห็นทางไปต่อทันที
MOBILE SCROLL DEMO · 390px
Sticky เหลือหนึ่งแถบ
1 · โหลด/เลื่อนขึ้น: Header 64px
Subnav 48px
เมื่อเลื่อนลงเกิน 64px Header ซ่อน และหน้าที่ไม่มี filter ใช้ Subnav ที่ top: 0
2 · PLP เลื่อนลง: ตัวกรอง · เรียงตาม
บน PLP แถบ Filter 48px แทน Subnav จึงมี sticky เพียงหนึ่งแถบ
STATE REFERENCE
Default · Active · Keyboard focus
ค่าเริ่มต้นกำลังอยู่หน้านี้Keyboard focus
6A.5 COMPARISON
Zone links ไม่ใช่ Filter chips
Zone Subnav เป็นข้อความและเส้นใต้ ส่วน filter เป็นปุ่ม pill ที่คงอยู่ในหน้าเดิม
6A.7 PDP SECTION TABS
Device
Plan
AIS PLAY
ทางไปต่อและ Help entry
Page Type: LAB · Template: SUBNAV-LAB