Thanh tab nằm cố định ở đáy màn hình điện thoại, ngay tầm ngón cái: 3 đến 5 tab dẫn tới trang chủ, tìm kiếm, giỏ hàng, và mỗi tab có thể bật lên một bảng sub menu.
Trước khi làm: đã cài Navi+ và bật Store Connector trong theme.
1Chọn loại menu
Trong Navi+ bấm Add menu rồi chọn thẻ Tab Bar.
2Hai cách bắt đầu
Trình hướng dẫn từng bước
Bấm Create from your website > Build it step by step. Chọn Position (Flush to the bottom hoặc Floating) và một mẫu, gõ tên và link cho 3 đến 5 tab, rồi chọn kiểu hiển thị cho tab nào có sub menu. Bấm Generate menu là có thanh tab chạy được.
Tự dựng
Bấm Create from a template > Browse templates rồi chọn thẻ Blank để có thanh trống. Bạn thêm từng tab bằng Add item, link lấy từ danh sách collection, sản phẩm và trang của cửa hàng. Muốn thiết kế phối sẵn thì chọn một mẫu khác trong thư viện.
3Chỉnh tay tiếp
Dù dùng trình hướng dẫn hay tự dựng, bạn vẫn chỉnh tay ở Build Menu: mỗi mục cấp 1 là một tab, kéo thả đổi thứ tự, bấm một tab để đổi tên, icon, link. Sang Design để đổi màu và cỡ chữ.
Số tab: giữ 3 đến 5 tab, nhiều hơn thì chữ và icon bị chật. Giới hạn: tối đa 3 cấp (tab, mục trong bảng con, link bên trong). Tab có mục con thì bấm vào sẽ bật bảng lên thay vì chuyển trang. Xem Thêm, sắp xếp và lồng mục menu.
4Mẫu item tiêu biểu
Bấm + ITEM để mở popup Add item, rồi chọn mẫu. Ở cấp 1, mỗi mục là một tab; đây là những mẫu hay dùng nhất cho thanh tab.
Tab có sub menu: bấm là bật bảng lên
Tab có mục con không chuyển trang: khách bấm thì một bảng sub menu bật lên ngay trên thanh, chứa danh mục, ảnh hay banner. Hợp cho tab Shop với vài nhóm hàng, khỏi phải rời trang. Mục con cấp 2 và 3 dùng chung bộ mẫu của ngăn kéo Mobile Menu (Links & icons, Banner và các mẫu khác trong popup).
Thêm: ở popup Add item chọn Sub-item of “tên tab” ở dòng Insert to, hoặc bật Submenu cho tab ngay trong trình hướng dẫn. Chi tiết kiểu mở ở mục cuối bài.
Mở Mobile Menu từ một tab
Đặt tab Menu có link Open another Navi+ Mobile menu: bấm tab là ngăn kéo Mobile Menu trượt ra, nằm đúng tầm ngón cái. Cách quen nhất để có cả thanh tab lẫn danh mục đầy đủ.
Panel button: giỏ hàng và tìm kiếm
Ở Basics: tab mở khung Open Cart, Open Search của theme hoặc một menu Navi+ khác ngay tại chỗ, không tải lại trang.
open:NaviMenu(…)Opens a Mobile Menu you pickopen:clickTo(CSS Selector)Clicks a button on the pageLinks & icons: tab dẫn tới trang
Mẫu cơ bản nhất: icon cộng chữ, dẫn tới trang chủ, collection, trang bất kỳ. Thêm Divider hoặc Space ở Basics khi cần ngăn nhóm tab.
Page & app actions: cuộn trang
Ở Page & app actions: Scroll page (ví dụ nút về đầu trang), Simulate action (mô phỏng một thao tác trên trang) và Run JavaScript cho việc riêng.
Social & support: gọi và nhắn tin
Ở Social & support: tab gọi điện, WhatsApp hay chia sẻ trang, khách liên hệ chỉ một chạm.
5Publish: bật thanh lên cửa hàng
Mở Publish rồi bấm Turn on. Tab Bar nổi cố định ở đáy màn hình trên mọi trang nên không cần chọn chỗ đặt trong theme, chỉ cần Store Connector đã bật.
Turn on là thanh hiện ngay
Tắt thì cửa hàng không đổi, bật thì thanh tab hiện ở đáy. Thanh đứng yên khi khách cuộn trang, và Navi+ tự chừa khoảng trống cuối trang bằng đúng chiều cao thanh nên không che chân trang. Mặc định chỉ hiện trên điện thoại; muốn hiện cả trên máy tính, bật Show menu on desktop ở Configure.
Sub menu tràn mép hay có mũi tên
Bảng sub menu mở theo hai kiểu: Default (edge-to-edge) tràn sát hai mép màn hình, hoặc Dropdown (arrow + margin) chừa lề và có mũi tên chỉ đúng vào tab khách vừa bấm. Đổi ở Configure > Submenu Expand Style.
Xem hai kiểu mởThanh nổi cách mép
Chọn Floating ở Position lúc tạo, hoặc chỉnh Margin để thanh cách mép dưới và hai bên màn hình thay vì dính sát.
Xem vị trí và khoảng cách lềNền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix, Add menu mở thẳng thư viện mẫu thay cho trình hướng dẫn ở trên; chọn Tab Bar, chọn một mẫu rồi sửa các tab trong cây mục menu. Bật bằng công tắc Publish this menu rồi Save, không có nút Turn on. Với tab giỏ hàng và tìm kiếm, gắn link dẫn thẳng tới trang giỏ hàng và trang tìm kiếm của web thay cho Open Cart và Open Search.
Trên WordPress và website khác, Add menu mở thẳng thư viện mẫu thay cho trình hướng dẫn ở trên; chọn Tab Bar, chọn một mẫu rồi sửa các tab trong cây mục menu. Bật bằng công tắc Publish this menu rồi Save, không có nút Turn on. Với tab giỏ hàng và tìm kiếm, gắn link tới trang giỏ hàng, hoặc điền CSS selector của nút giỏ hàng và ô tìm kiếm trên web (cách lấy: Tìm chỗ đặt menu bằng Navi+ Live).