• 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 properties 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
10NavRouter is a special child component used together with Navigation. By default, NavRouter provides click response processing. Developers do not need to customize click event logic. 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 a developer 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** Layout of a single page
31
32  ![en-us_image_0000001511740532](figures/en-us_image_0000001511740532.png)
33
34  Set mode to NavigationMode.Stack so that the Navigation component can be 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 layout
49
50  ![en-us_image_0000001562820845](figures/en-us_image_0000001562820845.png)
51
52  Set mode to NavigationMode.Split. 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 property to set the title bar mode.
120
121- Mini mode
122  Common title bar, which is used 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  Emphasis title bar, which is used 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 Menu Bar
154
155The menu bar is in the upper right corner of the Navigation component. Developers can set the menu bar through the menus property. The menus supports two parameter types: Array&lt;[NavigationMenuItem](../reference/arkui-ts/ts-basic-components-navigation.md#navigationmenuitem %E7%B1%BB %E5%9E %8B %E8%AF %B4%E6%98%8E)&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
162Navigation() {
163  ...
164}
165.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
166        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
167        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])
168```
169
170**Figure 6** Menu bar with four icons
171
172![menu-bar](figures/menu-bar.jpg)
173
174```ts
175Navigation() {
176  ...
177}
178.menus([{value: "", icon: "./image/ic_public_search.svg", action: ()=>{}},
179        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
180        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}},
181        {value: "", icon: "./image/ic_public_add.svg", action: ()=>{}}])
182```
183
184
185## Setting the Toolbar
186
187The toolbar is located at the bottom of the Navigation component. Developers can set the toolbar by setting the toolbar properties.
188
189
190  **Figure 7** Toolbar
191
192![free3](figures/free3.jpg)
193
194```ts
195Navigation() {
196  ...
197}
198.toolBar({items:[
199        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
200        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}},
201        {value: "func", icon: "./image/ic_public_highlights.svg", action: ()=>{}}]})
202```
203