diff --git a/src/components/Crumb.vue b/src/components/Crumb.vue
index 2c62797..2b59297 100644
--- a/src/components/Crumb.vue
+++ b/src/components/Crumb.vue
@@ -1,13 +1,34 @@
 <template>
-    <div>
-    面包屑
-    </div>
+	<div class="crumb">
+		<span>
+			<span
+				:style="{ color: index === nav.length - 1 ? '#333' : '#999' }"
+				v-for="(item, index) in nav"
+				:key="index"
+			>
+				{{ item.name }}
+				<i v-if="index != nav.length - 1">/</i>
+			</span>
+		</span>
+	</div>
 </template>
 
 <script>
-export default {}
+export default {
+	name : "Crumb",
+	props: ["nav"],
+	data() {
+		return {};
+	}
+};
 </script>
 
 <style lang="scss" scoped>
-
+.crumb {
+	font-size: 14px;
+	margin: 10px 0;
+	i {
+		margin: 0 5px;
+	}
+}
 </style>
diff --git a/src/views/Details.vue b/src/views/Details.vue
index 2ac7947..6ad4c0f 100644
--- a/src/views/Details.vue
+++ b/src/views/Details.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="details wrap">
-		<Crumb></Crumb>
+		<Crumb :nav="nav"></Crumb>
 		<main>
 			<div class="content">
 				<div class="l">