diff --git a/adapter/preview/sdk/sharedlib_config.gni b/adapter/preview/sdk/sharedlib_config.gni
index 17d208250c370f07915f562854e9f195ae084fd0..cd2eb2a942a45d47af5a757034433459e0c050d2 100644
--- a/adapter/preview/sdk/sharedlib_config.gni
+++ b/adapter/preview/sdk/sharedlib_config.gni
@@ -452,6 +452,17 @@ napi_modules = [
       },
     ]
   },
+  {
+    prefix = "atomicservice"
+    shard_libs = [
+      {
+        label = "//foundation/arkui/ace_engine/advanced_ui_component/atomicservicenavigation/interfaces:atomicservicenavigation"
+        subsystem_name = "arkui"
+        part_name = "ace_engine"
+        lib_names = [ "atomicservicenavigation" ]
+      },
+    ]
+  },
 ]
 
 if (defined(use_rosen_drawing) && use_rosen_drawing) {
diff --git a/advanced_ui_component/BUILD.gn b/advanced_ui_component/BUILD.gn
index 5f191698b78df28b101808d7aa3538e885f31692..a465d1784ecec0f1fe1dec2ae2ef92c1863e2a9b 100644
--- a/advanced_ui_component/BUILD.gn
+++ b/advanced_ui_component/BUILD.gn
@@ -13,6 +13,7 @@
 
 group("advanced_ui_component") {
   deps = [
+    "atomicservicenavigation/interfaces:atomicservicenavigation",
     "chip/interfaces:chip",
     "chipgroup/interfaces:chipgroup",
     "composelistitem/interfaces:composelistitem",
diff --git a/advanced_ui_component/atomicservicenavigation/interfaces/BUILD.gn b/advanced_ui_component/atomicservicenavigation/interfaces/BUILD.gn
new file mode 100644
index 0000000000000000000000000000000000000000..ba98cc7131d3731c1d241141fda7d778e1e2db9a
--- /dev/null
+++ b/advanced_ui_component/atomicservicenavigation/interfaces/BUILD.gn
@@ -0,0 +1,59 @@
+# Copyright (c) 2024 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.
+
+import("//arkcompiler/ets_frontend/es2panda/es2abc_config.gni")
+import("//build/ohos.gni")
+import("//foundation/arkui/ace_engine/ace_config.gni")
+import("//foundation/arkui/ace_engine/adapter/preview/build/config.gni")
+import("//foundation/arkui/ace_engine/build/ace_gen_obj.gni")
+
+es2abc_gen_abc("gen_atomicservicenavigation_abc") {
+  src_js = rebase_path("atomicservicenavigation.js")
+  dst_file = rebase_path(target_out_dir + "/atomicservicenavigation.abc")
+  in_puts = [ "atomicservicenavigation.js" ]
+  out_puts = [ target_out_dir + "/atomicservicenavigation.abc" ]
+  extra_args = [ "--module" ]
+}
+
+gen_js_obj("atomicservicenavigation_abc") {
+  input = get_label_info(":gen_atomicservicenavigation_abc", "target_out_dir") +
+          "/atomicservicenavigation.abc"
+  output = target_out_dir + "/atomicservicenavigation_abc.o"
+  dep = ":gen_atomicservicenavigation_abc"
+}
+
+gen_obj("atomicservicenavigation_abc_preview") {
+  input = get_label_info(":gen_atomicservicenavigation_abc", "target_out_dir") +
+          "/atomicservicenavigation.abc"
+  output = target_out_dir + "/atomicservicenavigation_abc.c"
+  snapshot_dep = [ ":gen_atomicservicenavigation_abc" ]
+}
+
+ohos_shared_library("atomicservicenavigation") {
+  sources = [ "atomicservicenavigation.cpp" ]
+
+  if (use_mingw_win || use_mac || use_linux) {
+    deps = [ ":gen_obj_src_atomicservicenavigation_abc_preview" ]
+  } else {
+    deps = [ ":atomicservicenavigation_abc" ]
+  }
+
+  external_deps = [
+    "hilog:libhilog",
+    "napi:ace_napi",
+  ]
+
+  relative_install_dir = "module/atomicservice"
+  subsystem_name = ace_engine_subsystem
+  part_name = ace_engine_part
+}
diff --git a/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.cpp b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..6d12e7efbdacfa7868e9a58886881bb131f86599
--- /dev/null
+++ b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.cpp
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
+#include "native_engine/native_engine.h"
+
+#include "napi/native_api.h"
+#include "napi/native_node_api.h"
+
+extern const char _binary_atomicservicenavigation_abc_start[];
+extern const char _binary_atomicservicenavigation_abc_end[];
+
+// Napi get abc code function
+extern "C" __attribute__((visibility("default")))
+void NAPI_atomicservice_AtomicServiceNavigation_GetABCCode(const char **buf, int *buflen)
+{
+    if (buf != nullptr) {
+        *buf = _binary_atomicservicenavigation_abc_start;
+    }
+    if (buflen != nullptr) {
+        *buflen = _binary_atomicservicenavigation_abc_end - _binary_atomicservicenavigation_abc_start;
+    }
+}
+
+/*
+ * Module define
+ */
+static napi_module AtomicServiceNavigationModule = {
+    .nm_version = 1,
+    .nm_flags = 0,
+    .nm_filename = nullptr,
+    .nm_modname = "atomicservice.AtomicServiceNavigation",
+    .nm_priv = ((void*)0),
+    .reserved = { 0 },
+};
+
+/*
+ * Module registerfunction
+ */
+extern "C" __attribute__((constructor)) void AtomicServiceNavigationRegisterModule(void)
+{
+    napi_module_register(&AtomicServiceNavigationModule);
+}
\ No newline at end of file
diff --git a/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c07cbd8dcec157f61ff2516c521a735d14629ff
--- /dev/null
+++ b/advanced_ui_component/atomicservicenavigation/interfaces/atomicservicenavigation.js
@@ -0,0 +1,181 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
+if (!("finalizeConstruction" in ViewPU.prototype)) {
+    Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { });
+}
+export class AtomicServiceNavigation extends ViewPU {
+    constructor(w, x, y, z = -1, a1 = undefined, b1) {
+        super(w, y, z, b1);
+        if (typeof a1 === "function") {
+            this.paramsGenerator_ = a1;
+        }
+        this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack");
+        this.navigationContent = undefined;
+        this.__title = new SynchedPropertyObjectOneWayPU(x.title, this, "title");
+        this.__titleOptions = new SynchedPropertyObjectOneWayPU(x.titleOptions, this, "titleOptions");
+        this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(x.hideTitleBar, this, "hideTitleBar");
+        this.__navBarWidth = new SynchedPropertyObjectOneWayPU(x.navBarWidth, this, "navBarWidth");
+        this.__mode = new SynchedPropertySimpleOneWayPU(x.mode, this, "mode");
+        this.navDestinationBuilder = this.defaultNavDestinationBuilder;
+        this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(x.navBarWidthRange, this, "navBarWidthRange");
+        this.__minContentWidth = new SynchedPropertyObjectOneWayPU(x.minContentWidth, this, "minContentWidth");
+        this.stateChangeCallback = undefined;
+        this.modeChangeCallback = undefined;
+        this.setInitiallyProvidedValue(x);
+        this.finalizeConstruction();
+    }
+    setInitiallyProvidedValue(v) {
+        if (v.navPathStack !== undefined) {
+            this.navPathStack = v.navPathStack;
+        }
+        if (v.navigationContent !== undefined) {
+            this.navigationContent = v.navigationContent;
+        }
+        if (v.titleOptions === undefined) {
+            this.__titleOptions.set({ isEnableBlur: true });
+        }
+        if (v.navDestinationBuilder !== undefined) {
+            this.navDestinationBuilder = v.navDestinationBuilder;
+        }
+        if (v.stateChangeCallback !== undefined) {
+            this.stateChangeCallback = v.stateChangeCallback;
+        }
+        if (v.modeChangeCallback !== undefined) {
+            this.modeChangeCallback = v.modeChangeCallback;
+        }
+    }
+    updateStateVars(u) {
+        this.__title.reset(u.title);
+        this.__titleOptions.reset(u.titleOptions);
+        this.__hideTitleBar.reset(u.hideTitleBar);
+        this.__navBarWidth.reset(u.navBarWidth);
+        this.__mode.reset(u.mode);
+        this.__navBarWidthRange.reset(u.navBarWidthRange);
+        this.__minContentWidth.reset(u.minContentWidth);
+    }
+    purgeVariableDependenciesOnElmtId(t) {
+        this.__navPathStack.purgeDependencyOnElmtId(t);
+        this.__title.purgeDependencyOnElmtId(t);
+        this.__titleOptions.purgeDependencyOnElmtId(t);
+        this.__hideTitleBar.purgeDependencyOnElmtId(t);
+        this.__navBarWidth.purgeDependencyOnElmtId(t);
+        this.__mode.purgeDependencyOnElmtId(t);
+        this.__navBarWidthRange.purgeDependencyOnElmtId(t);
+        this.__minContentWidth.purgeDependencyOnElmtId(t);
+    }
+    aboutToBeDeleted() {
+        this.__navPathStack.aboutToBeDeleted();
+        this.__title.aboutToBeDeleted();
+        this.__titleOptions.aboutToBeDeleted();
+        this.__hideTitleBar.aboutToBeDeleted();
+        this.__navBarWidth.aboutToBeDeleted();
+        this.__mode.aboutToBeDeleted();
+        this.__navBarWidthRange.aboutToBeDeleted();
+        this.__minContentWidth.aboutToBeDeleted();
+        SubscriberManager.Get().delete(this.id__());
+        this.aboutToBeDeletedInternal();
+    }
+    get navPathStack() {
+        return this.__navPathStack.get();
+    }
+    set navPathStack(s) {
+        this.__navPathStack.set(s);
+    }
+    get title() {
+        return this.__title.get();
+    }
+    set title(r) {
+        this.__title.set(r);
+    }
+    get titleOptions() {
+        return this.__titleOptions.get();
+    }
+    set titleOptions(q) {
+        this.__titleOptions.set(q);
+    }
+    get hideTitleBar() {
+        return this.__hideTitleBar.get();
+    }
+    set hideTitleBar(p) {
+        this.__hideTitleBar.set(p);
+    }
+    get navBarWidth() {
+        return this.__navBarWidth.get();
+    }
+    set navBarWidth(o) {
+        this.__navBarWidth.set(o);
+    }
+    get mode() {
+        return this.__mode.get();
+    }
+    set mode(n) {
+        this.__mode.set(n);
+    }
+    get navBarWidthRange() {
+        return this.__navBarWidthRange.get();
+    }
+    set navBarWidthRange(m) {
+        this.__navBarWidthRange.set(m);
+    }
+    get minContentWidth() {
+        return this.__minContentWidth.get();
+    }
+    set minContentWidth(l) {
+        this.__minContentWidth.set(l);
+    }
+    defaultNavDestinationBuilder(i, j, k = null) {
+    }
+    initialRender() {
+        this.observeComponentCreation2((g, h) => {
+            Navigation.create(this.navPathStack);
+            Navigation.title(ObservedObject.GetRawObject(this.title), {
+                backgroundColor: this.titleOptions?.backgroundColor,
+                backgroundBlurStyle: this.titleOptions?.isEnableBlur ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE,
+                barStyle: this.titleOptions?.barStyle
+            });
+            Navigation.titleMode(NavigationTitleMode.Mini);
+            Navigation.hideBackButton(true);
+            Navigation.hideTitleBar(this.hideTitleBar);
+            Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth));
+            Navigation.navBarPosition(NavBarPosition.Start);
+            Navigation.mode(this.mode);
+            Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) });
+            Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange));
+            Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth));
+            Navigation.onNavBarStateChange(this.stateChangeCallback);
+            Navigation.onNavigationModeChange(this.modeChangeCallback);
+        }, Navigation);
+        this.observeComponentCreation2((c, d) => {
+            If.create();
+            if (this.navigationContent) {
+                this.ifElseBranchUpdateFunction(0, () => {
+                    this.navigationContent.bind(this)(this);
+                });
+            }
+            else {
+                this.ifElseBranchUpdateFunction(1, () => {
+                });
+            }
+        }, If);
+        If.pop();
+        Navigation.pop();
+    }
+    rerender() {
+        this.updateDirtyElements();
+    }
+}
+
+export default { AtomicServiceNavigation };
\ No newline at end of file
diff --git a/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets b/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b435540912b8271a74f8ae48b0d419164bdd06ac
--- /dev/null
+++ b/advanced_ui_component/atomicservicenavigation/source/atomicservicenavigation.ets
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2024 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.
+ */
+
+import { Callback } from '@ohos.base';
+
+@Component
+export struct AtomicServiceNavigation {
+  @State navPathStack?: NavPathStack = new NavPathStack();
+  @BuilderParam navigationContent?: Callback<void>;
+  @Prop title?: ResourceStr;
+  @Prop titleOptions?: TitleOptions = { isEnableBlur: true };
+  @Prop hideTitleBar?: boolean;
+  @Prop navBarWidth?: Length;
+  @Prop mode?: NavigationMode;
+  @BuilderParam navDestinationBuilder?: (name: string, param?: Object) => void = this.defaultNavDestinationBuilder;
+  @Prop navBarWidthRange?: [Dimension, Dimension];
+  @Prop minContentWidth?: Dimension;
+  stateChangeCallback?: Callback<boolean>;
+  modeChangeCallback?: Callback<NavigationMode>;
+
+  @Builder
+  defaultNavDestinationBuilder(name: string, param?: Object) {
+  }
+
+  build() {
+    Navigation(this.navPathStack) {
+      if (this.navigationContent) {
+        this.navigationContent()
+      }
+    }
+    .title(this.title, {
+      backgroundColor: this.titleOptions?.backgroundColor,
+      backgroundBlurStyle: this.titleOptions?.isEnableBlur ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE,
+      barStyle: this.titleOptions?.barStyle
+    })
+    .titleMode(NavigationTitleMode.Mini)
+    .hideBackButton(true)
+    .hideTitleBar(this.hideTitleBar)
+    .navBarWidth(this.navBarWidth)
+    .navBarPosition(NavBarPosition.Start)
+    .mode(this.mode)
+    .navDestination(this.navDestinationBuilder)
+    .navBarWidthRange(this.navBarWidthRange)
+    .minContentWidth(this.minContentWidth)
+    .onNavBarStateChange(this.stateChangeCallback)
+    .onNavigationModeChange(this.modeChangeCallback)
+  }
+}
+
+export interface TitleOptions {
+  backgroundColor?: ResourceColor,
+  isEnableBlur?: boolean,
+  barStyle?: BarStyle
+}
\ No newline at end of file