---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/layout/Header
title: Header
---
```ts
import { Header } from "zmp-ui";
```


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

:::info 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.
  :::

### Hướng dẫn sử dụng

## Ví dụ



## Bảng thuộc tính


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| 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 | true | Hiển thị nút back ở đầu header hoặc không. |
| 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. |

### Tiêu chuẩn thiết kế

{/* inline-mdx: ../specs/Header.mdx (from .sources/zmp-docs/zaui-react_versioned_docs/version-1.11.0/layout/Header.mdx) */}

#### Header

Header của Mini App bao gồm phần nội dung và Mini App Control như button “menu” và “close”. Header bar được hiển thị ở trên cùng màn hình.

---

Có 2 tùy chọn màu sắc riêng biệt

- Cụm title, icon có tùy chọn màu sắc là: trắng, đen
- Navigation bar có tùy chọn màu sắc: không giới hạn

:::warning Lưu ý
Nên lựa chọn, phối hợp đúng giữa màu sắc title, icon và màu sắc action bar để đảm bảo đủ độ tương phản cần thiết
:::


**Black text, icon color**

---

![black text](/assets/MA/img/zaui/header/black-text-header.png)


**White text, icon color**

---

![white text](/assets/MA/img/zaui/header/white-text-header.png)


---

##### Anatomy

Header bar bao gồm các thành phần sau:

- Left (back) button
- Title
- Mini App Control (cố định)

![anatomy](/assets/MA/img/zaui/header/anatomy.png)

---

##### Header bar container

Mặc định Header bar container sẽ có màu solid. Có thể ẩn header để thay thế bằng custom header, xem hướng dẫn kỹ thuật tại đây

![anatomy](/assets/MA/img/zaui/header/transparent-header.png)

:::warning Lưu ý
Không nên hiển thị thêm thanh điều hướng dưới navigation bar (headers) mặc định của Zalo Mini App
:::

![Dont Do](/assets/MA/img/zaui/header/dont-do-1.png)

Nếu tùy chỉnh ẩn header mặc định, chú ý hiển thị nội dung phù hợp với chiều cao của header bar

![Dont Do](/assets/MA/img/zaui/header/dont-do-2.png)

---

##### Left Button

Bạn có thể thêm thành phần điều hướng ở khu vực này, thường là button “back” - chỉ nên thêm ở trang thứ cấp

![Left Button](/assets/MA/img/zaui/header/left-button.png)

:::warning Lưu ý
Hạn chế hiển thị button “home” ở phần ở phần này.
:::

![Home Button](/assets/MA/img/zaui/header/dont-do-home-button.png)

---

##### Title

Tiêu đề thường dùng cho các mục đích sau:

- Hiển thị tên của màn hình
- Hiển chức năng hiện tại
- Hiển thị tên Mini App

Tiêu đề nên ngắn gọn, dễ hiểu và tối ưu để hiển thị đầy đủ

![Title](/assets/MA/img/zaui/header/dont-do-title.png)

---

##### Mini App Control

Mini App Control là thành phần mặc định của Mini App. Người có thể dùng có thể mở menu Mini App hoặc đóng Mini App.

![Title](/assets/MA/img/zaui/header/mini-app-control.png)
{/* inline-mdx: end ../specs/Header.mdx */}