diff --git a/.changeset/tasty-timers-travel.md b/.changeset/tasty-timers-travel.md
new file mode 100644
index 00000000..d804635c
--- /dev/null
+++ b/.changeset/tasty-timers-travel.md
@@ -0,0 +1,5 @@
+---
+'web': minor
+---
+
+Refactored breadcrumb component to comply with new navigation structure
diff --git a/apps/web/src/app/(common-page)/agenda/[event]/page.tsx b/apps/web/src/app/(common-page)/agenda/[event]/page.tsx
index 49438be4..0b2ccbf9 100644
--- a/apps/web/src/app/(common-page)/agenda/[event]/page.tsx
+++ b/apps/web/src/app/(common-page)/agenda/[event]/page.tsx
@@ -16,6 +16,7 @@ import { OpenInMapDropdown } from './open-in-map-dropdown';
 import { Metadata } from 'next';
 import { truncateStringAtWord } from '@/common/truncate-string-at-word';
 import slugify from '@sindresorhus/slugify';
+import { EnhanceMenuBreadcrumbs } from '@/app/menu-breadcrumbs';
 
 interface Props {
   params: { event: string };
@@ -35,6 +36,8 @@ export default async function EventPage({ params }: Props) {
 
   return (
     <>
+      <EnhanceMenuBreadcrumbs append={title} />
+
       <div className="relative -mt-14 h-[300px] w-full overflow-hidden object-fill">
         {cover && (
           <Image
diff --git a/apps/web/src/app/(blog-article)/blog/[...slug]/page.tsx b/apps/web/src/app/(common-page)/blog/[...slug]/page.tsx
similarity index 57%
rename from apps/web/src/app/(blog-article)/blog/[...slug]/page.tsx
rename to apps/web/src/app/(common-page)/blog/[...slug]/page.tsx
index e43874c5..25d9dcce 100644
--- a/apps/web/src/app/(blog-article)/blog/[...slug]/page.tsx
+++ b/apps/web/src/app/(common-page)/blog/[...slug]/page.tsx
@@ -1,6 +1,5 @@
 import { resolveCmsImage } from '@/common/resolve-cms-image';
 import { truncateStringAtWord } from '@/common/truncate-string-at-word';
-import { Breadcrumbs } from '@/components/breadcrumbs';
 import { Button } from '@/components/button';
 import { Container } from '@/components/container';
 import { RemoteMdx } from '@/components/remote-mdx';
@@ -12,7 +11,8 @@ import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import { ShareBar } from '../../../../components/share-bar';
+import { EnhanceMenuBreadcrumbs } from '@/app/menu-breadcrumbs';
+import { ShareBar } from '@/components/share-bar';
 
 interface Props {
   params: {
@@ -30,60 +30,50 @@ export default async function BlogArticlePage(props: Props) {
   if (!blogArticle.title || !blogArticle.content) return notFound();
 
   return (
-    <>
+    <Container component="main" className="pb-8">
+      <EnhanceMenuBreadcrumbs append={blogArticle.title} />
       <header>
-        <nav>
-          <Breadcrumbs>
-            <Link href="/">Home</Link>
-            <Link href="/blog">Blog</Link>
-            <span>{blogArticle.title}</span>
-          </Breadcrumbs>
-        </nav>
-      </header>
-      <Container component="main" className="pb-8 pt-14">
-        <header>
-          <Button component={Link} variant="text" startIcon={<IconArrowLeft />} href="/blog">
-            Overzicht
-          </Button>
-          <Typography variant="h1" className="mb-12 mt-4 ">
-            {blogArticle.title}
-          </Typography>
-          {blogArticle.publishedAt && (
-            <span className="text-grey-light">
-              Publicatiedatum{' '}
-              {new Date(blogArticle.publishedAt).toLocaleDateString('nl-NL', {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-              })}
-            </span>
+        <Button component={Link} variant="text" startIcon={<IconArrowLeft />} href="/blog">
+          Overzicht
+        </Button>
+        <Typography variant="h1" className="mb-12 mt-4 ">
+          {blogArticle.title}
+        </Typography>
+        {blogArticle.publishedAt && (
+          <span className="text-grey-light">
+            Publicatiedatum{' '}
+            {new Date(blogArticle.publishedAt).toLocaleDateString('nl-NL', {
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric',
+            })}
+          </span>
+        )}
+        <figure className="relative mb-12 mt-3 aspect-[308/140] overflow-hidden rounded-lg">
+          {blogArticle.cover.ext && blogArticle.cover.hash && (
+            <Image
+              fill
+              className="object-cover"
+              src={resolveCmsImage({
+                ext: blogArticle.cover.ext,
+                hash: blogArticle.cover.hash,
+                width: 1235,
+              }).toString()}
+              alt={blogArticle.cover.alt || blogArticle?.title}
+            />
           )}
-          <figure className="relative mb-12 mt-3 aspect-[308/140] overflow-hidden rounded-lg">
-            {blogArticle.cover.ext && blogArticle.cover.hash && (
-              <Image
-                fill
-                className="object-cover"
-                src={resolveCmsImage({
-                  ext: blogArticle.cover.ext,
-                  hash: blogArticle.cover.hash,
-                  width: 1235,
-                }).toString()}
-                alt={blogArticle.cover.alt || blogArticle?.title}
-              />
-            )}
-          </figure>
-        </header>
-        <article>
-          <RemoteMdx content={blogArticle?.content || ''} />
-        </article>
-        <div className="mt-6 border-b border-t border-grey-light py-6">Categorie: {blogArticle?.category}</div>
+        </figure>
+      </header>
+      <article>
+        <RemoteMdx content={blogArticle?.content || ''} />
+      </article>
+      <div className="mt-6 border-b border-t border-grey-light py-6">Categorie: {blogArticle?.category}</div>
 
-        <p className="mb-2 mt-12 text-xl">Deel deze pagina</p>
-        <ShareBar title={blogArticle.title} />
-      </Container>
-    </>
+      <p className="mb-2 mt-12 text-xl">Deel deze pagina</p>
+      <ShareBar title={blogArticle.title} />
+    </Container>
   );
 }
 
diff --git a/apps/web/src/app/(common-page)/breadcrumbs.tsx b/apps/web/src/app/(common-page)/breadcrumbs.tsx
deleted file mode 100644
index 84a9512d..00000000
--- a/apps/web/src/app/(common-page)/breadcrumbs.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { Breadcrumbs as BreadcrumbsComponent } from '@/components/breadcrumbs';
-import { getPages } from '@/services/cms/get-pages';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-interface Props {
-  pages: Awaited<ReturnType<typeof getPages>>;
-}
-
-export const Breadcrumbs: React.FC<Props> = ({ pages }) => {
-  const pathName = usePathname();
-
-  const page = pages.find((page) => page.slug && pathName.includes(page.slug));
-
-  return (
-    <header>
-      <nav>
-        <BreadcrumbsComponent>
-          <Link href="/">Home</Link>
-          {page?.name && <span>{page.name}</span>}
-        </BreadcrumbsComponent>
-      </nav>
-    </header>
-  );
-};
diff --git a/apps/web/src/app/(common-page)/layout.tsx b/apps/web/src/app/(common-page)/layout.tsx
deleted file mode 100644
index 8b52c336..00000000
--- a/apps/web/src/app/(common-page)/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getPages } from '@/services/cms/get-pages';
-import { Breadcrumbs } from './breadcrumbs';
-
-export const revalidate = 300;
-
-export default async function CommonPageLayout({ children }: React.PropsWithChildren) {
-  const pages = await getPages();
-
-  return (
-    <>
-      <Breadcrumbs pages={pages} />
-      <main className="pb-8 pt-14">{children}</main>
-    </>
-  );
-}
diff --git a/apps/web/src/app/header.tsx b/apps/web/src/app/header.tsx
index f4f3cb26..9580a765 100644
--- a/apps/web/src/app/header.tsx
+++ b/apps/web/src/app/header.tsx
@@ -6,6 +6,7 @@ import Logo from './logo.png';
 import { MenuContext } from './menu-context';
 import { MenuDesktop } from './menu-desktop';
 import { MenuMobile, MenuToggle } from './menu-mobile';
+import { MenuBreadcrumbs } from './menu-breadcrumbs';
 
 export interface Page {
   id: number;
@@ -28,6 +29,7 @@ export const Header: React.FC = async () => {
         </MenuContext>
       </Container>
       <MenuDesktop navbar={navbar} />
+      <MenuBreadcrumbs navbar={navbar} />
     </header>
   );
 };
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 71c0c4be..717e64bf 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -3,6 +3,7 @@ import localFont from 'next/font/local';
 import { Footer } from './footer';
 import './globals.css';
 import { Header } from './header';
+import { MenuBreadcrumbsProvider } from './menu-breadcrumbs';
 
 const RoSansWeb = localFont({
   src: [
@@ -22,9 +23,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   return (
     <html lang="nl">
       <body className={`${RoSansWeb.className} flex min-h-screen min-w-full flex-col`}>
-        <Header />
-        {children}
-        <Footer />
+        <MenuBreadcrumbsProvider>
+          <Header />
+          <main className="pb-8 pt-14">{children}</main>
+          <Footer />
+        </MenuBreadcrumbsProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/app/menu-breadcrumbs.tsx b/apps/web/src/app/menu-breadcrumbs.tsx
new file mode 100644
index 00000000..a412a239
--- /dev/null
+++ b/apps/web/src/app/menu-breadcrumbs.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { Container } from '@/components/container';
+import { getNavbarNodeByUrl } from '@/services/cms/get-navbar-node-by-url';
+import { NavbarNode } from '@/services/cms/get-navbar-tree';
+import { IconChevronRight } from '@tabler/icons-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import React, {
+  Dispatch,
+  Fragment,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+interface CrumbProps {
+  name: string;
+  href?: string;
+}
+
+const Crumb: React.FC<CrumbProps> = ({ name, href }) => {
+  if (name === 'root') return <Link href="/">Home</Link>;
+
+  if (!href) return <span>{name}</span>;
+
+  return <Link href={href.startsWith('/') ? href : '/' + href}>{name}</Link>;
+};
+
+interface MenuBreadcrumbsProps {
+  navbar: NavbarNode;
+}
+
+export const MenuBreadcrumbs: React.FC<MenuBreadcrumbsProps> = ({ navbar }) => {
+  const { additionalCrumbs } = useMenuBreadcrumbs();
+  const pathName = usePathname();
+
+  const pathSegments = pathName.split('/');
+
+  const targetNode = pathSegments[1] || '/';
+
+  const node = getNavbarNodeByUrl(navbar, targetNode);
+
+  if (!node) return null;
+
+  const nodes = [node];
+  let current = node;
+
+  while (current.parent) {
+    current = current.parent;
+    nodes.push(current);
+  }
+
+  return (
+    <div className="bg-primary-lighter">
+      <Container component="nav" className="flex h-14 items-center gap-x-4 text-base font-bold text-primary-dark">
+        {nodes.toReversed().map((node, i) => {
+          return (
+            <Fragment key={node.id}>
+              {i > 0 && <IconChevronRight size={24} />}
+              <Crumb name={node.name} href={node.url} />
+            </Fragment>
+          );
+        })}
+        {additionalCrumbs.map((name, i) => {
+          return (
+            <Fragment key={name}>
+              <IconChevronRight size={24} />
+              <Crumb name={name} />
+            </Fragment>
+          );
+        })}
+      </Container>
+    </div>
+  );
+};
+
+interface Value {
+  additionalCrumbs: string[];
+  setAdditionalCrumbs: Dispatch<SetStateAction<string[]>>;
+}
+
+const context = createContext<Value>({} as Value);
+
+interface MenuBreadcrumbsProvider extends PropsWithChildren {}
+
+export const MenuBreadcrumbsProvider: React.FC<MenuBreadcrumbsProvider> = ({ children }) => {
+  const [additionalCrumbs, setAdditionalCrumbs] = useState<string[]>([]);
+
+  console.log({ additionalCrumbs });
+
+  return <context.Provider value={{ additionalCrumbs, setAdditionalCrumbs }}>{children}</context.Provider>;
+};
+
+const useMenuBreadcrumbs = () => useContext(context);
+
+interface EnhanceMenuBreadcrumbsProps {
+  append: string;
+}
+
+export const EnhanceMenuBreadcrumbs: React.FC<EnhanceMenuBreadcrumbsProps> = ({ append }) => {
+  const { setAdditionalCrumbs } = useMenuBreadcrumbs();
+
+  useEffect(() => {
+    setAdditionalCrumbs([append]);
+
+    return () => {
+      console.log('cleanup');
+      setAdditionalCrumbs([]);
+    };
+  }, [append, setAdditionalCrumbs]);
+
+  return null;
+};
diff --git a/apps/web/src/components/breadcrumbs.tsx b/apps/web/src/components/breadcrumbs.tsx
deleted file mode 100644
index 1753a062..00000000
--- a/apps/web/src/components/breadcrumbs.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { joinChildren } from '@/common/join-children';
-import { IconChevronRight } from '@tabler/icons-react';
-import { Container } from './container';
-
-export const Breadcrumbs: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <div className="bg-primary-lighter">
-      <Container component="nav" className="flex h-14 items-center gap-x-4 text-base font-bold text-primary-dark">
-        {Array.isArray(children) ? joinChildren(children, <IconChevronRight size={24} />) : children}
-      </Container>
-    </div>
-  );
-};