UI/UX

Navigation bar là gì?

Navigation bar là thanh chứa các liên kết hoặc nút điều hướng chính, trên website thường nằm ở đầu trang, còn trên ứng dụng iOS là thanh trên cùng hiển thị tiêu đề màn hình và nút quay lại.

Hiểu kỹ hơn

Tên gọi này có nghĩa khác nhau tuỳ nền tảng. Trên website, navbar thường chứa logo bên trái, các mục menu chính và nút hành động như Đăng nhập bên phải; nó có thể dính trên đầu khi cuộn (sticky header). Trong Apple HIG, navigation bar là thanh trên cùng của màn hình ứng dụng, có tiêu đề, nút quay lại và vài nút hành động. Còn trong Material Design 3, navigation bar lại là thanh dưới đáy màn hình, tương đương tab bar của iOS. Vì vậy khi trao đổi với lập trình viên nên chỉ rõ vị trí và nền tảng. Trong Figma, navbar web thường dựng bằng auto layout ngang với logo, nhóm liên kết và nút, đặt Fill container cho chiều ngang. Ví dụ: navbar của Apple.com gồm logo và các mục Mac, iPad, iPhone. Lỗi thường gặp là nhồi quá nhiều mục khiến navbar xuống hai dòng trên màn hình nhỏ.

Navigation bar (thanh điều hướng)

Học viên ColorME làm Navigation bar

Navigation bar và cardNavigation bar và cardNavigation BarNavigation BarSlide navigation bar,cardSlide navigation bar,cardSử dụng navigation bar & tab barSử dụng navigation bar & tab barNavigation bar for android, tabbar for Video appNavigation bar for android, tabbar for Video appNavigation Bar & CardNavigation Bar & Card
Kiểm tra nhanh

Bộ câu hỏi ôn tập về UI/UX

Làm thử

Thuật ngữ liên quan

01Navigation (hệ thống điều hướng)

Navigation là toàn bộ các thành phần giúp người dùng biết mình đang ở đâu, có thể đi đâu và quay lại thế nào trong một website hoặc ứng dụng.

02Header cố định (sticky header)

Sticky header là thanh đầu trang (logo, menu, nút chính) luôn dính ở cạnh trên màn hình khi người dùng cuộn xuống, giúp điều hướng và hành động chính luôn…

03Tab bar (thanh tab dưới đáy ứng dụng)

Tab bar là thanh điều hướng cố định ở đáy màn hình ứng dụng di động, chứa từ ba đến năm mục chính để người dùng chuyển nhanh giữa các khu vực cấp cao nhất…

04Menu hamburger

Menu hamburger là biểu tượng ba gạch ngang dùng để mở menu điều hướng ẩn, phổ biến trên giao diện điện thoại và website responsive.

05Human Interface Guidelines (HIG) của Apple

Human Interface Guidelines là bộ hướng dẫn thiết kế chính thức của Apple cho ứng dụng trên iPhone, iPad, Mac, Apple Watch, Apple TV và Vision Pro, gồm…

06Material Design

Material Design là hệ thống thiết kế do Google ra mắt năm 2014, cung cấp nguyên tắc, component, màu, chữ và chuyển động cho ứng dụng Android, web và nhiều…