Skip to main content
Use this API to customize the navigation bar appearance including title, background color, and border.

​
Parameters

PropertyTypeRequiredDescription
titleStringNoText displayed in the navigation bar
imageStringNoImage URL (HTTPS only); replaces title when set
backgroundColorStringNoBackground color in hex format (e.g., #ffffff)
borderBottomColorStringNoBottom border color in hex format
successFunctionNoCallback on success
failFunctionNoCallback on failure
completeFunctionNoCallback that always executes

​
Code Example

​
Set Title and Background Color

my.setNavigationBar({
  title: 'My Page',
  backgroundColor: '#108ee9',
  success() {
    console.log('Navigation bar updated');
  },
  fail() {
    console.log('Failed to update navigation bar');
  }
});

​
Set Title with Border

my.setNavigationBar({
  title: 'Settings',
  backgroundColor: '#ffffff',
  borderBottomColor: '#eeeeee'
});

​
Use Image Instead of Title

my.setNavigationBar({
  image: 'https://example.com/logo@3x.png',
  backgroundColor: '#ffffff'
});

​
Notes

  • When image is provided, the title parameter is ignored
  • Images must use HTTPS URLs
  • Use 3x resolution images for best display quality
  • SVG format is not supported for images
  • backgroundColor takes precedence over borderBottomColor

​
Use Cases

Page({
  onLoad(query) {
    // Set title based on page data
    my.setNavigationBar({
      title: query.name || 'Details'
    });
  }
});

Page({
  setTheme(isDark) {
    my.setNavigationBar({
      title: 'Settings',
      backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
      borderBottomColor: isDark ? '#333333' : '#eeeeee'
    });
  }
});

my.showNavigationBarLoading

Show loading indicator

my.hideBackHome

Hide back to home button