diff --git a/packages/omi-element-ui/src/breadcrumb.js b/packages/omi-element-ui/src/breadcrumb.js
new file mode 100644
index 000000000..43abc2a86
--- /dev/null
+++ b/packages/omi-element-ui/src/breadcrumb.js
@@ -0,0 +1,5 @@
+import { render } from 'omi'
+import './assets/index.css'
+import './elements/breadcrumb'
+
+render(<my-app />, '#root')
\ No newline at end of file
diff --git a/packages/omi-element-ui/src/elements/breadcrumb/_index.css b/packages/omi-element-ui/src/elements/breadcrumb/_index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/omi-element-ui/src/elements/breadcrumb/index.js b/packages/omi-element-ui/src/elements/breadcrumb/index.js
new file mode 100644
index 000000000..08dddb7c1
--- /dev/null
+++ b/packages/omi-element-ui/src/elements/breadcrumb/index.js
@@ -0,0 +1,27 @@
+import { tag, WeElement } from 'omi'
+import style from './_index.css'
+import '../../omi-element-ui/el-breadcrumb'
+import '../../omi-element-ui/el-breadcrumb-item'
+
+@tag('my-app')
+class MyApp extends WeElement {
+
+  css() {
+    return style
+  }
+
+  render(props, data) {
+    return (
+      <div>
+        <div>
+          <el-breadcrumb separator={"/"}>
+            <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>
+        </div>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb-item/index.js b/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb-item/index.js
new file mode 100644
index 000000000..1ae28a5d8
--- /dev/null
+++ b/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb-item/index.js
@@ -0,0 +1,39 @@
+import { tag, WeElement } from 'omi'
+import '../style/global/index.css'
+import style from '../style/breadcrumb-item.scss'
+
+@tag('el-breadcrumb-item', true)
+class ElBreadcrumbItem extends WeElement {
+
+    css() {
+        return style
+    }
+
+    install() {
+        this._initData()
+    }
+
+    _initData() {
+        if (this.parentNode.nodeName === 'EL-BREADCRUMB') {
+            console.log(this.parentNode.data.separator);
+            this.data.separator = this.parentNode.data.separator
+        }
+    }
+
+    render(props, data) {
+        console.log(props, data);
+        let {separator} = props;
+        return (
+            <span class="el-breadcrumb__item">
+                <span class="el-breadcrumb__inner is-link">
+                  <slot></slot>
+                </span>
+                <i class="el-breadcrumb__separator" class="separatorClass"></i>
+                <span v-else class="el-breadcrumb__separator" role="presentation">
+                  {{separator}}
+                </span>
+            </span>
+        )
+      
+    }
+}
\ No newline at end of file
diff --git a/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb/index.js b/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb/index.js
new file mode 100644
index 000000000..a398eb19f
--- /dev/null
+++ b/packages/omi-element-ui/src/omi-element-ui/el-breadcrumb/index.js
@@ -0,0 +1,13 @@
+import { tag, WeElement } from 'omi'
+
+@tag('el-breadcrumb', true)
+class ElBreadcrumb extends WeElement {
+    render(props, data) {
+        return (
+            <div class="el-breadcrumb" aria-label="Breadcrumb">
+                <slot></slot>
+            </div>
+        )
+      
+    }
+}