Alipay International Mini Program Development PlatformAlipay International Mini Program Development PlatformDOCS

Navigation Bar

image.png

Usage

The navigation bar includes page title and control components of a Mini Program such as "menu" and "close". It shall be always fixed at the top of the page without scrolling or hiding along with the page. The page navigation components will appear on secondary pages.

image

Anatomy

The structure of basic style: The page navigation components shall be at the leftmost, the page title in the middle, and the control components of the Mini Programs at the rightmost.
image.png

1.Navigation Bar Container

Navigation bar container carries all the contents of the navigation bar. The default container color is white. The developers can also customize the settings to other colors or transparency. See UI Specs of Mini Program Components for detailed rules.
image.png

2.Page Navigation Components

Page navigation components only appear on the secondary page of the Mini Programs. On the page with further levels, the "Return to Home" button can also be provided for the users to directly return to the homepage of the Mini Programs.


image.png
The iOS and Android users can return to the upper-level page through the gesture interaction of "Swipe to the right from the left side of the interface". The physical Return key is also provided on some Android models for page return operations. However, to make the operation easier, the developers shall provide a visible Return button for the users who are unfamiliar with the gesture interactions in the mobile operating system.

3.Page Title (optional)

The page title is generally used to display:

  • The name of the page currently visited by the users
  • The name of the function module currently used by the users
  • The name of the Mini Program


For the default style, the title shall be displayed in the middle of the page. When other functional components are added as navigation bar extensions, the display location of the title can be adjusted, or the title can be hidden.
image.png
1.Use simple phrases as the page titles.


image.png
1.The page title shall not be displayed in broken lines or truncated.
2.An incomplete display of the title may cause the users to misunderstand the page.


image.png
1.If the height of the system status bar is not adapted, the custom layout of the top navigation bar will be misaligned.
2.If the developers customize buttons of the navigation bar without considering the "Return" icon displaying on the secondary page, the accessibility issues such as overlapped buttons will occur.


4.Control Components of Mini Programs
The Mini Program menu and the close button are the essential components of Mini Programs. With these components, the users can open the Mini Program menu and close the Mini Programs on any page. When the users tap the icon of the Mini Program menu, a menu panel will appear at the bottom of the screen. When the users tap the "close" icon, the navigation bar together with the Mini Program page will exit to the bottom of the screen, and the Mini Program will be closed. image

Design Suggestions

Each page with a navigation bar

According to the "Exit-As-You-Go" concept, there is always a navigation bar at the top of each page for Mini Programs. Therefore, the users can directly close the Mini Programs and open the Mini Program menu on any page. The users can also switch among pages through the page navigation components on the left side of the navigation bar on the secondary page.

Consistent elements for the navigation bar

The locations of the same elements and contents on the navigation bar for different pages shall be consistent for the Mini Program users to develop their using habits and perceptions.

Suitable function extensions

According to the specific product features, functional components such as Search Bar, Tabs, Location menu etc can be added to the navigation bar for better user experience.