1# NavDestination
2
3**NavDestination** is the root container of a destination page and represents the content area of the [Navigation](ts-basic-components-navigation.md) component.
4
5> **NOTE**
6>
7> - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> - Since API version 11, this component supports the safe area attribute by default, with the default attribute value being **expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])**. You can override this attribute to change the default behavior. In earlier versions, you need to use the [expandSafeArea](ts-universal-attributes-expand-safe-area.md) attribute to implement the safe area feature.
10>
11> - The **NavDestination** component must be used in conjunction with the **Navigation** component to act as the root node for the navigation destination page. When used alone, it can only function as a standard container component and does not possess any routing-related attributes or capabilities.
12>
13> - If the lifecycle of a page in the middle of the navigation stack changes, the lifecycle of the destination page at the top of the stack before the transition (**onWillShow**, **onShown**, **onHidden**, **onWillDisappear**) and the lifecycle of the destination page after the transition (**onWillShow**, **onShown**, **onHidden**, **onWillDisappear**) are both triggered at the end.
14>
15> - If no main title or subtitle is set for **NavDestination** and there is no back button, the title bar is not displayed.
16
17## Child Components
18
19Built-in components and custom components are allowed, with support for ([if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
20
21Number of child components: multiple.
22
23
24## APIs
25
26NavDestination()
27
28**Atomic service API**: This API can be used in atomic services since API version 11.
29
30**System capability**: SystemCapability.ArkUI.ArkUI.Full
31
32## Attributes
33
34The [universal attributes](ts-universal-attributes-size.md) are supported.
35
36Avoid setting layout-related attributes such as the position and size. They may result in display issues on the page.
37
38### title
39
40title(value: string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle | Resource, options?: NavigationTitleOptions)
41
42Sets the page title. When the NavigationCustomTitle type is used to set the height, the [titleMode](ts-basic-components-navigation.md#titlemode) attribute does not take effect. When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).
43
44**Atomic service API**: This API can be used in atomic services since API version 11.
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Parameters**
49
50| Name| Type                                                        | Mandatory| Description      |
51| ------ | ------------------------------------------------------------ | ---- | ---------- |
52| value  | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavDestinationCommonTitle](#navdestinationcommontitle) \| [NavDestinationCustomTitle](#navdestinationcustomtitle) \| [Resource](ts-types.md#resource)  | Yes  | Page title.|
53| options<sup>12+</sup> | [NavigationTitleOptions](ts-basic-components-navigation.md#navigationtitleoptions11) | No  | Title bar options.|
54
55### hideTitleBar
56
57hideTitleBar(value: boolean)
58
59Specifies whether to hide the title bar.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters**
66
67| Name| Type   | Mandatory| Description                                                        |
68| ------ | ------- | ---- | ------------------------------------------------------------ |
69| value  | boolean | Yes  | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
70
71### hideTitleBar<sup>13+</sup>
72
73hideTitleBar(hide: boolean, animated: boolean)
74
75Sets whether to hide the title bar and whether to animate the visibility change.
76
77**Atomic service API**: This API can be used in atomic services since API version 13.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Full
80
81**Parameters**
82
83| Name| Type   | Mandatory| Description                                                        |
84| ------ | ------- | ---- | ------------------------------------------------------------ |
85| hide  | boolean | Yes  | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Show the title bar.|
86| animated  | boolean | Yes  | Whether to animate the visibility change.<br>Default value: **false**<br>**true**: Animate the visibility change.<br>**false**: Do not animate the visibility change.|
87
88### toolbarConfiguration<sup>13+</sup>
89
90toolbarConfiguration(toolbarParam: Array&lt;ToolbarItem&gt; | CustomBuilder, options?: NavigationToolbarOptions)
91
92Sets the content of the toolbar. If this API is not called, the toolbar remains hidden.
93
94**Atomic service API**: This API can be used in atomic services since API version 13.
95
96**System capability**: SystemCapability.ArkUI.ArkUI.Full
97
98**Parameters**
99
100| Name      | Type                                                        | Mandatory| Description                                                        |
101| ------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
102| toolbarParam |  Array&lt;[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)&gt;  \| [CustomBuilder](ts-types.md#custombuilder8) | Yes  | Content of the toolbar.<br>When configured with Array&lt;[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)&gt;, the toolbar follows the rules below:<br>- Toolbar items are evenly distributed on the bottom toolbar, with text and icons evenly spaced in each content area.<br>- If any item contains overlong text and there are fewer than five items, the toolbar will: 1. Increase the item width to accommodate the text until the toolbar spans the screen width; 2. Reduce the text size progressively; 3. Wrap the text over two lines; 4. Clip the text with an ellipsis (...).<br>- In portrait mode, the toolbar shows a maximum of five icons, with any additional icons placed under an automatically generated **More** icon. In landscape mode, the behavior of the toolbar is determined by the display mode: (1) If the display mode is [Split](ts-basic-components-navigation.md#navigationmode9), the toolbar follows the same rules as in portrait mode. (2) If the display mode is [Stack](ts-basic-components-navigation.md#navigationmode9), the toolbar must be used together with Array&lt;[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)&gt; of the **menus** attribute; in this configuration, the bottom toolbar is automatically hidden, and all items on the toolbar are relocated to the menu in the upper right corner of the screen.<br>When configured with [CustomBuilder](ts-types.md#custombuilder8), the toolbar does not follow the above rules, except for evenly distributing items at the bottom of the toolbar.|
103| options      | [NavigationToolbarOptions](ts-basic-components-navigation.md#navigationtoolbaroptions11) | No  | Toolbar options.                                                |
104
105> **NOTE**
106>
107> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute.
108
109### hideToolBar<sup>13+</sup>
110
111hideToolBar(hide: boolean, animated?: boolean)
112
113Sets whether to hide the toolbar and whether to animate the visibility change.
114
115**Atomic service API**: This API can be used in atomic services since API version 13.
116
117**System capability**: SystemCapability.ArkUI.ArkUI.Full
118
119**Parameters**
120
121| Name| Type   | Mandatory| Description                                                        |
122| ------ | ------- | ---- | ------------------------------------------------------------ |
123| hide  | boolean | Yes  | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.|
124| animated  | boolean | No  | Whether to animate the visibility change.<br>Default value: **false**<br>**true**: Animate the visibility change.<br>**false**: Do not animate the visibility change.|
125
126### mode <sup>11+</sup>
127
128mode(value: NavDestinationMode)
129
130Sets the mode of the **NavDestination** component. Dynamic modification is not supported.
131
132**Atomic service API**: This API can be used in atomic services since API version 12.
133
134**System capability**: SystemCapability.ArkUI.ArkUI.Full
135
136**Parameters**
137
138| Name| Type                                                | Mandatory| Description                                                        |
139| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
140| value  | [NavDestinationMode](#navdestinationmode11) | Yes  | Mode of the **NavDestination** component.<br>Default value: **NavDestinationMode.STANDARD**|
141
142### backButtonIcon<sup>11+</sup>
143
144backButtonIcon(value: ResourceStr | PixelMap | SymbolGlyphModifier)
145
146> **NOTE**
147>
148> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute.
149
150
151Sets the icon of the back button on the title bar.
152
153**Atomic service API**: This API can be used in atomic services since API version 12.
154
155**System capability**: SystemCapability.ArkUI.ArkUI.Full
156
157**Parameters**
158
159| Name| Type                                                        | Mandatory| Description              |
160| ------ | ------------------------------------------------------------ | ---- | ------------------ |
161| value  | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) \| [SymbolGlyphModifier<sup>12+</sup>](ts-universal-attributes-attribute-modifier.md)  | Yes  | Icon of the back button on the title bar.|
162
163### menus<sup>12+</sup>
164
165menus(value: Array&lt;NavigationMenuItem&gt; | CustomBuilder)
166
167> **NOTE**
168>
169> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute.
170
171
172Sets the menu items in the upper right corner of the page. If this attribute is not set, no menu item is displayed. When the value type is Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)&gt;, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, with excess icons (if any) placed under the automatically generated **More** icon.
173
174**Atomic service API**: This API can be used in atomic services since API version 12.
175
176**System capability**: SystemCapability.ArkUI.ArkUI.Full
177
178**Parameters**
179
180| Name| Type                                                        | Mandatory| Description              |
181| ------ | ------------------------------------------------------------ | ---- | ------------------ |
182| value  | Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8) | Yes  | Menu items in the upper right corner of the page.|
183
184### ignoreLayoutSafeArea<sup>12+</sup>
185
186ignoreLayoutSafeArea(types?: Array&lt;LayoutSafeAreaType&gt;, edges?: Array&lt;LayoutSafeAreaEdge&gt;)
187
188Ignores the layout safe area by allowing the component to extend into the non-safe areas of the screen.
189
190**Atomic service API**: This API can be used in atomic services since API version 12.
191
192**System capability**: SystemCapability.ArkUI.ArkUI.Full
193
194**Parameters**
195
196| Name| Type                                              | Mandatory| Description                                                        |
197| ------ | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
198| types  | Array <[LayoutSafeAreaType](ts-types.md#layoutsafeareatype12)> | No  | Types of non-safe areas to extend into.<br>Default value:<br>[LayoutSafeAreaType.SYSTEM] |
199| edges  | Array <[LayoutSafeAreaEdge](ts-types.md#layoutsafeareaedge12)> | No  | Edges for expanding the safe area.<br> Default value:<br>[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]|
200
201>  **NOTE**
202>
203>  After **LayoutSafeArea** is set:
204>  When **LayoutSafeAreaType.SYSTEM** is set, the component can extend into the non-safe area if its boundaries overlap with it. For example, if the device's status bar is 100 high, the component must have an absolute vertical offset between 0 and 100 to extend into the non-safe area.
205>
206>  If the component extends into the non-safe area, events triggered within that area (such as click events) might be intercepted by the system. This allows the system to prioritize responses to system components such as the status bar.
207
208### systemBarStyle<sup>12+</sup>
209
210systemBarStyle(style: Optional&lt;SystemBarStyle&gt;)
211
212Sets the style of the system status bar when this **NavDestination** page is displayed in the **Navigation** component.
213
214**Atomic service API**: This API can be used in atomic services since API version 12.
215
216**System capability**: SystemCapability.ArkUI.ArkUI.Full
217
218**Parameters**
219
220| Name| Type        | Mandatory| Description              |
221| ------ | -------------- | ---- | ------------------ |
222| style  | Optional&lt;[SystemBarStyle](../js-apis-window.md#systembarstyle12)&gt; | Yes  | Style of the system status bar.|
223
224> **NOTE**
225>
226> 1. The setting takes effect only when the **NavDestination** component is used in conjunction with the **Navigation** component.
227> 2. For other usage restrictions, see the description of [systemBarStyle](ts-basic-components-navigation.md#systembarstyle12) for the **Navigation** component.
228
229### systemTransition<sup>14+</sup>
230systemTransition(type: NavigationSystemTransitionType)
231
232Sets the system transition animation of the **NavDestination** component. System transition animations for the title bar and content area can be configured separately.
233
234**Atomic service API**: This API can be used in atomic services since API version 14.
235
236**System capability**: SystemCapability.ArkUI.ArkUI.Full
237
238**Parameters**
239
240| Name| Type                                                | Mandatory| Description                                                        |
241| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
242| type  | [NavigationSystemTransitionType](#navigationsystemtransitiontype14) | Yes  | Type of the system transition animation.<br>Default value: **NavigationSystemTransitionType.DEFAULT**|
243
244### recoverable<sup>14+</sup>
245
246recoverable(recoverable: Optional&lt;boolean&gt;)
247
248Sets whether the **NavDestination** component is recoverable. If set to recoverable, when the application process exits unexpectedly and restarts, the **NavDestination** component will be automatically recreated. To use this feature, ensure that the **recoverable** attribute is set for the **Navigation** component associated with the **NavDestination** component.
249
250**Atomic service API**: This API can be used in atomic services since API version 14.
251
252**System capability**: SystemCapability.ArkUI.ArkUI.Full
253
254**Parameters**
255
256| Name| Type        | Mandatory| Description              |
257| ------ | -------------- | ---- | ------------------ |
258| recoverable  | Optional&lt;boolean&gt; | Yes  | Whether the **NavDestination** component is recoverable. By default, it is not recoverable.<br>Default value: **false**<br>**true**: The **NavDestination** component is recoverable.<br>**false**: The **NavDestination** component is not recoverable.|
259
260>  **NOTE**
261>
262> This API must be used together with the [recoverable](./ts-basic-components-navigation.md#recoverable14) API of **Navigation**.
263
264### bindToScrollable<sup>14+</sup>
265bindToScrollable(scrollers: Array&lt;Scroller&gt;)
266
267Binds the **NavDestination** component to a scrollable container, which can be [List](./ts-container-list.md), [Scroll](./ts-container-scroll.md), [Grid](./ts-container-grid.md), or [WaterFlow](./ts-container-waterflow.md). After the binding, scrolling in the scrollable container will trigger the animations for showing or hiding the title bar and toolbar of all bound **NavDestination** components. A single **NavDestination** component can be bound to multiple scrollable containers, and a single scrollable container can be bound to multiple **NavDestination** components. For details, see [Example 1](#example-1).
268
269> **NOTE**
270>
271> - The connection between the scrolling actions and the animations for showing or hiding the title bar and toolbar of the **NavDestination** component takes effect only when the title bar or toolbar is visible.
272> - If a **NavDestination** component is bound to multiple scrollable containers, scrolling in any of these containers triggers the display or hiding animations of the title bar and toolbar. Specifically, when any scrollable container reaches either the bottom or the top, the display animation for the title bar and toolbar is triggered without delay. As such, to ensure the optimal user experience, avoid triggering scroll events of multiple scrollable containers simultaneously.
273
274**Atomic service API**: This API can be used in atomic services since API version 14.
275
276**System capability**: SystemCapability.ArkUI.ArkUI.Full
277
278**Parameters**
279
280| Name| Type                                                | Mandatory| Description                                                        |
281| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
282| scrollers | Array<[Scroller](./ts-container-scroll.md#scroller)> | Yes  | Controller of the target scrollable container.|
283
284### bindToNestedScrollable<sup>14+</sup>
285bindToNestedScrollable(scrollers: Array&lt;NestedScrollInfo&gt;)
286
287Binds the **NavDestination** component to nested scrollable containers, which can be [List](./ts-container-list.md), [Scroll](./ts-container-scroll.md), [Grid](./ts-container-grid.md), or [WaterFlow](./ts-container-waterflow.md). After the binding, scrolling in any of these scrollable containers will trigger the animations for showing or hiding the title bar and toolbar of all bound **NavDestination** components. A single **NavDestination** component can be bound to multiple nested scrollable containers, and a single nested scrollable container can be bound to multiple **NavDestination** components. For details, see [Example 1](#example-1).
288
289> **NOTE**
290>
291> - The connection between the scrolling actions and the animations for showing or hiding the title bar and toolbar of the **NavDestination** component takes effect only when the title bar or toolbar is visible.
292> - If a **NavDestination** component is bound to multiple scrollable containers, scrolling in any of these containers triggers the display or hiding animations of the title bar and toolbar. Specifically, when any scrollable container reaches either the bottom or the top, the display animation for the title bar and toolbar is triggered without delay. As such, to ensure the optimal user experience, avoid triggering scroll events of multiple scrollable containers simultaneously.
293
294**Atomic service API**: This API can be used in atomic services since API version 14.
295
296**System capability**: SystemCapability.ArkUI.ArkUI.Full
297
298**Parameters**
299
300| Name| Type                                                | Mandatory| Description                                                        |
301| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
302| scrollInfos | Array<[NestedScrollInfo](#nestedscrollinfo14)> | Yes  | Controller of the target nested scrollable containers.|
303
304## NavDestinationMode<sup>11+</sup>
305
306**Atomic service API**: This API can be used in atomic services since API version 12.
307
308**System capability**: SystemCapability.ArkUI.ArkUI.Full
309
310| Name  | Description                                    |
311| ---- | ---------------------------------------- |
312| STANDARD | Standard mode.                      |
313| DIALOG | Dialog mode, where the navigation destination is transparent by default, and adding or removing the navigation destination from the navigation stack does not affect the lifecycle of the lower-layer navigation destinations.<br>System transition animations are supported since API version 13. |
314
315## NavigationSystemTransitionType<sup>14+</sup>
316
317**Atomic service API**: This API can be used in atomic services since API version 14.
318
319**System capability**: SystemCapability.ArkUI.ArkUI.Full
320
321| Name  | Value  | Description|
322| ----  | ---   | ----- |
323| DEFAULT  | 0 | Default system transition animation.|
324| NONE| 1 | No system transition animation.|
325| TITLE | 2 | System transition animation of the title bar.|
326| CONTENT | 3 | System transition animation of the content area.|
327
328**NOTE**
329>
330> System transition animations for the title bar and content area can be configured separately.
331>
332> The system transition animation of the title bar is only available for the push and pop animations of navigation destination pages in STANDARD mode, with the following constraints:
333> 1. When **NavigationSystemTransitionType** is set to **TITLE**, only the system transition animation of the title bar is displayed.
334> 2. When **NavigationSystemTransitionType** is set to **CONTENT**, only the system transition animation of the content area is displayed.
335>
336> When **NONE** or **TITLE** is set, no system transition animation is displayed. When **CONTENT** or **DEFAULT** is set, the system transition animation is displayed by default.
337
338## Events
339
340In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
341
342### onShown<sup>10+</sup>
343
344onShown(callback: () =&gt; void)
345
346Called when the navigation destination page is displayed.
347
348**Atomic service API**: This API can be used in atomic services since API version 11.
349
350**System capability**: SystemCapability.ArkUI.ArkUI.Full
351
352### onHidden<sup>10+</sup>
353
354onHidden(callback: () =&gt; void)
355
356Called when the navigation destination page is hidden.
357
358**Atomic service API**: This API can be used in atomic services since API version 11.
359
360**System capability**: SystemCapability.ArkUI.ArkUI.Full
361
362### onWillAppear<sup>12+</sup>
363
364onWillAppear(callback: Callback\<void>)
365
366Called when the navigation destination is about to be mounted. You can change the navigation stack in this callback function, and the change takes effect in the current frame.
367
368**Atomic service API**: This API can be used in atomic services since API version 12.
369
370**System capability**: SystemCapability.ArkUI.ArkUI.Full
371
372### onWillShow<sup>12+</sup>
373
374onWillShow(callback: Callback\<void>)
375
376Called when the navigation destination is about to be displayed.
377
378**Atomic service API**: This API can be used in atomic services since API version 12.
379
380**System capability**: SystemCapability.ArkUI.ArkUI.Full
381
382### onWillHide<sup>12+</sup>
383
384onWillHide(callback: Callback\<void>)
385
386Called when the navigation destination is about to be hidden.
387
388**Atomic service API**: This API can be used in atomic services since API version 12.
389
390**System capability**: SystemCapability.ArkUI.ArkUI.Full
391
392### onWillDisappear<sup>12+</sup>
393
394onWillDisappear(callback: Callback\<void>)
395
396Called when the navigation destination is about to be unmounted (or when the transition animation, if any, is about to start).
397
398**Atomic service API**: This API can be used in atomic services since API version 12.
399
400**System capability**: SystemCapability.ArkUI.ArkUI.Full
401
402### onBackPressed<sup>10+</sup>
403
404onBackPressed(callback: () =&gt; boolean)
405
406This callback takes effect when there is one or more entries in the navigation stack bound to the **Navigation** component. Called when the back button is pressed.
407
408The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed.
409
410**Atomic service API**: This API can be used in atomic services since API version 11.
411
412**System capability**: SystemCapability.ArkUI.ArkUI.Full
413
414### onReady<sup>11+</sup>
415
416onReady(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)<[NavDestinationContext](#navdestinationcontext11)>)
417
418Called when the **NavDestination** component is about to build a child component.
419
420**Atomic service API**: This API can be used in atomic services since API version 11.
421
422**System capability**: SystemCapability.ArkUI.ArkUI.Full
423
424## NavDestinationCommonTitle
425
426**Atomic service API**: This API can be used in atomic services since API version 11.
427
428**System capability**: SystemCapability.ArkUI.ArkUI.Full
429
430| Name  | Type    | Mandatory  | Description    |
431| ---- | ------ | ---- | ------ |
432| main | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | Yes   | Main title.|
433| sub  | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | Yes   | Subtitle.|
434
435## NavDestinationCustomTitle
436
437**Atomic service API**: This API can be used in atomic services since API version 11.
438
439**System capability**: SystemCapability.ArkUI.ArkUI.Full
440
441| Name     | Type                                      | Mandatory  | Description      |
442| ------- | ---------------------------------------- | ---- | -------- |
443| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes   | Content of the title bar.|
444| height  | [TitleHeight](ts-appendix-enums.md#titleheight9) \| [Length](ts-types.md#length) | Yes   | Height of the title bar.|
445
446## NavDestinationContext<sup>11+</sup>
447
448**System capability**: SystemCapability.ArkUI.ArkUI.Full
449
450| Name  | Type    | Mandatory  |  Description    |
451| ---- | ------ | ----- | ------ |
452| pathInfo | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | Yes| Path information of the navigation destination page.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
453| pathStack  | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | Yes| Page stack where the current navigation destination page is located.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
454| navDestinationId<sup>12+</sup> | string | No| Unique ID of the current navigation destination page, which is automatically generated by the system and is irrelevant to the universal attribute **id** of the component.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
455
456### getConfigInRouteMap<sup>12+</sup>
457
458getConfigInRouteMap(): RouteMapConfig |undefined
459
460**Atomic service API**: This API can be used in atomic services since API version 12.
461
462**System capability**: SystemCapability.ArkUI.ArkUI.Full
463
464**Return value**
465
466| Type| Description|
467| --- | --- |
468| [RouteMapConfig](#routemapconfig12) | Route map configuration of the current page.|
469| undefined | **undefined**, returned when the page is not configured through the route table.|
470
471## RouteMapConfig<sup>12+</sup>
472
473**Atomic service API**: This API can be used in atomic services since API version 12.
474
475**System capability**: SystemCapability.ArkUI.ArkUI.Full
476
477| Name  | Type  |Mandatory| Description|
478| ----  | ---   | ---- |----- |
479| name  | string | Yes| Page name.|
480| pageSourceFile| string | Yes| Path of the page in the current package.|
481| data | Object | Yes| Custom data of the page.|
482
483## NestedScrollInfo<sup>14+</sup>
484
485Provides the information about the nested scrollable containers.
486
487**Atomic service API**: This API can be used in atomic services since API version 14.
488
489**System capability**: SystemCapability.ArkUI.ArkUI.Full
490
491| Name  | Type  |Mandatory| Description|
492| ----  | ---   | ---- |----- |
493| parent | [Scroller](./ts-container-scroll.md#scroller) | Yes| Controller of the target scrollable container.|
494| child | [Scroller](./ts-container-scroll.md#scroller) | Yes| Controller of the scrollable container nested within the target scrollable container. This scrollable container is a child component of the target scrollable container.|
495
496## Example
497
498### Example 1
499
500This example shows how to bind a **NavDestination** component to scrollable containers so that scrolling in the scrollable containers triggers the animations for showing or hiding the title bar and toolbar of the **NavDestination** component.
501
502```ts
503import { SymbolGlyphModifier } from '@kit.ArkUI';
504
505@Component
506struct MyPageOne {
507  private listScroller: Scroller = new Scroller();
508  private scrollScroller: Scroller = new Scroller();
509  private arr: number[] = [];
510
511  aboutToAppear(): void {
512    for (let i = 0; i < 30; i++) {
513      this.arr.push(i);
514    }
515  }
516
517  build() {
518    NavDestination() {
519      Scroll(this.scrollScroller) {
520        Column() {
521          List({space: 0, initialIndex: 0, scroller: this.listScroller}) {
522            ForEach(this.arr, (item: number, index: number) => {
523              ListItem() {
524                Text('' + item)
525                  .height(100)
526                  .fontSize(16)
527                  .textAlign(TextAlign.Center)
528                  .width('90%')
529                  .margin({left: '5%'})
530                  .borderRadius(10)
531                  .backgroundColor(Color.Gray)
532              }
533            }, (item: string) => item);
534          }.width('100%').height('80%').scrollBar(BarState.Off)
535          .nestedScroll({scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST})
536          ForEach(this.arr, (item: number, index: number) => {
537            ListItem() {
538              Text('' + item)
539                .height(100)
540                .fontSize(16)
541                .textAlign(TextAlign.Center)
542                .width('90%')
543                .margin({top: '5%'})
544                .borderRadius(10)
545                .backgroundColor(Color.Pink)
546            }
547          }, (item: string) => item);
548        }
549      }
550      .width('100%')
551      .scrollBar(BarState.Off)
552      .scrollable(ScrollDirection.Vertical)
553      .edgeEffect(EdgeEffect.Spring)
554    }
555    .title('PageOne', {backgroundColor: Color.Yellow, barStyle: BarStyle.STACK})
556    .toolbarConfiguration([
557      {
558        value: 'item1',
559        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star'))
560      }
561    ], {backgroundColor: Color.Orange, barStyle: BarStyle.STACK})
562    // Bind the NavDestination component to nested scrollable containers.
563    .bindToNestedScrollable([{parent: this.scrollScroller, child: this.listScroller}])
564  }
565}
566
567@Component
568struct MyPageTwo {
569  private listScroller: Scroller = new Scroller();
570  private arr: number[] = [];
571
572  aboutToAppear(): void {
573    for (let i = 0; i < 30; i++) {
574      this.arr.push(i);
575    }
576  }
577
578  build() {
579    NavDestination() {
580      List({scroller: this.listScroller}) {
581        ForEach(this.arr, (item: number, index: number) => {
582          ListItem() {
583            Text('' + item)
584              .height(100)
585              .fontSize(16)
586              .textAlign(TextAlign.Center)
587              .width('90%')
588              .margin({left: '5%'})
589              .borderRadius(10)
590              .backgroundColor(Color.Gray)
591          }
592        }, (item: string) => item);
593      }.width('100%')
594    }
595    .title('PageTwo', {backgroundColor: Color.Yellow, barStyle: BarStyle.STACK})
596    .toolbarConfiguration([
597      {
598        value: 'item1',
599        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star'))
600      }
601    ], {backgroundColor: Color.Orange, barStyle: BarStyle.STACK})
602    // Bind the NavDestination component to a scrollable container.
603    .bindToScrollable([this.listScroller])
604  }
605}
606
607@Entry
608@Component
609struct Index {
610  private stack: NavPathStack = new NavPathStack();
611
612  @Builder
613  MyPageMap(name: string) {
614    if (name === 'myPageOne') {
615      MyPageOne()
616    } else {
617      MyPageTwo()
618    }
619  }
620
621  build() {
622    Navigation(this.stack) {
623      Column() {
624        Button('push PageOne').onClick(() => {
625          this.stack.pushPath({name: 'myPageOne'})
626        })
627        Button('push PageTwo').onClick(() => {
628          this.stack.pushPath({name: 'myPageTwo'})
629        })
630      }.height('40%').justifyContent(FlexAlign.SpaceAround)
631    }.width('100%')
632    .height('100%')
633    .title({main: 'MainTitle', sub: 'subTitle'})
634    .navDestination(this.MyPageMap)
635  }
636}
637```
638![navdestination_bind_scrollable](figures/navdestination_bind_scrollable.gif)
639
640For more examples, see [Example in Navigation](ts-basic-components-navigation.md#example-1-implementing-a-navigation-page-layout).
641