diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index ed12ee10..757fe16d 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}</div>
+    <div class="title flex-h">
+      <div class="mr-10">
+        {{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}
+      </div>
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 05ec63bd..39dccc21 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -6,6 +6,8 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']