diff --git a/UI/StepNavigator/README.md b/UI/StepNavigator/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ad92c490c269ef8762100bad4eb023730405cf59
--- /dev/null
+++ b/UI/StepNavigator/README.md
@@ -0,0 +1,18 @@
+# StepNavigator<a name="EN-US_TOPIC_0000001133948524"></a>
+
+### Introduction<a name="section104mcpsimp"></a>
+
+This sample shows how to use the  **<stepper\>**  component and its child component  **<stepper-item\>**  in the JavaScript UI framework. When multiple steps are required to complete a task, you can use the  **<stepper\>**  component to navigate your users through the whole process.
+
+### Usage<a name="section107mcpsimp"></a>
+
+1. On the sample app, touch  **NEXT**  as prompted. When the last step is complete, the home screen is displayed.
+
+2. On the home screen, touch  **RESET**  to return to the first step.
+
+3. In the third step, select  **Skip subsequent steps**  and touch  **SKIP**  to go to the home screen.
+
+### Constraints<a name="section112mcpsimp"></a>
+
+This sample can only be run on standard-system devices.
+
diff --git a/UI/StepNavigator/README_zh.md b/UI/StepNavigator/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..fab355f500828398d78d94dd7bb1e6386728cada
--- /dev/null
+++ b/UI/StepNavigator/README_zh.md
@@ -0,0 +1,18 @@
+# 步骤导航器<a name="ZH-CN_TOPIC_0000001133948524"></a>
+
+### 简介<a name="section104mcpsimp"></a>
+
+本示例展示了JS UI 框架中stepper组件和 stepper-item子组件的使用方法。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
+
+### 使用说明<a name="section107mcpsimp"></a>
+
+1.依据导航提示执行下一步，步骤执行结束后进入主页；
+
+2.进入主页后，点击重置重新回到步骤一；
+
+3.在第三步中可选择“同意跳过后续步骤”，再点击跳过直接进入主页。
+
+### 约束与限制<a name="section112mcpsimp"></a>
+
+本示例仅支持标准系统上运行。
+
diff --git a/UI/StepNavigator/build.gradle b/UI/StepNavigator/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..5e558c6ac6ec34cf94d1d20976cb59bb3ef9ca6f
--- /dev/null
+++ b/UI/StepNavigator/build.gradle
@@ -0,0 +1,37 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#ZH-CN_TOPIC_0000001154985555__section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+		jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.3-RC'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+		jcenter()
+    }
+}
diff --git a/UI/StepNavigator/entry/build.gradle b/UI/StepNavigator/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..1ee2912960d74e6dfa19c49ae1742ab62da51ace
--- /dev/null
+++ b/UI/StepNavigator/entry/build.gradle
@@ -0,0 +1,18 @@
+apply plugin: 'com.huawei.ohos.hap'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#ZH-CN_TOPIC_0000001154985555__section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    supportSystem "standard"
+}
diff --git a/UI/StepNavigator/entry/src/main/config.json b/UI/StepNavigator/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..39e4dbe927f7266919c300757470804d6fcf833e
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/config.json
@@ -0,0 +1,57 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.stepnavigator",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.stepnavigator",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.stepnavigator.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.stepnavigator.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index",
+          "pages/homepage/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/app.js b/UI/StepNavigator/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+export default {
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+};
diff --git a/UI/StepNavigator/entry/src/main/js/default/i18n/en-US.json b/UI/StepNavigator/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..26ee937f00a7d1f81fa338794e8e90afef5ac981
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "one": "This is the first step",
+    "two": "This is the second step ",
+    "three": "This is the three step ",
+    "four": "This is the last step",
+    "hello": "Welcome to my world",
+    "skip": "Skip subsequent steps",
+    "skipping": "SKIP",
+    "reset": "RESET"
+  }
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/i18n/zh-CN.json b/UI/StepNavigator/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..830c8ef67c865a53a190be07f8e3dd5e1aab9079
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,12 @@
+{
+  "strings": {
+    "one": "这是第一步",
+    "two": "这是第二步",
+    "three": "这是第三步",
+    "four": "这是最后一步",
+    "hello": "欢迎来到我的世界",
+    "skip": "是否同意跳过后续步骤",
+    "skipping": "跳过",
+    "reset": "重置"
+  }
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.css b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..20f6c6835e4d6fcbabb8db6e988ee59835e063a1
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+.container {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.containerText {
+    width: 100%;
+    height: 40px;
+    margin-top: 30%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.reset {
+    width: 50px;
+    height: 50px;
+    margin-top: 50%;
+    justify-content: center;
+    margin-left: 85%;
+}
+
+.text {
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.hml b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..ee366f734d541677cb5e6bf6688303afb257715a
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.hml
@@ -0,0 +1,23 @@
+<!--
+ Copyright (c) 2021 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.
+ -->
+
+<div class="container">
+    <div class="containerText">
+        <text>{{ $t('strings.hello') }}</text>
+    </div>
+    <div class="reset" on:click="onclick">
+        <text class="text">{{ $t('strings.reset') }}</text>
+    </div>
+</div>
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.js b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..93862a18585f7ba8a6e21f4c68c10b82290923f5
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/homepage/index.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 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 router from '@system.router';
+
+export default {
+    onclick() {
+        router.push({
+            uri: "pages/index/index"
+        })
+    }
+}
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/index/index.css b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a9a61c20295ed0376c5d286214fefdf3e5c26f9a
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.stepperItem {
+    flex-direction: column;
+    align-items: center;
+}
+
+.item {
+    height: 70%;
+    justify-content: center;
+}
+
+.text {
+    font-size: 28px;
+}
+
+.button {
+    width: 60%;
+    justify-content: center;
+}
+
+.input {
+    margin-left: 20%;
+}
+
+.inputText {
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/index/index.hml b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e83da3baea4cabe696de2901446a3c2e939689d6
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,43 @@
+<!--
+ Copyright (c) 2021 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.
+ -->
+
+<div class="container">
+    <stepper id="stepper" index="0" @finish="finish" @skip="skip">
+        <stepper-item class="stepperItem">
+            <div class="item">
+                <text class="text">{{ $t('strings.one') }}</text>
+            </div>
+        </stepper-item>
+        <stepper-item class="stepperItem">
+            <div class="item">
+                <text class="text">{{ $t('strings.two') }}</text>
+            </div>
+        </stepper-item>
+        <stepper-item class="stepperItem">
+            <div class="item">
+                <text class="text">{{ $t('strings.three') }}</text>
+            </div>
+            <div>
+                <input class="input" type="radio" name="radio" @change="change"/>
+                <text class="inputText">{{ $t('strings.skip') }}</text>
+            </div>
+        </stepper-item>
+        <stepper-item class="stepperItem">
+            <div class="item">
+                <text class="text">{{ $t('strings.four') }}</text>
+            </div>
+        </stepper-item>
+    </stepper>
+</div>
diff --git a/UI/StepNavigator/entry/src/main/js/default/pages/index/index.js b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e36c53da6f9fb521ec15590e0a90e5b36655f3f3
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 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 router from '@system.router';
+
+export default {
+    finish() {
+        router.push({
+            uri: "pages/homepage/index"
+        })
+    },
+    skip() {
+        router.push({
+            uri: "pages/homepage/index"
+        })
+
+    },
+    change(e) {
+        if (e.checked) {
+            this.$element('stepper').setNextButtonStatus({
+                status: 'skip',
+                label: this.$t('strings.skipping')
+            })
+        }
+    }
+}
diff --git a/UI/StepNavigator/entry/src/main/resources/base/element/string.json b/UI/StepNavigator/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..2e4b6e5257ced8d355a0f000f27c5e7baf1549fe
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "StepNavigator"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/entry/src/main/resources/base/media/icon.png b/UI/StepNavigator/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/StepNavigator/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/StepNavigator/entry/src/main/resources/en/element/string.json b/UI/StepNavigator/entry/src/main/resources/en/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..6b9aca2c9a599ed03a347c725bd5d72af35c2789
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/resources/en/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "StepNavigator"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
diff --git a/UI/StepNavigator/entry/src/main/resources/zh/element/string.json b/UI/StepNavigator/entry/src/main/resources/zh/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..22b5f21c011c584478b7a7656a453af9021d763e
--- /dev/null
+++ b/UI/StepNavigator/entry/src/main/resources/zh/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "步骤导航器"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/StepNavigator/screenshots/device/stepper_1.png b/UI/StepNavigator/screenshots/device/stepper_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab31f3d0ff7730d98d3499a86ecf475d87d4b997
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_1.png differ
diff --git a/UI/StepNavigator/screenshots/device/stepper_2.png b/UI/StepNavigator/screenshots/device/stepper_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0496c2b5c400549a00e84360a21723ac9878c8bb
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_2.png differ
diff --git a/UI/StepNavigator/screenshots/device/stepper_3.png b/UI/StepNavigator/screenshots/device/stepper_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..44408487ae181b93c26442cae4b7a1e4d2d0eadd
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_3.png differ
diff --git a/UI/StepNavigator/screenshots/device/stepper_4.png b/UI/StepNavigator/screenshots/device/stepper_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba468e33660266083f60a08c904fb5f7af0d3471
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_4.png differ
diff --git a/UI/StepNavigator/screenshots/device/stepper_5.png b/UI/StepNavigator/screenshots/device/stepper_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ea7f1cf6312df1f53173ad447dc196f8483a3a9
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_5.png differ
diff --git a/UI/StepNavigator/screenshots/device/stepper_6.png b/UI/StepNavigator/screenshots/device/stepper_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..70fbbf90ccc1f9064e8992364ebd1c882c99bf5d
Binary files /dev/null and b/UI/StepNavigator/screenshots/device/stepper_6.png differ
diff --git a/UI/StepNavigator/settings.gradle b/UI/StepNavigator/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/UI/StepNavigator/settings.gradle
@@ -0,0 +1 @@
+include ':entry'