3 files changed, 87 insertions, 1 deletions
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
new file mode 100644
index 0000000..bfba21f
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -0,0 +1,21 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %reset-ordered-list;
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-sm);
+}
+
+.item {
+  &:not(:last-of-type) {
+    &::after {
+      content: ">";
+      margin-left: var(--spacing-2xs);
+    }
+  }
+}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..e090a4f
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,53 @@
+import { t } from '@lingui/macro';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styles from './Breadcrumb.module.scss';
+
+const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
+  const router = useRouter();
+
+  const isHome = router.pathname === '/';
+  const isBlog = router.pathname === '/blog';
+  const isArticle = router.pathname.includes('/article/');
+  const isThematic = router.pathname.includes('/thematique/');
+  const isSubject = router.pathname.includes('/sujet/');
+
+  const getItems = () => {
+    return (
+      <>
+        <li className={styles.item}>
+          <Link href="/">
+            <a>{t`Home`}</a>
+          </Link>
+        </li>
+        {isBlog && <li className={styles.item}>{t`Blog`}</li>}
+        {(isArticle || isThematic || isSubject) && (
+          <>
+            <li className={styles.item}>
+              <Link href="/blog">
+                <a>{t`Blog`}</a>
+              </Link>
+            </li>
+            <li className={styles.item}>{pageTitle}</li>
+          </>
+        )}
+        {!isBlog && !isArticle && !isThematic && !isSubject && (
+          <li className={styles.item}>{pageTitle}</li>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {!isHome && (
+        <nav>
+          <span className="screen-reader-text">{t`You are here:`}</span>
+          <ol className={styles.list}>{getItems()}</ol>
+        </nav>
+      )}
+    </>
+  );
+};
+
+export default Breadcrumb;
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 7f8ab9d..8c5570f 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import Footer from '@components/Footer/Footer';
 import Header from '@components/Header/Header';
 import Main from '@components/Main/Main';
+import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
 
 const Layout = ({
   children,
@@ -19,4 +20,15 @@ const Layout = ({
   );
 };
 
+export const getLayout = (page: ReactElement) => {
+  const pageTitle: string = page.props.breadcrumbTitle;
+
+  return (
+    <Layout>
+      <Breadcrumb pageTitle={pageTitle} />
+      {page}
+    </Layout>
+  );
+};
+
 export default Layout;