• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Navigation
2
3Generally, 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. It is applicable to page redirection within a module and useful in one-time development for multi-device deployment. Draw on this component's routing capability to create a smooth page transition experience, and explore its various title bar styles to present titles seamlessly linked with the content. In one-time development for multi-device deployment scenarios, the **\<Navigation>** component can automatically adapt to the window size; when the window is large enough, it automatically displays content in columns.
4
5
6The 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 [\<NavRouter>](../reference/arkui-ts/ts-basic-components-navrouter.md) as a child component in the content area to implement a navigation bar. The content page displays the content of the [\<NavDestination>](../reference/arkui-ts/ts-basic-components-navdestination.md) child component.
7
8As a special child component of **\<Navigation>**, **\<NavRouter>** provides default processing logic for responding to clicks, eliminating the need for manual logic definition. It has only two root nodes, the second of which is **\<NavDestination>**. As a special child component of **\<NavRouter>**, **\<NavDestination>** makes up the content page of the **\<Navigation>** component. When the user clicks the **\<NavRouter>** component, the corresponding **\<NavDestination>** content area is displayed.
9
10
11## Setting the Page Display Mode
12
13The **\<Navigation>** component uses the **mode** attribute to set the page display mode.
14
15- Adaptive Mode
16
17  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.
18
19
20  ```
21  Navigation() {
22    ...
23  }
24  .mode(NavigationMode.Auto)
25  ```
26
27- Single-page mode
28
29    **Figure 1** Single-page mode
30
31  ![en-us_image_0000001511740532](figures/en-us_image_0000001511740532.png)
32
33  Set **mode** to **NavigationMode.Stack** so that the **\<Navigation>** component is displayed on a single page.
34
35
36  ```ts
37  Navigation() {
38    ...
39  }
40  .mode(NavigationMode.Stack)
41  ```
42
43  ![single-page-1](figures/single-page-1.jpg)
44
45- Column mode
46
47  **Figure 2** Column mode
48
49  ![en-us_image_0000001562820845](figures/en-us_image_0000001562820845.png)
50
51  Set **mode** to **NavigationMode.Split** so that the **\<Navigation>** component is displayed in columns.
52
53
54  ```ts
55  @Entry
56  @Component
57  struct NavigationExample {
58    @State TooTmp:Record<string,string|Function> = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
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:string) => {
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:string):string => 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          this.TooTmp,
103          this.TooTmp,
104          this.TooTmp
105        ]})
106      }
107      .height('100%')
108      .width('100%')
109      .backgroundColor('#F1F3F5')
110    }
111  }
112  ```
113
114  ![column](figures/column.jpg)
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  Applicable when the title of a level-1 page does not need to be highlighted.
123
124  **Figure 3** Title bar in Mini mode
125
126  ![mini](figures/mini.jpg)
127
128
129  ```ts
130  Navigation() {
131    ...
132  }
133  .titleMode(NavigationTitleMode.Mini)
134  ```
135
136
137- Full mode
138  Applicable when the title of a level-1 page needs to be highlighted.
139
140    **Figure 4** Title bar in Full mode
141
142  ![free1](figures/free1.jpg)
143
144
145  ```ts
146  Navigation() {
147    ...
148  }
149  .titleMode(NavigationTitleMode.Full)
150  ```
151
152
153## Setting the Menu Bar
154
155The 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&lt;[NavigationMenuItem](../reference/arkui-ts/ts-basic-components-navigation.md#navigationmenuitem)&gt; 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.
156
157**Figure 5** Menu bar with three icons
158
159![menu-bar-2](figures/menu-bar-2.jpg)
160
161```ts
162let TooTmp:Record<string,string|Function> = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
163Navigation() {
164  ...
165}
166.menus([TooTmp,
167  TooTmp,
168  TooTmp])
169```
170
171**Figure 6** Menu bar with four icons
172
173![menu-bar](figures/menu-bar.jpg)
174
175```ts
176let TooTmp:Record<string,string|Function> = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
177Navigation() {
178  ...
179}
180.menus([TooTmp,
181  TooTmp,
182  TooTmp,
183  TooTmp])
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![free3](figures/free3.jpg)
195
196```ts
197let TooTmp:Record<string,string|Function> = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
198let TooBar:Record<string,object[]> = {'items':[TooTmp,TooTmp,TooTmp]}
199Navigation() {
200  ...
201}
202.toolBar(TooBar)
203```
204