คอมโพเนนต์ทั้งหมด

Navbar

แถบนำทางหลัก แถบเต็มใน ASWINOLOGY° และแคปซูลแก้วใน Lurnelle

ui/navbar.tsxClient component

ตามแบรนด์ปัจจุบัน

ASWINOLOGY° เป็นแถบเต็มความกว้างพร้อมจุดองศาใต้ลิงก์ปัจจุบัน Lurnelle เป็นแคปซูลแก้วลอย ย่อหน้าจอให้แคบกว่า 860 px เพื่อดูเมนูมือถือ

tsx

<Navbar
  pathname={pathname}
  brand={<Wordmark as={Link} href="/" />}
  links={[{ label: "คอร์ส", href: "/courses" }, { label: "ปรึกษา", href: "/consult" }]}
  actions={<Button size="sm" variant="primary">เข้าสู่ระบบ</Button>}
  renderLink={({ label, ...props }) => <Link {...props}>{label}</Link>}
/>

Props

Prop	Type	Default	คำอธิบาย
`brand`	`ReactNode`	`-`	โลโก้ ด้านซ้าย
`links`	`{ label, href }[]`	`-`	ลิงก์หลัก ไม่เกินหกรายการ
`pathname`	`string`	`-`	ใช้กำหนด aria-current และปิดเมนูมือถือเมื่อเปลี่ยนหน้า
`actions`	`ReactNode`	`-`	ด้านขวา เช่น ปุ่มเข้าสู่ระบบ
`floating`	`boolean`	`Lurnelle`	บังคับแบบแคปซูลลอย
`renderLink`	`(link) => ReactNode`	`<a>`	ใช้ Link ของ router

ลิงก์ปัจจุบันมี aria-current=page ไม่ได้บอกด้วยสีอย่างเดียว
ปุ่มเมนูมือถือมี aria-expanded และ aria-controls ปิดด้วย Esc
ใส่ลิงก์ข้ามไปเนื้อหาไว้ก่อน Navbar

ตามแบรนด์ปัจจุบัน

Props

การเข้าถึง