1# Navigation 2 3 4Generally, the [\<Navigation>](../reference/arkui-ts/ts-basic-components-navigation.md) component functions as the root container of a page and supports three display modes: single-page, column, and adaptive. In addition, **\<Navigation>** provides attributes to set the title bar, toolbar, and navigation bar of a page. 5 6 7The pages of the Navigation component include the home page and content page. The home page consists of the title bar, content area, and toolbar. You can use the [\<NavRouter>](../reference/arkui-ts/ts-basic-components-navrouter.md) child component in the content area to implement the navigation bar function. The content page displays the content of the [\<NavDestination>](../reference/arkui-ts/ts-basic-components-navdestination.md) child component. 8 9 10**\<NavRouter>** is a special child component used together with **\<Navigation>**. It provides default processing logic for responding to clicks, eliminating the need for manual logic definition. **\<NavRouter>** has only two root nodes. The second root node is **\<NavDestination>**. **\<NavDestination>** is a special child component used together with **\<NavRouter>** to display the content page of the **\<Navigation>** component. When the user clicks the **\<NavRouter>** component, the corresponding **\<NavDestination>** content area is displayed. 11 12 13## Setting the Page Display Mode 14 15The **\<Navigation>** component uses the **mode** attribute to set the page display mode. 16 17- Adaptive Mode 18 By default, the **\<Navigation>** component is in adaptive mode. In this case, the **mode** attribute is **NavigationMode.Auto**. In adaptive mode, when the device width is greater than 520 vp, the **\<Navigation>** component uses the column mode. Otherwise, the **\<Navigation>** component uses the single-page mode. 19 20 21 ``` 22 Navigation() { 23 ... 24 } 25 .mode(NavigationMode.Auto) 26 ``` 27 28- Single-page mode 29 30 **Figure 1** Single-page mode 31 32  33 34 Set **mode** to **NavigationMode.Stack** so that the **\<Navigation>** component is displayed on a single page. 35 36 37 ```ts 38 Navigation() { 39 ... 40 } 41 .mode(NavigationMode.Stack) 42 ``` 43 44  45 46- Column mode 47 48 **Figure 2** Column mode 49 50  51 52 Set **mode** to **NavigationMode.Split** so that the **\<Navigation>** component is displayed in columns. 53 54 55 ```ts 56 @Entry 57 @Component 58 struct NavigationExample { 59 private arr: number[] = [1, 2, 3]; 60 61 build() { 62 Column() { 63 Navigation() { 64 TextInput({ placeholder: 'search...' }) 65 .width("90%") 66 .height(40) 67 .backgroundColor('#FFFFFF') 68 69 List({ space: 12 }) { 70 ForEach(this.arr, (item) => { 71 ListItem() { 72 NavRouter() { 73 Text("NavRouter" + item) 74 .width("100%") 75 .height(72) 76 .backgroundColor('#FFFFFF') 77 .borderRadius(24) 78 .fontSize(16) 79 .fontWeight(500) 80 .textAlign(TextAlign.Center) 81 NavDestination() { 82 Text("NavDestinationContent" + item) 83 } 84 .title("NavDestinationTitle" + item) 85 } 86 } 87 }, item => item) 88 } 89 .width("90%") 90 .margin({ top: 12 }) 91 } 92 .title ("Main Title") 93 .mode(NavigationMode.Split) 94 .menus([ 95 {value: "", icon: "./image/ic_public_search.svg", action: ()=> {}}, 96 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 97 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 98 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}, 99 {value: "", icon: "./image/ic_public_add.svg", action: ()=> {}} 100 ]) 101 .toolBar({items: [ 102 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}, 103 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}, 104 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}} 105 ]}) 106 } 107 .height('100%') 108 .width('100%') 109 .backgroundColor('#F1F3F5') 110 } 111 } 112 ``` 113 114  115 116 117## Setting the Title Bar Mode 118 119The title bar is on the top of the page and is used to display the page name and operation entry. The **\<Navigation>** component uses the **titleMode** attribute to set the title bar mode. 120 121- Mini mode 122 123Applicable when the title of a level-1 page does not need to be highlighted. 124 125**Figure 3** Title bar in Mini mode 126 127  128 129 130 ```ts 131 Navigation() { 132 ... 133 } 134 .titleMode(NavigationTitleMode.Mini) 135 ``` 136 137 138- Full mode 139 140Applicable when the title of a level-1 page needs to be highlighted. 141 142 **Figure 4** Title bar in Full mode 143 144  145 146 147 ```ts 148 Navigation() { 149 ... 150 } 151 .titleMode(NavigationTitleMode.Full) 152 ``` 153 154 155## Setting the Menu Bar 156 157The menu bar is in the upper right corner of the **\<Navigation>** component. You can set the menu bar through the **menus** attribute, which supports two parameter types: Array<[NavigationMenuItem](../reference/arkui-ts/ts-basic-components-navigation.md#navigationmenuitem)> and CustomBuilder. When the Array\<NavigationMenuItem> type is used, a maximum of three icons can be displayed in portrait mode and a maximum of five icons can be displayed in landscape mode. Extra icons will be placed in the automatically generated More icons. 158 159**Figure 5** Menu bar with three icons 160 161 162 163```ts 164Navigation() { 165 ... 166} 167.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}}, 168 {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}, 169 {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}]) 170``` 171 172**Figure 6** Menu bar with four icons 173 174 175 176```ts 177Navigation() { 178 ... 179} 180.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}}, 181 {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}, 182 {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}, 183 {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}]) 184``` 185 186 187## Setting the Toolbar 188 189The toolbar is located at the bottom of the **\<Navigation>** component. You can set the toolbar through the **toolBar** attribute. 190 191 192 **Figure 7** Toolbar 193 194 195 196```ts 197Navigation() { 198 ... 199} 200.toolBar({items:[ 201 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}, 202 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}, 203 {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]}) 204``` 205