• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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  ![en-us_image_0000001511740532](figures/en-us_image_0000001511740532.png)
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  ![single-page-1](figures/single-page-1.jpg)
45
46- Column mode
47
48  **Figure 2** Column mode
49
50  ![en-us_image_0000001562820845](figures/en-us_image_0000001562820845.png)
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  ![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
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  ![mini](figures/mini.jpg)
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  ![free1](figures/free1.jpg)
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&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.
158
159**Figure 5** Menu bar with three icons
160
161![menu-bar-2](figures/menu-bar-2.jpg)
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![menu-bar](figures/menu-bar.jpg)
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![free3](figures/free3.jpg)
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