Phần tử giao diện người dùng ở bên cạnh màn hình máy tính
OpenOffice Writer với một thanh bên phức tạp ở bên phải, có tiêu đề "Thuộc tính"
**Thanh bên** là một thành tố điều khiển đồ họa hiển thị các dạng thông tin khác nhau ở bên phải hoặc bên trái của một cửa sổ ứng dụng hoặc hệ điều hành máy tính để bàn. Ví dụ về thanh bên có thể được nhìn thấy trong trình duyệt Opera, Apache OpenOffice, LibreOffice, SoftMaker Presentations và File Explorer; trong mỗi trường hợp, ứng dụng hiển thị các chức năng khác nhau thông qua thanh bên.

Tổng quan
---------

Thanh bên có nguồn gốc từ các ứng dụng dành cho máy tính để bàn, được thiết kế cho màn hình hình chữ nhật có cạnh ngang dài hơn. Như toolbar và status bar, thanh bên lưu trữ cả thông tin và GUI tiện ích mà người dùng ra lệnh cho ứng dụng. Không giống như thanh công cụ và thanh trạng thái, thanh bên có diện tích bề mặt lớn hơn do bố cục ứng dụng dành cho máy tính để bàn dài hơn theo chiều ngang. Các thanh bên có thể sử dụng accordions để sắp xếp các tiện ích con và phù hợp với bố cục lớn hơn diện tích bề mặt hiển thị.

Tiện ích
--------

Trong một số Engine tiện ích, một cái có thể cài đặt applet có thể nằm trên thanh bên. Các ví dụ đáng chú ý bao gồm:

* Windows Sidebar, chỉ là một phần của Windows Vista
* Google Desktop

Ngăn kéo
--------

Ảnh chụp màn hình HandBrake mô tả ngăn kéo được mở ở bên phải
Phiên bản đầu tiên của UI Aqua của Mac OS X đã hỗ trợ khái niệm thanh bên gọi là **ngăn kéo**, bật lên bên ngoài khung cửa sổ ứng dụng thay vì mở rộng từ bên trong như hầu hết các thanh bên của ứng dụng được sử dụng. Bất chấp những lời chỉ trích, các ứng dụng của bên thứ ba như Transmit, OmniWeb, Shiira và BBEdit nhanh chóng hỗ trợ thiết kế ngăn kéo. Email client tiêu chuẩn, Mail, các ngăn kéo đã sử dụng để liệt kê các hộp thư trước 10.4 ('Tiger'), khi chúng được thay thế bằng thanh bên truyền thống. Một số ứng dụng khác do Apple tạo và ứng dụng của bên thứ ba đã thay thế ngăn kéo bằng thanh bên hoặc thiết kế lại giao diện để không cần thanh bên/ngăn kéo. Hướng dẫn giao diện con người của Apple hiện khuyên bạn không nên sử dụng chúng. Các ứng dụng nặng về ngăn kéo trước đây, như iCal và Adium, giờ đây hoàn toàn không chứa ngăn kéo và thay vào đó hiển thị một thanh bên tùy chỉnh trong cửa sổ chính.

Hệ điều hành di động Android cũng sử dụng thuật ngữ 'ngăn kéo' để chỉ một loại tiện ích menu thanh bên, thường có thể truy cập bằng cách vuốt từ cạnh trái của màn hình.

Tham khảo
---------

1. ↑  "The Mac OS X Drawer". Bản gốc lưu trữ ngày 3 tháng 12 năm 2016. Truy cập ngày 4 tháng 2 năm 2023.
2. ↑  "OS X Human Interface Guidelines". Drawers are rarely used in modern Mac apps. As much as possible, redesign your UI to avoid using drawers; if you’re creating a new app, avoid adding a drawer to the design.
3. ↑  Bohn, Dieter (8 tháng 8 năm 2019). "Android Q's back gesture controversy, explained". *The Verge*. Truy cập ngày 25 tháng 8 năm 2019.

| * x
* t
* s
Thành tố điều khiển đồ họa |
| --- |
| Nhập lệnh | 
* Nút bấm
* Trình đơn ngữ cảnh
* Trình đơn
* Trình đơn bánh
* Thả xuống
* Adjustment handle

 |
| Nhập-xuất dữ liệu | 
* Hộp chọn
* Hộp đa hợp
* Cycle button
* Drop-down list
* Khung nhìn lưới
* Hộp danh sách
* List builder
* Radio button
* Thanh cuộn
* Slider
* Spinner
* Hộp tìm kiếm
* Hộp văn bản

 |
| Thông tin | 
* Balloon help
* Head-up display in computing
* Head-up display in video games
* Biểu tượng
* Thanh thông tin
* Nhãn
* Loading screen
* Progress indicator
	+ Thanh tiến trình
	+ Splash screen
	+ Throbber
* Thanh bên
* Thanh trạng thái
* Toast
* Tooltip

 |
| Vùng chứa | 
* Accordion
* Disclosure widget
* Khung
* Thanh trình đơn
* Panel
* Popover
* Ruy băng
* Thẻ
* Thanh công cụ
* Cửa sổ

 |
| Điều hướng | 
* Thanh địa chỉ
* Breadcrumb
* Siêu liên kết
* Khung nhìn cây
* Thanh liên kết

 |
| Cửa sổ đặc biệt | 
* Hộp giới thiệu
* Alert dialog box
* Hộp thoại
* File dialog
* Inspector window
* Modal window
* Palette window

 |
| Khái niệm liên quan | 
* Trình quản lý bố cục
* Diện mạo và cảm nhận
* Mouseover
* Bộ công cụ widget
* WIMP
* File viewer
* Graphical user interface elements

 |