F71 — Tabs & Điều hướng

HybReport Design Language System — Các thành phần điều hướng và tab

1. Tab viền dưới (Bottom-border Tabs)
Tab đang chọn có viền dưới 2px màu primary. Dùng cho điều hướng nội dung chính.
Mặc định + Đang chọn
Tổng quan
Báo cáo
Cài đặt
Lịch sử
Có mục bị vô hiệu hóa
Tổng quan
Báo cáo
Cài đặt
Nâng cao
2. Chuyển đổi dạng viên (Pill Toggle)
Nền container #f1f5f9, bo tròn 16px. Mục đang chọn có nền trắng và đổ bóng.
Mặc định
Theo ngày
Theo tuần
Theo tháng
Có mục vô hiệu hóa
Tất cả
Đang xử lý
Hoàn thành
Đã xóa
Kích thước nhỏ
Biểu đồ
Bảng
3. Điều hướng thanh bên (Sidebar Navigation)
Liên kết dọc, mục đang chọn có viền trái #2563eb và nền #eff6ff.
Các trạng thái
Bảng điều khiển
Quản lý đơn hàng
Sản phẩm
Khách hàng
Báo cáo tài chính
Quản trị hệ thống
Với nhóm
Quản lý
Nhân viên
Phòng ban
Chức vụ
Cấu hình
Tham số
Phân quyền
4. Điều hướng phân cấp (Breadcrumb)
Hiển thị vị trí hiện tại trong cấu trúc phân cấp trang.
Cơ bản
Trang chủ › Quản lý › Danh sách đơn hàng
Nhiều cấp
Trang chủ › Kế toán › Báo cáo › Tài chính › Bảng cân đối kế toán Q1/2026
Với biểu tượng
🏠 Trang chủ / 📁 Dự án / 📄 Chi tiết
5. Tab có huy hiệu/số đếm (Tab with Badge)
Tab kết hợp badge hiển thị số lượng mục trong mỗi danh mục.
Mặc định
Tất cả 128
Chờ duyệt 14
Đã duyệt 96
Từ chối 3
Có mục vô hiệu hóa
Tin nhắn 52
Thông báo 7
Nhắc nhở 3
Đã lưu trữ 0
Tham chiếu Token
Các giá trị thiết kế sử dụng trong thành phần điều hướng.
Token Giá trị Mô tả
color-active #2563eb Màu tab/nav đang chọn
color-inactive #64748b Màu tab/nav không chọn
color-disabled #cbd5e1 Màu mục bị vô hiệu hóa
bg-pill-container #f1f5f9 Nền container pill toggle
bg-sidebar-active #eff6ff Nền mục sidebar đang chọn
border-tab-active 2px solid #2563eb Viền dưới tab đang chọn
border-sidebar-active 3px solid #2563eb Viền trái sidebar đang chọn
radius-pill 16px Bo tròn container pill
radius-card 14px Bo tròn card section
shadow-pill-active 0 1px 3px rgba(0,0,0,0.08) Đổ bóng pill đang chọn
font-family Inter Font chính