UI APIs

setNavigationBar

Customize the navigation bar appearance with title, colors, and images.

Overview

my.setNavigationBar allows you to customize the navigation bar (top bar) of your Mini Program by setting the title, background color, border color, or displaying a custom image. This API provides dynamic control over your Mini Program's header appearance.

Sample Code

my.setNavigationBar({
  title: 'hello',
  backgroundColor: '#108ee9',
  success() {
    my.alert({
      content: 'Success',
    });
  },
  fail() {
    my.alert({
      content: 'Failed',
    });
  },
});

Parameters

Property	Type	Required	Description
`title`	`String`	No	Navigation bar title.
`image`	`String`	No	Picture link address, must be https. Use 3x high-definition pictures. If the image is set, the title parameter is inactive. Currently, SVG images are not supported.
`backgroundColor`	`String`	No	Navigation bar background color, supporting hex color value.
`borderBottomColor`	`String`	No	Navigation bar bottom border color, supporting hex color value. If the `backgroundColor` is set, the `borderBottomColor` does not take effect. The `backgroundColor` is used by default.
`reset`	`Boolean`	No	Whether the navigation bar is reset to the default color, false by default.
`success`	`Function`	No	Callback function upon call success.
`fail`	`Function`	No	Callback function upon call failure.
`complete`	`Function`	No	Callback function upon call completion (to be executed upon either call success or failure).

Usage Notes

Image vs Title: When image is set, the title parameter becomes inactive. Choose one or the other.
Image Requirements: Images must be served over HTTPS and should be 3x high-definition for optimal display. SVG format is not supported.
Color Format: Use hex color values for backgroundColor and borderBottomColor (e.g., '#108ee9', '#FFFFFF').
Border Color Priority: If backgroundColor is set, borderBottomColor will not take effect and the background color will be used for the border.
Reset Option: Set reset: true to restore the navigation bar to its default appearance.

Examples

Set Title and Background Color

my.setNavigationBar({
  title: 'Payment Confirmation',
  backgroundColor: '#108ee9'
});

Use Custom Image

my.setNavigationBar({
  image: 'https://example.com/images/header-3x.png',
  backgroundColor: '#FFFFFF'
});

Reset to Default

my.setNavigationBar({
  reset: true
});

navigateBackMiniProgram

Return to the previous Mini Program after being opened by another Mini Program.

multiLevelSelect

Cascade selection picker for hierarchical data like provinces, cities, and districts.