diff --git a/api/@internal/component/ets/enums.d.ts b/api/@internal/component/ets/enums.d.ts
index b77938feff47809b49d3a1e744d8857bbfe26a6b..4485ed6929a68744047ec61af4e3feaa89f775ff 100644
--- a/api/@internal/component/ets/enums.d.ts
+++ b/api/@internal/component/ets/enums.d.ts
@@ -1475,7 +1475,7 @@ declare enum CopyOptions {
  * Defines the hit test mode.
  * @since 9
  */
- declare enum HitTestMode {
+declare enum HitTestMode {
   /**
    * Both self and children nodes respond to the hit test for touch events,
    * but block hit test of the other nodes which is masked by this node.
@@ -1503,4 +1503,22 @@ declare enum CopyOptions {
    * @since 9
    */
   None,
+}
+
+/**
+ * Title height.
+ * @since 9
+ */
+declare enum TitleHeight {
+  /**
+   * Title height when only main title is avaliable.
+   * @since 9
+   */
+  MainOnly,
+
+  /**
+   * Title height when main title and subtitle are both avaliable.
+   * @since 9
+   */
+  MainWithSub,
 }
\ No newline at end of file
diff --git a/api/@internal/component/ets/index-full.d.ts b/api/@internal/component/ets/index-full.d.ts
index fec0ec8cc10a911d5322f84b14988177eee32b00..f536b164e2d62672de57043fec0dbaf780c78be7 100644
--- a/api/@internal/component/ets/index-full.d.ts
+++ b/api/@internal/component/ets/index-full.d.ts
@@ -54,6 +54,8 @@
 /// <reference path="./list_item_group.d.ts" />
 /// <reference path="./loading_progress.d.ts" />
 /// <reference path="./marquee.d.ts" />
+/// <reference path="./nav_destination.d.ts" />
+/// <reference path="./nav_router.d.ts" />
 /// <reference path="./navigation.d.ts" />
 /// <reference path="./navigator.d.ts" />
 /// <reference path="./page_transition.d.ts" />
diff --git a/api/@internal/component/ets/nav_destination.d.ts b/api/@internal/component/ets/nav_destination.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3868d8de29e0bfedde5d06214ce59e6e25b5ccb0
--- /dev/null
+++ b/api/@internal/component/ets/nav_destination.d.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Defines the navigation destination common title.
+ * @since 9
+ */
+declare interface NavDestinationCommonTitle {
+  /**
+   * Sets the main title.
+   * @since 9
+   */
+  main: string;
+
+  /**
+   * Sets the sub title.
+   * @since 9
+   */
+  sub: string;
+}
+
+/**
+ * Defines the navigation destination custom title.
+ * @since 9
+ */
+declare interface NavDestinationCustomTitle {
+  /**
+   * Sets the custom title builder.
+   * @since 9
+   */
+  builder: string;
+
+  /**
+   * Sets the custom title height.
+   * @since 9
+   */
+  height: TitleHeight | Length;
+}
+
+/**
+ * The construct function of NavDestination.
+ * @since 9
+ */
+declare interface NavDestinationInterface {
+  /**
+   * constructor.
+   * @since 9
+   */
+  (): NavDestinationAttribute;
+}
+
+/**
+ * The attribute function of NavDestination
+ * @since 9
+ */
+declare class NavDestinationAttribute extends CommonMethod<NavDestinationAttribute> {
+  /**
+   * Navigation title bar
+   * @since 9
+   */
+  title(value: string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle): NavDestinationAttribute;
+
+  /**
+   * Hide navigation title bar
+   * @since 9
+   */
+  hideTitleBar(value: boolean): NavDestinationAttribute;
+}
+
+declare const NavDestination: NavDestinationInterface;
+declare const NavDestinationInstance: NavDestinationAttribute;
+     
\ No newline at end of file
diff --git a/api/@internal/component/ets/nav_router.d.ts b/api/@internal/component/ets/nav_router.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6d6718aa13c1b892519e5219a5c2990a2728f8e
--- /dev/null
+++ b/api/@internal/component/ets/nav_router.d.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * The construct function of NavRouter.
+ * @since 9
+ */
+declare interface NavRouterInterface {
+  /**
+   * constructor.
+   * @since 9
+   */
+  (): NavRouterAttribute;
+}
+
+/**
+ * The attribute function of NavRouter
+ * @since 9
+ */
+declare class NavRouterAttribute extends CommonMethod<NavRouterAttribute> {
+  /**
+   * Trigger callback when NavigationView state change.
+   * @since 9
+   */
+  onStateChange(callback: (isActivated: boolean) => void): NavRouterAttribute;
+}
+
+declare const NavRouter: NavRouterInterface;
+declare const NavRouterInstance: NavRouterAttribute;
+  
\ No newline at end of file
diff --git a/api/@internal/component/ets/navigation.d.ts b/api/@internal/component/ets/navigation.d.ts
index 420438d98b3d5d30151a4370cf261094f0572fd4..74d0480687986f96314cd1efe105e1a108112c4c 100644
--- a/api/@internal/component/ets/navigation.d.ts
+++ b/api/@internal/component/ets/navigation.d.ts
@@ -13,6 +13,82 @@
  * limitations under the License.
  */
 
+/**
+ * Defines the navigation common title.
+ * @since 9
+ */
+declare interface NavigationCommonTitle {
+  /**
+   * Sets the main title.
+   * @since 9
+   */
+  main: string;
+
+  /**
+   * Sets the sub title.
+   * @since 9
+   */
+  sub: string;
+}
+
+/**
+ * Defines the navigation custom title.
+ * @since 9
+ */
+declare interface NavigationCustomTitle {
+  /**
+   * Sets the custom title builder.
+   * @since 9
+   */
+  builder: string;
+
+  /**
+   * Sets the custom title height.
+   * @since 9
+   */
+  height: TitleHeight | Length;
+}
+
+/**
+ * Nativation mode
+ * @since 9
+ */
+declare enum NavigationMode {
+  /**
+   * The navigation bar and the content area are displayed in stack.
+   * @since 9
+   */
+  Stack,
+  /**
+   * The navigation bar and the content area are displayed side by side.
+   * @since 9
+   */
+  Split,
+   /**
+   * If the window width is greater than 520vp, the navigation component is displayed in split mode.
+   * Otherwise it's displayed in stack mode.
+   * @since 9
+   */
+  Auto,
+}
+
+/**
+ * Navigation bar position
+ * @since 9
+ */
+declare enum NavBarPosition {
+  /**
+   * The navigation bar is on the Start of the container
+   * @since 9
+   */
+  Start,
+  /**
+   * The navigation bar is on the End of the container
+   * @since 9
+   */
+  End,
+}
+
 /**
  * Naivagtion title mode.
  * @since 8
@@ -72,20 +148,52 @@ interface NavigationInterface {
  * @since 8
  */
 declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
+  /**
+   * Sets the width of navigation bar.
+   * @since 9
+   */
+  navBarWidth(value: Length): NavigationAttribute;
+
+  /**
+   * Sets the position of navigation bar.
+   * @since 9
+   */
+  navBarPosition(value: NavBarPosition): NavigationAttribute;
+   
+  /**
+   * Sets the mode of navigation.
+   * @since 9
+   */
+  mode(value: NavigationMode): NavigationAttribute;
+   
+  /**
+   * Sets the back button icon.
+   * @since 9
+   */
+  backButtonIcon(value: string | PixelMap | Resource): NavigationAttribute;
+   
+  /**
+   * Hide the navigation bar.
+   * @since 9
+   */
+  hideNavBar(value: boolean): NavigationAttribute;
+
   /**
    * Navigation title
    * @since 8
    */
-  title(value: string | CustomBuilder): NavigationAttribute;
+  title(value: string | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle): NavigationAttribute;
 
   /**
    * Navigation subtitle
    * @since 8
+   * @deprecated since 9
+   * @useinstead title
    */
   subTitle(value: string): NavigationAttribute;
 
   /**
-   * Hide navigation bar
+   * Hide navigation title bar
    * @since 8
    */
   hideTitleBar(value: boolean): NavigationAttribute;
@@ -125,6 +233,12 @@ declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
    * @since 8
    */
   onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
+
+  /**
+   * Trigger callback when the visibility of navigation bar change.
+   * @since 9
+   */
+  onNavBarStateChange(callback: (isVisible: boolean) => void): NavigationAttribute;
 }
 
 declare const Navigation: NavigationInterface;