diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
new file mode 100644
index 0000000..f3f9fec
--- /dev/null
+++ b/src/components/Breadcrumbs.astro
@@ -0,0 +1,43 @@
+---
+const breadcrumbList = Astro.url.pathname.split("/").slice(1);
+
+// if breadcrumb is Home > Post > 'article-name'
+// replace 'article-name' to 'current post'
+if (breadcrumbList[0] === "posts" && breadcrumbList.length > 1) {
+  breadcrumbList.splice(1, 1, "current post");
+}
+---
+
+<nav class="breadcrumb" aria-label="breadcrumb">
+  <ul>
+    <li><a href="/">Home</a></li>
+    {
+      breadcrumbList.map((breadcrumb, index) => (
+        <li>
+          {index + 1 === breadcrumbList.length ? (
+            <span class={`${index > 0 ? "lowercase" : ""}`} aria-current="page">
+              {breadcrumb}
+            </span>
+          ) : (
+            <a href={`/${breadcrumb}`}>{breadcrumb}</a>
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  .breadcrumb {
+    @apply max-w-3xl mx-auto px-4 w-full mt-8 mb-1;
+  }
+  .breadcrumb ul li {
+    @apply inline opacity-70 capitalize;
+  }
+  .breadcrumb ul li + li {
+    @apply text-skin-base before:content-[">"];
+  }
+  .breadcrumb ul li:not(:last-child) {
+    @apply hover:opacity-100 hover:before:opacity-70;
+  }
+</style>