# setNavigationBar(Object object) Customize navigation bar left and right buttons **Notice**：Precautions: - After setting the left button, you need to actively monitor [onLeftNavigationBarClick](https://open.feishu.cn/document/uYjL24iN/uYjMy4iNyIjL2IjM/onleftnavigationbarclick) to handle the click event - After setting the right button, you need to actively monitor [onRightNavigationBarClick](https://open.feishu.cn/document/uYjL24iN/uYjMy4iNyIjL2IjM/onrightnavigationbarclick) to process the click event - PC only supports setting picture button - After the page jumps, Android resets the navigation bar button by default - The custom navigation bar is for page configuration. Since all pages of a single-page application share the same page container, setting it on one of the sub-pages will take effect on the entire application. If the developer needs to customize different buttons for each sub-page, it is necessary to call setNavigationBar on each sub-page to ensure that the pages do not affect each other ## Support Notes Applicability | Android | iOS | PC | Harmony | Preview effect ---|---|---|---|---|--- Gadget | **X** | **X** | **X** | **X** | / Web Application | V5.3.0+ | V5.3.0+ | V5.3.0+ | V7.41.0+ | Preview ## input Inherited from [standard object input](https://open.feishu.cn/document/uYjL24iN/ukzNy4SO3IjL5cjM), extended attribute description: name | type of data | Required | Defaults | describe ---|---|---|---|--- left | object | no |   | The setting on the left side of the navigation bar, only supports up to two button settings, that is, items.length <= 2  
∟
 
items | object[] | Yes |   | The item array is used to control the display on the left side of the navigation bar. If the array length is 0, android clears the corresponding orientation navigation bar settings, iOS keeps the system back button by default.   
∟
 
id | string | Yes |   | The flag of the item, when the item is clicked, it will trigger tt.onLeftNavigationBarClick({id:string} => {}) to listen   
∟
 
text | string | no |   | Controls the display text, an empty string means no text is displayed (this field is not supported on the PC side)
**Notice**：   
∟
 
imageBase64 | string | no |   | Controls whether to display the icon, the string length cannot exceed 10240,Supported character prefixes are data:image/png;base64, data:image/jpg;base64, data:image/x-icon;base64,

imageBase64 and text cannot be empty at the same time, at least one of them must be set right | object | no |   | The setting on the right side of the navigation bar, only supports up to two button settings, that is, items.length <= 2  
∟
 
items | object[] | Yes |   | The item array is used to control the display on the right side of the navigation bar. If the array length is 0, the corresponding orientation navigation bar setting will be cleared.   
∟
 
id | string | Yes |   | The flag of the item, when the item is clicked, it will trigger tt.onRightNavigationBarClick({id:string} => {}) to monitor   
∟
 
text | string | no |   | Controls the display text, an empty string means no text is displayed (this field is not supported on the PC side)
**Notice**：   
∟
 
imageBase64 | string | no |   | Controls whether to display the icon, the string length cannot exceed 10240,Supported character prefixes are data:image/png;base64, data:image/jpg;base64, data:image/x-icon;base64,

imageBase64 and text cannot be empty at the same time, at least one of them must be set autoResetNavigationBar | boolean | no |   | After the page jumps, whether to reset the navigation bar settings. Setting to false may affect the click events of the navigation bar on the jumped page
**Notice**： iosRightItemsFlipped | boolean | no |   | This parameter is used to fix the problem of inconsistent display order between iOS and Android when the number of buttons is greater than 1. The default value is **false**. When the number of buttons on the right is greater than 1, iOS displays the array in reverse order by default. After setting this parameter to **true**, the iOS button display order is consistent with the array order. There is no version restriction for using this parameter, and all versions are supported.

[Please use the latest version of jssdk](https://open.feishu.cn/document/uYjL24iN/uMTMuMTMuMTM/introduction) ## output Inherit [Standard Object Output](https://open.feishu.cn/document/uYjL24iN/ukzNy4SO3IjL5cjM#8c92acb8), no extended attributes ## sample code ````js tt.setNavigationBar({ left:{ items: [ // display image {Id: "left_one", text: "left_xxx", imageBase64: "iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA / wD / AP + gvaeTAAADn0lEQVRoge3ZS2hcVRzH8U / SakxSjSLUViWtqLFIqWgtYmPdRBGsiAsXLoSKBR9YofhYaFGsIijiwroSX9CFFFwoCuIDRFARg4IUS7W + KqKt + KzYqk3HcXGScOfcO3PvzL0zCdgvHMjJnPM7v3Pvef4vRznK / 5u + CnXOw + W4ECtwOhahhl / xC3bhQ7yPj1GvqP2OGcS9 + Fow007agy1Y0nPXCfrwgfbNJ9NBPIKRHnufZY0wTMp0oo4fMNFj77M8I4zz7diIdRjDsDDMThM6ugk7cEh2J2rYqqK5uQTj2ICH8AImhcl4XFR2GMe2oX0CbsF3sjvyNPo7Nb4K + 5sIz6SlnYpHDApPfCqjjeeUeBOrsS9DdCadW8Z1Bpfg + 4x27iojugxfZYjWsbaMcBPOxN6onSlc2qngycLEzOrA + pJmm3EGfo7a2qO9 + TXLE5oPoesrMNuMCRyJ2rtz + rc1eBz35YmcisORyCf4d / rvTVW7jngyavsAvkjkV + cJbIkEfhOG1A1Cx3KfQEkukL0y1fFRXuU + 6bPNA4nfJ3B / tX4RDn93CHtNqyX8pjyhlVGFGkajMsdU5TrBOcLaHw / dZPoDx + cJ3R5VeqcLZlsxim3CIS / uwFNFBHZElbZ2xWY + i / Ewfk94yZ28hAtHsgNXdslgUUZwD14rWiE + Qqzsjq / u8ZfGDiyeWzutyTqyHilQZt6wMON / U1F + qBdGmjAsBAhmOIjP8ip9qnEIXdYVa8VYH3l5MS6QNTx2R / lV1fsqzFiU3xkXyOrArig / l29gPMq / V6TSxRpf2z84sVpfhRjSuIkdkr6LZ9IvfScudbXrkI1yxn8rtkWV9 + vtajSIbyMPV7UjMCp9KnywWo8teSxq + 3Ms aFdku / RcKHSYKsk66UjfdZ0ILRPO30mhvbobjD0LP0ZtvqlEfOjmSKwubHSnFKzfTjRhuXQY54D0ZaptnpfuxDdCHKcV5 + PVgm2MSz / 5Gq7twG + KAbwRif + Ek5qUXyhc + g / j5RztITwq + wJ / W1njSQbwSkK82cV6hcYLUbPb3Ajulh3crenSvrNAiFJPSh9B + rFZOmy + QQjHjAmfnzbjdfydYXzm0n51N8wniTe05Xi7iaF20ls4u9vms1gr7BGdGt + tw3W + Sm7Vnuk / 8RKuUPJrTFWfWeFZ3JjI7xO + exHmxpfTaRLvCm9tXjGgcQXKDQHOR5YKT72Oi + bYS8eMC8vkork2UoZretXQf4MZqV9JCxyjAAAAAElFTkSuQmCC "}, // display text {id: "left_two", text: "left_xxx"} ] } , right:{ items: [ // display image {Id: "right_one", text: "right_xxx", imageBase64: "iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA / wD / AP + gvaeTAAADn0lEQVRoge3ZS2hcVRzH8U / SakxSjSLUViWtqLFIqWgtYmPdRBGsiAsXLoSKBR9YofhYaFGsIijiwroSX9CFFFwoCuIDRFARg4IUS7W + KqKt + KzYqk3HcXGScOfcO3PvzL0zCdgvHMjJnPM7v3Pvef4vRznK / 5u + CnXOw + W4ECtwOhahhl / xC3bhQ7yPj1GvqP2OGcS9 + Fow007agy1Y0nPXCfrwgfbNJ9NBPIKRHnufZY0wTMp0oo4fMNFj77M8I4zz7diIdRjDsDDMThM6ugk7cEh2J2rYqqK5uQTj2ICH8AImhcl4XFR2GMe2oX0CbsF3sjvyNPo7Nb4K + 5sIz6SlnYpHDApPfCqjjeeUeBOrsS9DdCadW8Z1Bpfg + 4x27iojugxfZYjWsbaMcBPOxN6onSlc2qngycLEzOrA + pJmm3EGfo7a2qO9 + TXLE5oPoesrMNuMCRyJ2rtz + rc1eBz35YmcisORyCf4d / rvTVW7jngyavsAvkjkV + cJbIkEfhOG1A1Cx3KfQEkukL0y1fFRXuU + 6bPNA4nfJ3B / tX4RDn93CHtNqyX8pjyhlVGFGkajMsdU5TrBOcLaHw / dZPoDx + cJ3R5VeqcLZlsxim3CIS / uwFNFBHZElbZ2xWY + i / Ewfk94yZ28hAtHsgNXdslgUUZwD14rWiE + Qqzsjq / u8ZfGDiyeWzutyTqyHilQZt6wMON / U1F + qBdGmjAsBAhmOIjP8ip9qnEIXdYVa8VYH3l5MS6QNTx2R / lV1fsqzFiU3xkXyOrArig / l29gPMq / V6TSxRpf2z84sVpfhRjSuIkdkr6LZ9IvfScudbXrkI1yxn8rtkWV9 + vtajSIbyMPV7UjMCp9KnywWo8teSxq + 3 MsaFdku / RcKHSYKsk66UjfdZ0ILRPO30mhvbobjD0LP0ZtvqlEfOjmSKwubHSnFKzfTjRhuXQY54D0ZaptnpfuxDdCHKcV5 + PVgm2MSz / 5Gq7twG + KAbwRif + Ek5qUXyhc + g / j5RztITwq + wJ / W1njSQbwSkK82cV6hcYLUbPb3Ajulh3crenSvrNAiFJPSh9B + rFZOmy + QQjHjAmfnzbjdfydYXzm0n51N8wniTe05Xi7iaF20ls4u9vms1gr7BGdGt + tw3W + Sm7Vnuk / 8RKuUPJrTFWfWeFZ3JjI7xO + exHmxpfTaRLvCm9tXjGgcQXKDQHOR5YKT72Oi + bYS8eMC8vkork2UoZretXQf4MZqV9JCxyjAAAAAElFTkSuQmCC "}, // display text {id: "right_two", text: "right_xxx"} ], }, // Whether to reset the navigation bar settings after the page jumps autoResetNavigationBar: true // When the number of buttons on the right is greater than 1, whether to reverse the order on the iOS side iosRightItemsFlipped: true, success(res) { console.log("success"); }, fail(err) { console.log(`${JSON.stringify(err)}`); } }); tt.onLeftNavigationBarClick(ev => { alert(`You clicked the button with the id ${ev.id} in the upper left corner`) }) tt.onRightNavigationBarClick(ev =>{ alert(`You clicked the button with id ${ev.id} in the upper right corner`) }) ```` Example of `success` return object: ````js { "errMsg": "setNavigationBar:ok" } ````