Mini Program Menu

下载.png

Usage

The Mini Program menu is a resident element in the navigation bar for the users to visit on any page. The Mini Program menu contains multiple actionable items relevant to the Mini Program.
image.png
When the users tap the menu icon in the upper-right corner of the Mini Program interface, a Mini Program menu will appear at the bottom of the screen. By default, the menu includes several operating options provided by the platform such as "Share the Mini Program", "Permission and Agreement Settings", and "About the Mini Program". Menu items can be added to the super app as required.

Anatomy

image.png

Mini Program Icon & Name

The icon and name of the Mini Program currently used are displayed in the upper-left corner of the Mini Program menu. The upper-left corner also contains a right arrow. Tap this area to jump to the About page of the Mini Program. The displayed icon and name can remind the user of the Mini Program associated with the current menu. This avoids misoperations.
image.png

Menu Item

Menu items are divided into two and only two rows. According to the business nature and needs, the Mini Program can add corresponding menu items in the first row or the second row. If there are more than five menu items in a single row, you can select the desired menu item by sliding left and right. We recommend that you place the menu items related to the interactivity of the Mini Program in the first row, for example, the Favorite Services. The business-related menu items are usually placed in the second row and are displayed on the left in priority to the default items.
image.png
We recommend that you differentiate between the icon styles of the two rows. Thus you can identify the desired action item quickly when there are many menu items.

Menu Container

The super app can customize the container color of the menu. We recommend that the color can have an obvious contrast to the color of the menu items. Thus the tappable scopes of the menu items and the Cancel button at the bottom can be clearly visible so as to improve your interactive experience. The color scheme can adopt the Light scheme or the Dark scheme, and the color of the menu items needs to be changed accordingly. image.png

Design Suggestions

As one of the basic general functions provided by the Mini Program platform, the Mini Program menu is with the fixed framework and interaction rules. For the custom design parts in the super app, suitable menu items can be added according to specific requirements.
image.png

Place Menu Items in Two Rows

The items in the Mini Program menu shall be aligned in two rows. The items in the first row shall be relevant to the interactions of the Mini Program, such as "Share" and "Favorite". The general operating options configured in the super app for the Mini Program are recommended to be put in the second row. Except for the existing options "Permission and Agreement Settings" and "About the Mini Program", the option "User Feedback" can be also put in the second row.

Differentiate Menu Items Visually

When designing the icons in the two rows, we recommend the developers adopting different styles so that the interaction operating options in the first row can be highlighted.