diff --git a/components.json b/components.json
index f67283ce9..07d33a97e 100644
--- a/components.json
+++ b/components.json
@@ -75,5 +75,6 @@
   "image": "./packages/image/index.js",
   "calendar": "./packages/calendar/index.js",
   "backtop": "./packages/backtop/index.js",
-  "infiniteScroll": "./packages/infiniteScroll/index.js"
+  "infiniteScroll": "./packages/infiniteScroll/index.js",
+  "page-header": "./packages/page-header/index.js"
 }
diff --git a/examples/docs/en-US/page-header.md b/examples/docs/en-US/page-header.md
new file mode 100644
index 000000000..cade09064
--- /dev/null
+++ b/examples/docs/en-US/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |
diff --git a/examples/docs/es/page-header.md b/examples/docs/es/page-header.md
new file mode 100644
index 000000000..cade09064
--- /dev/null
+++ b/examples/docs/es/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |
diff --git a/examples/docs/fr-FR/page-header.md b/examples/docs/fr-FR/page-header.md
new file mode 100644
index 000000000..cade09064
--- /dev/null
+++ b/examples/docs/fr-FR/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```html
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |
diff --git a/examples/docs/zh-CN/page-header.md b/examples/docs/zh-CN/page-header.md
new file mode 100644
index 000000000..8384b8024
--- /dev/null
+++ b/examples/docs/zh-CN/page-header.md
@@ -0,0 +1,40 @@
+## PageHeader 页头
+
+如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
+
+### 基础
+
+:::demo
+```html
+<el-page-header @back="goBack" content="详情页面">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | 标题           | string    |  —                            | 返回   |
+| content   | 内容           | string    |  —                            | —      |
+
+
+### Events
+| 事件名称   | 说明           | 回调参数   |
+|---------- |-------------- |---------- |
+| back      | 点击左侧区域触发 | —        |
+
+### Slots
+| 事件名称    | 说明         |
+|---------- |------------- |
+| title     | 标题内容      |
+| content   | 内容         |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 999a2a137..21cd5c814 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -215,6 +215,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb 面包屑"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader 页头"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown 下拉菜单"
@@ -497,6 +501,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -779,6 +787,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -1061,6 +1073,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
diff --git a/packages/page-header/index.js b/packages/page-header/index.js
new file mode 100644
index 000000000..105da7322
--- /dev/null
+++ b/packages/page-header/index.js
@@ -0,0 +1,8 @@
+import PageHeader from './src/main';
+
+/* istanbul ignore next */
+PageHeader.install = function(Vue) {
+  Vue.component(PageHeader.name, PageHeader);
+};
+
+export default PageHeader;
diff --git a/packages/page-header/src/main.vue b/packages/page-header/src/main.vue
new file mode 100644
index 000000000..d7d6b3807
--- /dev/null
+++ b/packages/page-header/src/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="el-page-header">
+    <div class="el-page-header__left" @click="$emit('back')">
+      <i class="el-icon-back"></i>
+      <div class="el-page-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="el-page-header__content">
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { t } from 'element-ui/src/locale';
+export default {
+  name: 'ElPageHeader',
+
+  props: {
+    title: {
+      type: String,
+      default() {
+        return t('el.pageHeader.title');
+      }
+    },
+    content: String
+  }
+};
+</script>
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index 73be76314..f54249b79 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -72,3 +72,4 @@
 @import "./image.scss";
 @import "./calendar.scss";
 @import "./backtop.scss";
+@import "./page-header.scss";
diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss
new file mode 100644
index 000000000..14c19fa9d
--- /dev/null
+++ b/packages/theme-chalk/src/page-header.scss
@@ -0,0 +1,41 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(page-header) {
+  display: flex;
+  line-height: 24px;
+
+  @include e(left) {
+    display: flex;
+    cursor: pointer;
+    margin-right: 40px;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      height: 16px;
+      right: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: $--border-color-base;
+    }
+
+    .el-icon-back {
+      font-size: 18px;
+      margin-right: 6px;
+      align-self: center;
+    }
+
+    @include e(title) {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  @include e(content) {
+    font-size: 18px;
+    color: $--color-text-primary;
+  }
+}
diff --git a/src/index.js b/src/index.js
index 7c6268b5a..0133c4b9b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -77,6 +77,7 @@ import Image from '../packages/image/index.js';
 import Calendar from '../packages/calendar/index.js';
 import Backtop from '../packages/backtop/index.js';
 import InfiniteScroll from '../packages/infiniteScroll/index.js';
+import PageHeader from '../packages/page-header/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -153,6 +154,7 @@ const components = [
   Image,
   Calendar,
   Backtop,
+  PageHeader,
   CollapseTransition
 ];
 
@@ -269,5 +271,6 @@ export default {
   Image,
   Calendar,
   Backtop,
-  InfiniteScroll
+  InfiniteScroll,
+  PageHeader
 };
diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js
index cbb513295..f207eba8c 100644
--- a/src/locale/lang/af-ZA.js
+++ b/src/locale/lang/af-ZA.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
index da074098b..8af92a5ec 100644
--- a/src/locale/lang/ar.js
+++ b/src/locale/lang/ar.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js
index 1dd8468bc..d8b561452 100644
--- a/src/locale/lang/bg.js
+++ b/src/locale/lang/bg.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index 6a4aa2b17..fd06ce8df 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/cs-CZ.js b/src/locale/lang/cs-CZ.js
index 24c74e9a6..12beb2cb2 100644
--- a/src/locale/lang/cs-CZ.js
+++ b/src/locale/lang/cs-CZ.js
@@ -109,6 +109,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js
index b8c867090..2d4991473 100644
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
index 17c7913fe..196d6911c 100644
--- a/src/locale/lang/de.js
+++ b/src/locale/lang/de.js
@@ -108,6 +108,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js
index 5c097e2ad..640612907 100644
--- a/src/locale/lang/ee.js
+++ b/src/locale/lang/ee.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js
index 52688e072..f111bfc6e 100644
--- a/src/locale/lang/el.js
+++ b/src/locale/lang/el.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 94d9c662f..c2ea43832 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED'
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index e20824499..8fb737ca9 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/eu.js b/src/locale/lang/eu.js
index dfa5d9301..9f5f182d3 100644
--- a/src/locale/lang/eu.js
+++ b/src/locale/lang/eu.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js
index b1255179d..b70a45c92 100644
--- a/src/locale/lang/fa.js
+++ b/src/locale/lang/fa.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js
index 0ae38e482..5b3c5ef3c 100644
--- a/src/locale/lang/fi.js
+++ b/src/locale/lang/fi.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index 98b9a3429..10a456461 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js
index 2cb92ca0a..f27b99bfe 100644
--- a/src/locale/lang/he.js
+++ b/src/locale/lang/he.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js
index ec341834b..a508e7d3f 100644
--- a/src/locale/lang/hr.js
+++ b/src/locale/lang/hr.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js
index 89b87f46d..295c3105c 100644
--- a/src/locale/lang/hu.js
+++ b/src/locale/lang/hu.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/hy-AM.js b/src/locale/lang/hy-AM.js
index 7b60d040a..6b3c63918 100644
--- a/src/locale/lang/hy-AM.js
+++ b/src/locale/lang/hy-AM.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index 2163b1c98..5875a86c8 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js
index b4006421d..850829fc6 100644
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js
index fa9e0d103..16a635adc 100644
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/kg.js b/src/locale/lang/kg.js
index 470a8f4a6..5498ac7ff 100644
--- a/src/locale/lang/kg.js
+++ b/src/locale/lang/kg.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
index eb8251bd4..a45cbfc78 100644
--- a/src/locale/lang/km.js
+++ b/src/locale/lang/km.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js
index aafd3d63a..4cadf21f8 100644
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js
index 97a150c1a..57d4480f0 100644
--- a/src/locale/lang/ku.js
+++ b/src/locale/lang/ku.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js
index 81e2ee3d2..a4579d4ad 100644
--- a/src/locale/lang/kz.js
+++ b/src/locale/lang/kz.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js
index 156e248f1..3e3ba3092 100644
--- a/src/locale/lang/lt.js
+++ b/src/locale/lang/lt.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js
index f8afe29db..18f99cda7 100644
--- a/src/locale/lang/lv.js
+++ b/src/locale/lang/lv.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js
index e85019af3..47280d88f 100644
--- a/src/locale/lang/mn.js
+++ b/src/locale/lang/mn.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js
index e8692b410..c32b54d3f 100644
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js
index 1715e9223..fb4df9cc8 100644
--- a/src/locale/lang/nl.js
+++ b/src/locale/lang/nl.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js
index 37b02b381..e837edac2 100644
--- a/src/locale/lang/pl.js
+++ b/src/locale/lang/pl.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 6f6f37748..2902fc358 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js
index 89a4e4f37..16bc2053e 100644
--- a/src/locale/lang/pt.js
+++ b/src/locale/lang/pt.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js
index 8fb218c35..76610749f 100644
--- a/src/locale/lang/ro.js
+++ b/src/locale/lang/ro.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index c6a936c3f..ef6824f8e 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js
index 8aa383260..0897e76ed 100644
--- a/src/locale/lang/sk.js
+++ b/src/locale/lang/sk.js
@@ -109,6 +109,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js
index b6cd253d3..4361d62e4 100644
--- a/src/locale/lang/sl.js
+++ b/src/locale/lang/sl.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js
index 7d3e7b048..b40afc612 100644
--- a/src/locale/lang/sr.js
+++ b/src/locale/lang/sr.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index aed00aea3..72ad41b2d 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js
index 694501adf..2e802d028 100644
--- a/src/locale/lang/ta.js
+++ b/src/locale/lang/ta.js
@@ -106,6 +106,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js
index 0475f51e2..c83cfcfbd 100644
--- a/src/locale/lang/th.js
+++ b/src/locale/lang/th.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js
index 6b8bb6282..b1b602665 100644
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index 6e3cb629e..ebbfca8a9 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index 56022259c..39d10c2dc 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
index 0c94b08fd..4381b9c8f 100644
--- a/src/locale/lang/ug-CN.js
+++ b/src/locale/lang/ug-CN.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index 24fd444f4..14d85e21b 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index fa4b74799..0466da446 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: '加载失败'
+    },
+    pageHeader: {
+      title: '返回'
     }
   }
 };
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 9b87d2649..1e978b1a4 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -107,6 +107,9 @@ export default {
     },
     image: {
       error: '加載失敗'
+    },
+    pageHeader: {
+      title: '返回'
     }
   }
 };
diff --git a/test/unit/specs/page-header.spec.js b/test/unit/specs/page-header.spec.js
new file mode 100644
index 000000000..b0c31cd7d
--- /dev/null
+++ b/test/unit/specs/page-header.spec.js
@@ -0,0 +1,24 @@
+import { createVue, destroyVM, waitImmediate } from '../util';
+import PageHeader from 'packages/page-header';
+
+describe('PageHeader', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('render well and trigger back event', async() => {
+    vm = createVue(PageHeader, {
+      content: 'content'
+    });
+    expect(vm.$el).to.exist;
+    const spy = sinon.spy();
+    vm.$on('back', spy);
+    vm.$el.querySelector('.el-page-header__left').click();
+
+    await waitImmediate();
+
+    expect(spy.calledOnce).to.be.true;
+  });
+});
+
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index 89779a2e6..6eced80ca 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -76,6 +76,7 @@ import { ElCalendar } from './calendar'
 import { ElImage } from './image'
 import { ElBacktop } from './backtop'
 import { ElInfiniteScroll } from './infiniteScroll'
+import { ElPageHeader } from './page-header'
 
 export interface InstallationOptions {
   locale: any,
@@ -329,3 +330,5 @@ export class Backtop extends ElBacktop {}
 /** InfiniteScroll Component */
 export class InfiniteScroll extends ElInfiniteScroll {}
 
+/** PageHeader Component */
+export class PageHeader extends ElPageHeader {}
diff --git a/types/page-header.d.ts b/types/page-header.d.ts
new file mode 100644
index 000000000..2831983a8
--- /dev/null
+++ b/types/page-header.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** PageHeader Component */
+export declare class ElPageHeader extends ElementUIComponent {
+  /** title */
+  title: String
+
+  /** content */
+  content: String
+}