All Products
Search
Document Center

SuperApp:Navigation bar

Last Updated:Jul 10, 2026

This document describes the JSAPIs for the miniapp navigation bar that let you customize its appearance.

WVNavigationBar.update

Dynamically sets the navigation bar for the current page.

Input parameters:

  • [string] title: Optional. Specifies the page title.

  • [string] titleColor: Optional. The color of the page title in RGB format.

  • [string] barStyle: Optional. The style of the navigation bar. Valid values are 'float', where the navigation bar floats over the page content, and 'normal', where the page content starts below the navigation bar.

  • [string] backgroundColor: Optional. The background color of the navigation bar, specified as an RGB value.

  • [boolean] isShowBackBtn: Optional. Specifies whether to show the back button. The button is shown by default. Set to false to hide the button.

  • [string] theme: Optional. The theme for the buttons on the right side of the navigation bar. Valid values are 'light' and 'dark'. Defaults to 'dark'.

  • [boolean] isShowCloseBtn: Optional. Specifies whether to show the close button. The button is shown by default. Set to false to hide the button.

  • [boolean] isShowMoreBtn: Optional. Specifies whether to show the more button. The button is shown by default. Set to false to hide the button.

  • [float] titleSize: Optional. Specifies the font size of the page title.

  • [string] titleStyle: Optional. The font style of the page title. Supported values are 'normal', 'bold', and 'italic'.

  • [string] capsuleBgColor: Optional. The background color of the capsule button.

  • [string] capsuleBorderColor: Optional. The border color of the capsule button.

Callback parameters:

No parameters are passed to the callback functions. The success callback is invoked when the operation succeeds, and the failure callback is invoked when it fails.

var params = {
  title: 'Home',
  titleColor: '#FF00FF',
  barStyle: 'float',
  backgroundColor: '#00FFFF',
  isShowBackBtn: false,
  isShowMoreBtn: false,
  isShowCloseBtn: false,
  titleSize:16,
  titleStyle:"bold",
  capsuleBgColor:"#00FFFF",
  capsuleBorderColor:"#00FFFF"
  
};

window.WindVane.call('WVNavigationBar', 'update', params, function(e) {
}, function(e) {
  alert('failure: ' + JSON.stringify(e));
});

WVNavigationBar.getHeight

Retrieves the height of the miniapp navigation bar.

Input parameters:

None.

Callback parameters:

  • [int] height: The current height of the navigation bar.

  • [int] screenWidth: The current width of the screen.

  • [int] screenHeight: The current height of the screen.

window.WindVane.call('WVNavigationBar', 'getHeight', {}, function(e) {
        alert('success:' + JSON.stringify(e));
}, function(e) {
        alert('failure:' + JSON.stringify(e));
});