• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# NavDestination
2
3**\<NavDestination>** is a child component of the **\<NavRouter>** component and represents a destination in the navigation area.
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
10## Child Components
11
12Supported types of child components: built-in components and custom components, 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.
13
14Number of child components: multiple.
15
16
17## APIs
18
19NavDestination()
20
21
22## Attributes
23
24In addition to the [backgroundColor](ts-universal-attributes-background.md) attribute, the following attributes are supported.
25
26| Name        | Type                                                    | Description                                                        |
27| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
28| title        | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md#navigationcustomtitle) | Page title.<br>**NOTE**<br>When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.<br>When the title string is too long:<br>(1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...).<br>(2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).|
29| hideTitleBar | boolean                                                      | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
30
31## Events
32
33In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
34
35
36| Name                                      | Description                                    |
37| ---------------------------------------- | ---------------------------------------- |
38| onShown(callback: () =&gt; void)<sup>10+</sup> | Called when the navigation destination page is displayed.|
39| onHidden(callback: () =&gt; void)<sup>10+</sup> | Called when the navigation destination page is hidden.|
40| onBackPressed(callback: () =&gt; boolean)<sup>10+</sup> | Called when the back button is pressed.<br>The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed. |
41