diff --git a/examples/docs/en-US/breadcrumb.md b/examples/docs/en-US/breadcrumb.md
index 916888dd4..fc8539a28 100644
--- a/examples/docs/en-US/breadcrumb.md
+++ b/examples/docs/en-US/breadcrumb.md
@@ -10,7 +10,7 @@ Displays the location of the current page, making it easier to browser back.
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
   <el-breadcrumb-item>promotion list</el-breadcrumb-item>
   <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
 </el-breadcrumb>
diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md
index 7b4026acb..727e82176 100644
--- a/examples/docs/es/breadcrumb.md
+++ b/examples/docs/es/breadcrumb.md
@@ -10,7 +10,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
   <el-breadcrumb-item>promotion list</el-breadcrumb-item>
   <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
 </el-breadcrumb>
diff --git a/examples/docs/zh-CN/breadcrumb.md b/examples/docs/zh-CN/breadcrumb.md
index 3862b169f..2acdf73e7 100644
--- a/examples/docs/zh-CN/breadcrumb.md
+++ b/examples/docs/zh-CN/breadcrumb.md
@@ -10,7 +10,7 @@
 ```html
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
 </el-breadcrumb>
diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue
index 6be39510a..25547f041 100644
--- a/packages/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/breadcrumb/src/breadcrumb-item.vue
@@ -1,6 +1,9 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__inner" ref="link" role="link">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
       <slot></slot>
     </span>
     <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
index 15d56c94d..3c3c3e1d8 100644
--- a/packages/theme-chalk/src/breadcrumb.scss
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -22,8 +22,11 @@
     float: left;
 
     @include e(inner) {
-      &, & a {
+      color: $--color-text-regular;
+
+      &.is-link, & a {
         font-weight: bold;
+        text-decoration: none;
         transition: $--color-transition-base;
         color: $--color-text-primary;