diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
new file mode 100644
index 000000000..6741f386c
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+    @apply spacing-horizontal-left;
+    color: var(--text-base);
+}
\ No newline at end of file
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
new file mode 100644
index 000000000..8b36f7e50
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import s from './BreadcrumbCommon.module.scss'
+
+import { useRouter } from 'next/router'
+
+import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
+import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
+
+const BreadcrumbCommon = () => {
+
+    const paths: string | any = {
+        "/": "Home",
+        "fresh-product-today" : "Fresh Product Today",
+        "product-list": "Product List",
+        "recipes-list": "Recipes List",
+        "blogs": "Blog",
+        "account": "Account",
+        "delivery&policy": "Delivery & Policy",
+        "product-detail": "Product Detail",
+        "recipes-detail": "Recipes Detail",
+        "blog-detail": "Blog Detail"
+    }
+
+    const router = useRouter();
+    let crumbs = router.route.split('/');
+
+    return (
+        <section className={s.breadcrumbCommon}>
+            <BreadcrumbItem text="Home" href="/" />
+            {
+                crumbs.map((crumb, i) => {
+                    if (crumb === "") {
+                        return
+                    }
+                    if (i === crumbs.length-1) {
+                        return (
+                            <BreadcrumbSeparator key={i}>
+                                <BreadcrumbItem text={`${paths[crumb]}`} href="#" />
+                            </BreadcrumbSeparator>
+                        )
+                    }
+                    return (
+                        <BreadcrumbSeparator key={i}>
+                            <BreadcrumbItem text={`${paths[crumb]}`} href={`/${paths[crumb]}`} />
+                        </BreadcrumbSeparator>
+                    )
+                })
+            }
+        </section>
+    )
+
+}
+
+export default BreadcrumbCommon
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
new file mode 100644
index 000000000..9a501c93f
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Link from 'next/link'
+
+interface BreadcrumbItemProps {
+    text: string;
+    href: string;
+}
+
+const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
+    return (
+        <Link href={`${href}`}>
+            {text}
+        </Link>
+    )
+}
+
+export default BreadcrumbItem
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
new file mode 100644
index 000000000..c877e60bc
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface BreadcrumbSeparatorProps {
+    children: any;
+}
+
+const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
+    return (
+        <span>
+            &nbsp;/&nbsp;{children}
+        </span>
+    )
+}
+
+export default BreadcrumbSeparator