Header

Cập nhật lần cuối:15/6/2026

import { Header } from "zmp-ui";

Dùng để hiển thị thông tin cố định ở phía trên màn hình.

Tips

Có 2 loại header trong Zalo Mini App:

Header native: hiển thị bởi app Zalo, thiết lập qua app-config.json, không thể tuỳ biến trong Mini App.
Header component (đang xem): có thể tuỳ chỉnh nội dung, màu sắc, mở rộng bằng React/CSS. Các Mini App mới mặc định dùng loại này.

Ví dụ

Property	Type	Required	Description
backIcon	ReactNode	No	Tuỳ chỉnh nút back ở đầu header. Nếu như không được truyền vào, sẽ sử dụng nút back mặc định.
showBackIcon	boolean	No	Hiển thị nút back ở đầu header hoặc không. (default: `true`)
onBackClick	(e: React.MouseEvent) => void	No	Callback được gọi khi nút back được click.
backgroundColor	string	No	Màu nền của header.
textColor	string	No	Màu chữ của header.
title	string	No	Tiêu đề của header.