# 5. Tạo menu bản mobile

**Bước 1: Thêm mới icon menu.**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/CPSvXMUHgjig6ofsjkym/menu.png" alt=""><figcaption></figcaption></figure>

Hoặc bạn vào phần Thêm mới--> Phần tử--> Biểu tượng và tìm kiếm với từ khóa Menu.

**Bước 2: Tạo popup nội dung menu.**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/93kl4CV9MQNYnQO25auE/menu2.png" alt=""><figcaption></figcaption></figure>

**Bước 3: Liên kết các mục menu đến section tương ứng hoặc tới trang khác.** \
**(Xem thêm hướng dẫn** [**liên kết đến section**](https://ladipage-vietnam.gitbook.io/ladipage-v4/cac-tinh-nang-mo-rong/broken-reference) **và** [**liên kết mở liên kết**](https://help.ladipage.vn/su-kien-cho-phan-tu/su-kien-nhap-chuot/su-kien-mo-lien-ket)**).**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/rw9xTLcDa3SvOToJNj2j/popupmenu.png" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Lưu ý:**&#x20;

* **Bạn có thể cài đặt vị trí hiển thị của Popup như mình mong muốn.**
  {% endhint %}

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/H3oZdUrCukvAxbnh8jLw/popup1.png" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

* **Popup nội dung menu sẽ hiển thị khi khách hàng bấm vào icon menu, vì vậy không cài đặt hiển thị cho popup này.**
  {% endhint %}

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/WLxeXkeXMDJs3XPt3G7H/popup2.png" alt=""><figcaption></figcaption></figure>

**Bước 4: Liên kết icon tới popup.**

**Bạn vào phần thiết lập--> Sự kiện--> Chọn hành động nhấp chuột--> Sự kiện mở popup--> Chọn popup nội dung menu.**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/Kqqvmn96BkS9ff88Elyh/popup3.png" alt=""><figcaption></figcaption></figure>

**Bước 5: Ghim icon ở đầu trang trong suốt quá trình khách hàng cuộn chuột. Bạn có thể chọn vị trí hiển thị của icon menu này theo vị trí ghim**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/Zjd89LcFWyIsJGmwqa3a/ghim%202.png" alt=""><figcaption></figcaption></figure>

Nếu bạn thiết kế kiểu Responsive, bạn có thể thiết kế menu desktop và mobile khác biệt nhau bằng cách **Ẩn các nội dung menu của desktop trong thiết kế bản mobile.**

<figure><img src="https://content.gitbook.com/content/Pt4qBo6SG7lFxhw0I4Zm/blobs/DQ3elM1WoBBvcF8Mn2FY/%E1%BA%A9n.png" alt=""><figcaption></figcaption></figure>