> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation Bar

> Hướng dẫn tùy chỉnh thanh điều hướng (Navigation Bar) của Mini App, bao gồm thêm, sửa, xóa trang và chọn mẫu.

## **3.2. Navigation Bar**

Người dùng có thể thao tác với **thanh điều hướng (Navigation Bar)** bao gồm các tính năng như sau:

* Thêm trang mới trên thanh điều hướng
* Kéo thả để thay đổi vị trí các trang
* Chỉnh sửa trang
* Xóa trang
* Chọn mẫu thanh điều hướng phù hợp
* Tùy chỉnh các chỉ số hiển thị của thanh điều hướng

<Frame caption="Giao diện thanh điều hướng">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image570_ba08464394.png"
    alt="Giao diện thanh Navigation Bar trong bảng quản trị"
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title="Giao diện Navigation Bar"
  />
</Frame>

***

### **a. Thêm trang mới trên thanh điều hướng**

<Steps>
  <Step title="Nhấn vào nút Thêm trang mới">
    Người dùng nhấn nút **“Thêm trang mới”** để bắt đầu.

    <Frame caption="Nút thêm trang mới">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image571_56c21bd7c7.png"
        alt="Nút thêm trang mới trong giao diện Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Nút thêm trang mới"
      />
    </Frame>
  </Step>

  <Step title="Nhập thông tin trang mới">
    * Nhập **tên trang**
    * Chọn **đường dẫn đến trang**: trang sẽ hiển thị khi người dùng nhấn nút này
    * Chọn **Icon mặc định** và **Icon kích hoạt**

    <Frame caption="Form nhập thông tin trang mới">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image572_0f111020ca.png"
        alt="Form nhập thông tin trang trong Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Form nhập thông tin trang mới"
      />
    </Frame>
  </Step>

  <Step title="Xác nhận thêm trang">
    Người dùng nhấn **“Thêm trang”** để hoàn tất hoặc **“Hủy bỏ”** để hủy thao tác thêm trang.

    <Frame caption="Xác nhận thêm trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image573_866e298ade.png"
        alt="Xác nhận thêm trang mới trong Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Xác nhận thêm trang"
      />
    </Frame>
  </Step>
</Steps>

***

### **b. Kéo thả để thay đổi vị trí các trang**

<Steps>
  <Step title="Kéo thả để sắp xếp thứ tự trang">
    Nhấn giữ biểu tượng <Icon icon="grip-vertical" color="#cfcfcf" size={15} /> tương ứng với từng trang, sau đó kéo đến vị trí mong muốn để thay đổi thứ tự hiển thị trên thanh điều hướng.

    <Frame caption="Thay đổi vị trí các trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image574_eea98aac07.png"
        alt="Thay đổi vị trí các trang trên Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Kéo thả vị trí trang"
      />
    </Frame>
  </Step>
</Steps>

***

### **c. Chỉnh sửa trang**

<Steps>
  <Step title="Nhấn vào biểu tượng chỉnh sửa">
    Người dùng nhấn biểu tượng <Icon icon="pencil" color="#cfcfcf" size={15} /> tương ứng với trang muốn chỉnh sửa.

    <Frame caption="Nút chỉnh sửa trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image575_c9877f4a9b.png"
        alt="Nút chỉnh sửa trang trên Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Chỉnh sửa trang"
      />
    </Frame>
  </Step>

  <Step title="Chỉnh sửa thông tin trang">
    * Nhập **tên trang**
    * Chỉnh sửa **đường dẫn đến trang**
    * Chọn lại **Icon mặc định** và **Icon kích hoạt**

    <Frame caption="Form chỉnh sửa dữ liệu trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image576_1b87269328.png"
        alt="Form chỉnh sửa dữ liệu Navigation Bar"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Chỉnh sửa dữ liệu trang"
      />
    </Frame>
  </Step>

  <Step title="Lưu hoặc hủy chỉnh sửa">
    Người dùng nhấn **“Lưu chỉnh sửa”** để cập nhật thông tin hoặc **“Hủy bỏ”** nếu không muốn thay đổi.

    <Frame caption="Lưu hoặc hủy chỉnh sửa trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image577_43413dd6a4.png"
        alt="Lưu hoặc hủy chỉnh sửa trang"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Lưu chỉnh sửa"
      />
    </Frame>
  </Step>
</Steps>

***

### **d. Xóa trang**

<Steps>
  <Step title="Nhấn vào biểu tượng xóa">
    Người dùng nhấn biểu tượng <Icon icon="trash-can" color="#cfcfcf" size={15} /> để xóa trang khỏi thanh điều hướng.

    <Frame caption="Nút xóa trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image578_da468b4797.png"
        alt="Nút xóa trang trong Navigation Bar"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút xóa trang"
      />
    </Frame>
  </Step>

  <Step title="Xác nhận thao tác xóa">
    Khi hộp thoại xuất hiện, người dùng chọn **“Xóa ngay”** để xác nhận hoặc **“Hủy”** để hủy thao tác.

    <Frame caption="Hộp xác nhận xóa trang">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image679_a8b7107cd0.png"
        alt="Xác nhận xóa trang trong Navigation Bar"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Xác nhận xóa"
      />
    </Frame>
  </Step>
</Steps>

***

### **e. Chọn mẫu thanh điều hướng**

<Steps>
  <Step title="Xem thêm mẫu thanh điều hướng">
    Tại phần **“Các mẫu thanh điều hướng”**, người dùng nhấn **“Xem thêm”** để mở danh sách mẫu có sẵn.

    <Frame caption="Danh sách mẫu Navigation Bar">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image580_d071e0b5d3.png"
        alt="Các mẫu Navigation Bar có sẵn"
        style={{
      borderRadius: "0.5rem",
      width: "100%",
      height: "auto",
      objectFit: "cover",
      objectPosition: "0 -38px" 
    }}
        title="Danh sách mẫu Navigation Bar"
      />
    </Frame>
  </Step>

  <Step title="Chọn và áp dụng mẫu">
    Chọn mẫu mong muốn, sau đó nhấn vào biểu tượng <Icon icon="check-circle" color="#0a06e4" size={15} /> để áp dụng.

    <Frame caption="Thay đổi mẫu thanh điều hướng">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image581_3df9e7021c.png"
        alt="Thay đổi mẫu thanh Navigation Bar"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Thay đổi mẫu Navigation Bar"
      />
    </Frame>
  </Step>
</Steps>

***

Thanh điều hướng sẽ tự động cập nhật theo lựa chọn mới của người dùng.