Mega-Menu & Nav-Groups
Menu nâng cao với dropdown đơn giản hoặc mega-menu nhiều cột – phù hợp shop nhiều danh mục, agency nhiều dịch vụ, restaurant có menu chia nhóm.
Bật Nav-Groups tùy chỉnh
Cài đặt site → tab Menu → mục Menu điều hướng → bấm Bắt đầu. Khi có ít nhất một nhóm, menu auto-generated từ section/page bị thay thế bởi spec.nav_groups[].
2 loại NavGroup
1. Plain link
Không có children/columns → render link đơn:
| Trường | Giá trị |
|---|---|
| label | Tên hiển thị (vd. 'Trang chủ') |
| href | URL hoặc anchor |
| icon | (Tùy chọn) Tên Lucide icon |
2. Dropdown
Có children[] → dropdown đơn giản với danh sách link:
- Mỗi child có
label,href,description(subtitle nhỏ),icon. - Inline-edit từng field trực tiếp trong header preview.
3. Mega-Menu
Có columns[] (hoặc variant: "mega") → panel nhiều cột:
- Mỗi
columncótitle(UPPERCASE) +links[]. - Mỗi link như child trong dropdown (label + href + description + icon).
- Phù hợp shop nhiều category, restaurant có menu chia phần (Phở, Bún, Nước…).
href hỗ trợ 3 dạng
| Dạng | Ví dụ | Hành vi |
|---|---|---|
| URL ngoài | https://facebook.com/... | Mở tab mới (target=_blank) |
| Anchor section | #section-2 | Smooth-scroll tới section thứ 3 (0-indexed) |
| Page link | page:about | Navigate tới page có id='about' |
Inline-Editing
Mọi label, href, description, column title đều click-để-sửa trực tiếp trong header preview – không cần modal. Đường href hiển thị dòng nhỏ font-mono màu xám bên dưới label khi ở chế độ edit.
Dùng
icon Lucide (vd. Utensils, Coffee, Cake) để mega-menu có visual hierarchy rõ. Restaurants nhiều menu → mega + icon = tỷ lệ click cao hơn 30%.Reset về auto
Xóa toàn bộ nav_groups[] → menu auto-generated từ section/page lại hoạt động.