Overview

The navigation bar of mini program is located under the status bar at the top of the screen, which and will not be hidden due to page scrolling. Its main function is to switch between pages in the mini program, informing users of the current location and giving them guidance.

Type

Level 1 navigation bar

Level 1 navigation title is displayed on the left,which doesn’t include the return operation.
Display the name of the current mini program or the name of the current page or function, and inform users of the location

Level 2 Navigation Bar

The left is for the return operation, and the page title is centered.
Note: The left functional area can be expanded like adding an icon of returning to homepage.

Usage

Click the “More” button to pop up extended function menu of the mini program;
Click the “Close” button to directly exit the current mini program;
Click the “Back” button to return to the previous page.

Title text

The title font of level 1 navigation is 17pt，The title is displayed on the left, and it is recommended that there be no more than 14 Chinese characters;
The title font of level 2 navigation is 17pt ，It is used in combination with the return operation.

Detailed description

The navigation bar is fitted withlight-colored background with #1f1f1f text and icons by default;
The version with light-colored background: It is fitted with text and icon with dark background by default;
The dark version: It is fitted with the text and icon with the background #333333 and white #ffffff by default .

Visual effectof button click

Light-colored background－visual click effect: dark color #1f1f1f 9% (consistent withclick and press effect of botton );
Dark background－visualclick effect: white 9%.
Visual effect of button click