From 84ceb993fd29b14e5354e50fc45baf2eb543c72b Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 14:15:10 +0200
Subject: [PATCH 1/6] feat(header-v2): move old LayoutNavigation to
 LayoutNavigationLegacy

---
 .../Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} | 0
 examples/magento-graphcms/components/Layout/index.ts            | 2 +-
 .../Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} | 0
 examples/magento-open-source/components/Layout/index.ts         | 2 +-
 .../Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} | 0
 examples/magento-storyblok/components/Layout/index.ts           | 2 +-
 6 files changed, 3 insertions(+), 3 deletions(-)
 rename examples/magento-graphcms/components/Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} (100%)
 rename examples/magento-open-source/components/Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} (100%)
 rename examples/magento-storyblok/components/Layout/{LayoutNavigation.tsx => LayoutNavigationLegacy.tsx} (100%)

diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigationLegacy.tsx
similarity index 100%
rename from examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
rename to examples/magento-graphcms/components/Layout/LayoutNavigationLegacy.tsx
diff --git a/examples/magento-graphcms/components/Layout/index.ts b/examples/magento-graphcms/components/Layout/index.ts
index 95af573c2c1..9a6efa3deb4 100644
--- a/examples/magento-graphcms/components/Layout/index.ts
+++ b/examples/magento-graphcms/components/Layout/index.ts
@@ -1,4 +1,4 @@
-export * from './LayoutNavigation'
+export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigationLegacy.tsx
similarity index 100%
rename from examples/magento-open-source/components/Layout/LayoutNavigation.tsx
rename to examples/magento-open-source/components/Layout/LayoutNavigationLegacy.tsx
diff --git a/examples/magento-open-source/components/Layout/index.ts b/examples/magento-open-source/components/Layout/index.ts
index 95af573c2c1..9a6efa3deb4 100644
--- a/examples/magento-open-source/components/Layout/index.ts
+++ b/examples/magento-open-source/components/Layout/index.ts
@@ -1,4 +1,4 @@
-export * from './LayoutNavigation'
+export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'
diff --git a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx b/examples/magento-storyblok/components/Layout/LayoutNavigationLegacy.tsx
similarity index 100%
rename from examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
rename to examples/magento-storyblok/components/Layout/LayoutNavigationLegacy.tsx
diff --git a/examples/magento-storyblok/components/Layout/index.ts b/examples/magento-storyblok/components/Layout/index.ts
index 95af573c2c1..9a6efa3deb4 100644
--- a/examples/magento-storyblok/components/Layout/index.ts
+++ b/examples/magento-storyblok/components/Layout/index.ts
@@ -1,4 +1,4 @@
-export * from './LayoutNavigation'
+export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'

From af0fb441646901271c088ab9f68122351e75df98 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 14:20:23 +0200
Subject: [PATCH 2/6] feat(header-v2): duplicate old LayoutNavigation to be
 used as new LayoutNavigation

Unchaged for now. Changes coming in next commits.
---
 .../components/Layout/LayoutNavigation.tsx    | 174 ++++++++++++++++
 .../components/Layout/index.ts                |   5 +-
 .../components/Layout/LayoutNavigation.tsx    | 188 ++++++++++++++++++
 .../components/Layout/index.ts                |   5 +-
 .../components/Layout/LayoutNavigation.tsx    | 184 +++++++++++++++++
 .../components/Layout/index.ts                |   5 +-
 6 files changed, 558 insertions(+), 3 deletions(-)
 create mode 100644 examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
 create mode 100644 examples/magento-open-source/components/Layout/LayoutNavigation.tsx
 create mode 100644 examples/magento-storyblok/components/Layout/LayoutNavigation.tsx

diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
new file mode 100644
index 00000000000..89a5fa95457
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -0,0 +1,174 @@
+import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import {
+  DesktopNavActions,
+  DesktopNavBar,
+  LayoutDefault,
+  LayoutDefaultProps,
+  iconCustomerService,
+  iconHeart,
+  NavigationFab,
+  MenuFabSecondaryItem,
+  PlaceholderFab,
+  IconSvg,
+  DesktopNavItem,
+  DarkLightModeMenuSecondaryItem,
+  iconChevronDown,
+  NavigationProvider,
+  NavigationOverlay,
+  useNavigationSelection,
+  useMemoDeep,
+  MobileTopRight,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+import { Divider, Fab } from '@mui/material'
+import { useRouter } from 'next/router'
+import { Footer } from './Footer'
+import { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import {
+  StoreSwitcherButton,
+  StoreSwitcherFab,
+  StoreSwitcherMenuFabSecondaryItem,
+} from '@graphcommerce/magento-store'
+
+export type LayoutNavigationProps = LayoutQuery &
+  Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
+
+export function LayoutNavigation(props: LayoutNavigationProps) {
+  const { footer, menu, children, ...uiProps } = props
+
+  const selection = useNavigationSelection()
+  const router = useRouter()
+  const cartEnabled = useCartEnabled()
+
+  return (
+    <>
+      <NavigationProvider
+        selection={selection}
+        items={useMemoDeep(
+          () => [
+            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+            {
+              id: 'manual-item-one',
+              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+            },
+            {
+              id: 'manual-item-two',
+              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+            },
+            ...magentoMenuToNavigation(menu, true),
+            { id: 'blog', name: 'Blog', href: '/blog' },
+            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+            <CustomerMenuFabItem
+              onClick={() => selection.set(false)}
+              key='account'
+              guestHref='/account/signin'
+              authHref='/account'
+            >
+              <Trans>Account</Trans>
+            </CustomerMenuFabItem>,
+            <MenuFabSecondaryItem
+              key='service'
+              icon={<IconSvg src={iconCustomerService} size='medium' />}
+              href='/service'
+            >
+              <Trans>Customer Service</Trans>
+            </MenuFabSecondaryItem>,
+            <WishlistMenuFabItem
+              onClick={() => selection.set(false)}
+              key='wishlist'
+              icon={<IconSvg src={iconHeart} size='medium' />}
+            >
+              <Trans>Wishlist</Trans>
+            </WishlistMenuFabItem>,
+            <DarkLightModeMenuSecondaryItem key='darkmode' />,
+            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+          ],
+          [menu, selection],
+        )}
+      >
+        <NavigationOverlay
+          stretchColumns={false}
+          variantSm='left'
+          sizeSm='full'
+          justifySm='start'
+          itemWidthSm='70vw'
+          variantMd='left'
+          sizeMd='full'
+          justifyMd='start'
+          itemWidthMd='230px'
+          mouseEvent='hover'
+          itemPadding='md'
+        />
+      </NavigationProvider>
+
+      <LayoutDefault
+        {...uiProps}
+        noSticky={router.asPath.split('?')[0] === '/'}
+        header={
+          <>
+            <Logo />
+
+            <DesktopNavBar>
+              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+                  {item?.name}
+                </DesktopNavItem>
+              ))}
+
+              <DesktopNavItem
+                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+                onKeyUp={(evt) => {
+                  if (evt.key === 'Enter') {
+                    selection.set([menu?.items?.[0]?.uid || ''])
+                  }
+                }}
+                tabIndex={0}
+              >
+                {menu?.items?.[0]?.name}
+                <IconSvg src={iconChevronDown} />
+              </DesktopNavItem>
+
+              <DesktopNavItem href='/blog'>
+                <Trans>Blog</Trans>
+              </DesktopNavItem>
+            </DesktopNavBar>
+
+            <DesktopNavActions>
+              <SearchField
+                formControl={{ sx: { width: '400px' } }}
+                searchField={{ productListRenderer }}
+              />
+              <StoreSwitcherButton />
+              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+                <IconSvg src={iconCustomerService} size='large' />
+              </Fab>
+              <WishlistFab icon={<IconSvg src={iconHeart} size='large' />} />
+              <CustomerFab guestHref='/account/signin' authHref='/account' />
+              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+              {cartEnabled && <PlaceholderFab />}
+            </DesktopNavActions>
+
+            <MobileTopRight>
+              <StoreSwitcherFab size='responsiveMedium' />
+              <SearchFab size='responsiveMedium' />
+            </MobileTopRight>
+          </>
+        }
+        footer={<Footer footer={footer} />}
+        cartFab={<CartFab />}
+        menuFab={<NavigationFab onClick={() => selection.set([])} />}
+      >
+        {children}
+      </LayoutDefault>
+    </>
+  )
+}
diff --git a/examples/magento-graphcms/components/Layout/index.ts b/examples/magento-graphcms/components/Layout/index.ts
index 9a6efa3deb4..e420a1cb1c3 100644
--- a/examples/magento-graphcms/components/Layout/index.ts
+++ b/examples/magento-graphcms/components/Layout/index.ts
@@ -1,4 +1,7 @@
-export * from './LayoutNavigationLegacy'
+// Header layout: new split-component layout (Header / MenuOverlay / HeaderContainer) is the default.
+export * from './LayoutNavigation'
+// To revert to the legacy single-file layout, comment the line above and uncomment the one below:
+// export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
new file mode 100644
index 00000000000..485654a5516
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
@@ -0,0 +1,188 @@
+import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CmsBlock } from '@graphcommerce/magento-cms'
+import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import {
+  StoreSwitcherButton,
+  StoreSwitcherFab,
+  StoreSwitcherMenuFabSecondaryItem,
+} from '@graphcommerce/magento-store'
+import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
+import {
+  DarkLightModeMenuSecondaryItem,
+  DesktopNavActions,
+  DesktopNavBar,
+  DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  LayoutDefault,
+  MenuFabSecondaryItem,
+  MobileTopRight,
+  NavigationFab,
+  NavigationOverlay,
+  NavigationProvider,
+  PlaceholderFab,
+  useMemoDeep,
+  useNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+import { Divider, Fab } from '@mui/material'
+import { useRouter } from 'next/router'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { Footer } from './Footer'
+import type { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type LayoutNavigationProps = LayoutQuery &
+  Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
+
+export function LayoutNavigation(props: LayoutNavigationProps) {
+  const { menu, children, cmsBlocks, ...uiProps } = props
+
+  const selection = useNavigationSelection()
+  const router = useRouter()
+
+  const cartEnabled = useCartEnabled()
+
+  const footerBlock = cmsBlocks?.items?.find((item) => item?.identifier === 'footer_links_block')
+
+  return (
+    <>
+      <NavigationProvider
+        selection={selection}
+        items={useMemoDeep(
+          () => [
+            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+            {
+              id: 'manual-item-one',
+              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+            },
+            {
+              id: 'manual-item-two',
+              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+            },
+            ...magentoMenuToNavigation(menu, true),
+            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+            <CustomerMenuFabItem
+              onClick={() => selection.set(false)}
+              key='account'
+              guestHref='/account/signin'
+              authHref='/account'
+            >
+              <Trans>Account</Trans>
+            </CustomerMenuFabItem>,
+            <MenuFabSecondaryItem
+              key='service'
+              icon={<IconSvg src={iconCustomerService} size='medium' />}
+              href='/service'
+            >
+              <Trans>Customer Service</Trans>
+            </MenuFabSecondaryItem>,
+            <WishlistMenuFabItem
+              onClick={() => selection.set(false)}
+              key='wishlist'
+              icon={<IconSvg src={iconHeart} size='medium' />}
+            >
+              <Trans>Wishlist</Trans>
+            </WishlistMenuFabItem>,
+            <DarkLightModeMenuSecondaryItem key='darkmode' />,
+            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+          ],
+          [menu, selection],
+        )}
+      >
+        <NavigationOverlay
+          stretchColumns={false}
+          variantSm='left'
+          sizeSm='full'
+          justifySm='start'
+          itemWidthSm='70vw'
+          variantMd='left'
+          sizeMd='full'
+          justifyMd='start'
+          itemWidthMd='230px'
+          mouseEvent='hover'
+          itemPadding='md'
+        />
+      </NavigationProvider>
+
+      <LayoutDefault
+        {...uiProps}
+        noSticky={router.asPath.split('?')[0] === '/'}
+        header={
+          <>
+            <Logo />
+
+            <DesktopNavBar>
+              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+                  {item?.name}
+                </DesktopNavItem>
+              ))}
+              <DesktopNavItem
+                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+                onKeyUp={(evt) => {
+                  if (evt.key === 'Enter') {
+                    selection.set([menu?.items?.[0]?.uid || ''])
+                  }
+                }}
+                tabIndex={0}
+              >
+                {menu?.items?.[0]?.name}
+                <IconSvg src={iconChevronDown} />
+              </DesktopNavItem>
+            </DesktopNavBar>
+            <DesktopNavActions>
+              <StoreSwitcherButton />
+              <SearchField
+                formControl={{ sx: { width: '400px' } }}
+                searchField={{ productListRenderer }}
+              />
+              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+                <IconSvg src={iconCustomerService} size='large' />
+              </Fab>
+              <WishlistFab
+                icon={<IconSvg src={iconHeart} size='large' />}
+                BadgeProps={{ color: 'secondary' }}
+              />
+              <CustomerFab
+                guestHref='/account/signin'
+                authHref='/account'
+                BadgeProps={{ color: 'secondary' }}
+              />
+              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+              {cartEnabled && <PlaceholderFab />}
+            </DesktopNavActions>
+
+            <MobileTopRight>
+              <StoreSwitcherFab size='responsiveMedium' />
+              <SearchFab size='responsiveMedium' />
+            </MobileTopRight>
+          </>
+        }
+        footer={
+          <Footer
+            socialLinks={
+              footerBlock ? (
+                <CmsBlock cmsBlock={footerBlock} productListRenderer={productListRenderer} />
+              ) : (
+                <div />
+              )
+            }
+          />
+        }
+        cartFab={<CartFab BadgeProps={{ color: 'secondary' }} />}
+        menuFab={<NavigationFab onClick={() => selection.set([])} />}
+      >
+        {children}
+      </LayoutDefault>
+    </>
+  )
+}
diff --git a/examples/magento-open-source/components/Layout/index.ts b/examples/magento-open-source/components/Layout/index.ts
index 9a6efa3deb4..e420a1cb1c3 100644
--- a/examples/magento-open-source/components/Layout/index.ts
+++ b/examples/magento-open-source/components/Layout/index.ts
@@ -1,4 +1,7 @@
-export * from './LayoutNavigationLegacy'
+// Header layout: new split-component layout (Header / MenuOverlay / HeaderContainer) is the default.
+export * from './LayoutNavigation'
+// To revert to the legacy single-file layout, comment the line above and uncomment the one below:
+// export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'
diff --git a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
new file mode 100644
index 00000000000..d12d98866fa
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
@@ -0,0 +1,184 @@
+import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import {
+  StoreSwitcherButton,
+  StoreSwitcherFab,
+  StoreSwitcherMenuFabSecondaryItem,
+} from '@graphcommerce/magento-store'
+import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
+import {
+  DarkLightModeMenuSecondaryItem,
+  DesktopNavActions,
+  DesktopNavBar,
+  DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  LayoutDefault,
+  MenuFabSecondaryItem,
+  MobileTopRight,
+  NavigationFab,
+  NavigationOverlay,
+  NavigationProvider,
+  PlaceholderFab,
+  useMemoDeep,
+  useNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+import { Divider, Fab } from '@mui/material'
+import { useRouter } from 'next/router'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { GlobalConfigProvider } from '../Storyblok/GlobalConfigProvider'
+import type { StoryblokGlobalConfig } from '../Storyblok/types'
+import { Footer } from './Footer'
+import type { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type LayoutNavigationProps = LayoutQuery &
+  Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'> & {
+    globalConfig?: StoryblokGlobalConfig | null
+  }
+
+export function LayoutNavigation(props: LayoutNavigationProps) {
+  const { menu, children, globalConfig, ...uiProps } = props
+
+  const selection = useNavigationSelection()
+  const router = useRouter()
+
+  const cartEnabled = useCartEnabled()
+
+  return (
+    <GlobalConfigProvider value={globalConfig}>
+      <NavigationProvider
+        selection={selection}
+        items={useMemoDeep(
+          () => [
+            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+            {
+              id: 'manual-item-one',
+              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+            },
+            {
+              id: 'manual-item-two',
+              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+            },
+            ...magentoMenuToNavigation(menu, true),
+            { id: 'blog', name: 'Blog', href: '/blog' },
+            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+            <CustomerMenuFabItem
+              onClick={() => selection.set(false)}
+              key='account'
+              guestHref='/account/signin'
+              authHref='/account'
+            >
+              <Trans>Account</Trans>
+            </CustomerMenuFabItem>,
+            <MenuFabSecondaryItem
+              key='service'
+              icon={<IconSvg src={iconCustomerService} size='medium' />}
+              href='/service'
+            >
+              <Trans>Customer Service</Trans>
+            </MenuFabSecondaryItem>,
+            <WishlistMenuFabItem
+              onClick={() => selection.set(false)}
+              key='wishlist'
+              icon={<IconSvg src={iconHeart} size='medium' />}
+            >
+              <Trans>Wishlist</Trans>
+            </WishlistMenuFabItem>,
+            <DarkLightModeMenuSecondaryItem key='darkmode' />,
+            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+          ],
+          [menu, selection],
+        )}
+      >
+        <NavigationOverlay
+          stretchColumns={false}
+          variantSm='left'
+          sizeSm='full'
+          justifySm='start'
+          itemWidthSm='70vw'
+          variantMd='left'
+          sizeMd='full'
+          justifyMd='start'
+          itemWidthMd='230px'
+          mouseEvent='hover'
+          itemPadding='md'
+        />
+      </NavigationProvider>
+
+      <LayoutDefault
+        {...uiProps}
+        noSticky={router.asPath.split('?')[0] === '/'}
+        header={
+          <>
+            <Logo />
+
+            <DesktopNavBar>
+              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+                  {item?.name}
+                </DesktopNavItem>
+              ))}
+              <DesktopNavItem
+                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+                onKeyUp={(evt) => {
+                  if (evt.key === 'Enter') {
+                    selection.set([menu?.items?.[0]?.uid || ''])
+                  }
+                }}
+                tabIndex={0}
+              >
+                {menu?.items?.[0]?.name}
+                <IconSvg src={iconChevronDown} />
+              </DesktopNavItem>
+
+              <DesktopNavItem href='/blog'>
+                <Trans>Blog</Trans>
+              </DesktopNavItem>
+            </DesktopNavBar>
+            <DesktopNavActions>
+              <StoreSwitcherButton />
+              <SearchField
+                formControl={{ sx: { width: '400px' } }}
+                searchField={{ productListRenderer }}
+              />
+              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+                <IconSvg src={iconCustomerService} size='large' />
+              </Fab>
+              <WishlistFab
+                icon={<IconSvg src={iconHeart} size='large' />}
+                BadgeProps={{ color: 'secondary' }}
+              />
+              <CustomerFab
+                guestHref='/account/signin'
+                authHref='/account'
+                BadgeProps={{ color: 'secondary' }}
+              />
+              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+              {cartEnabled && <PlaceholderFab />}
+            </DesktopNavActions>
+
+            <MobileTopRight>
+              <StoreSwitcherFab size='responsiveMedium' />
+              <SearchFab size='responsiveMedium' />
+            </MobileTopRight>
+          </>
+        }
+        footer={<Footer />}
+        cartFab={<CartFab BadgeProps={{ color: 'secondary' }} />}
+        menuFab={<NavigationFab onClick={() => selection.set([])} />}
+      >
+        {children}
+      </LayoutDefault>
+    </GlobalConfigProvider>
+  )
+}
diff --git a/examples/magento-storyblok/components/Layout/index.ts b/examples/magento-storyblok/components/Layout/index.ts
index 9a6efa3deb4..e420a1cb1c3 100644
--- a/examples/magento-storyblok/components/Layout/index.ts
+++ b/examples/magento-storyblok/components/Layout/index.ts
@@ -1,4 +1,7 @@
-export * from './LayoutNavigationLegacy'
+// Header layout: new split-component layout (Header / MenuOverlay / HeaderContainer) is the default.
+export * from './LayoutNavigation'
+// To revert to the legacy single-file layout, comment the line above and uncomment the one below:
+// export * from './LayoutNavigationLegacy'
 export * from './LayoutMinimal'
 export * from './LayoutOverlay'
 export * from './Layout.gql'

From 1589d5e0e3e16669e9c471571f4c2aa5e2f1f4ae Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 14:29:36 +0200
Subject: [PATCH 3/6] feat(header-v2): copy old LayoutDefault from next-ui to
 be used as new local LayoutDefault in new LayoutNavigation

Unchaged for now (except import paths). Changes coming in next commits.
---
 .../components/Layout/LayoutDefault.tsx       | 165 ++++++++++++++++++
 .../components/Layout/LayoutNavigation.tsx    |   3 +-
 .../components/Layout/LayoutDefault.tsx       | 165 ++++++++++++++++++
 .../components/Layout/LayoutNavigation.tsx    |   3 +-
 .../components/Layout/LayoutDefault.tsx       | 165 ++++++++++++++++++
 .../components/Layout/LayoutNavigation.tsx    |   3 +-
 6 files changed, 498 insertions(+), 6 deletions(-)
 create mode 100644 examples/magento-graphcms/components/Layout/LayoutDefault.tsx
 create mode 100644 examples/magento-open-source/components/Layout/LayoutDefault.tsx
 create mode 100644 examples/magento-storyblok/components/Layout/LayoutDefault.tsx

diff --git a/examples/magento-graphcms/components/Layout/LayoutDefault.tsx b/examples/magento-graphcms/components/Layout/LayoutDefault.tsx
new file mode 100644
index 00000000000..8f2fe5288e6
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/LayoutDefault.tsx
@@ -0,0 +1,165 @@
+import { useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { dvh } from '@graphcommerce/framer-utils'
+import {
+  Container,
+  extendableComponent,
+  LayoutProvider,
+  SkipLink,
+  sxx,
+  useFabSize,
+} from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import { useScroll, useTransform } from 'framer-motion'
+
+export type LayoutDefaultProps = {
+  className?: string
+  beforeHeader?: React.ReactNode
+  header: React.ReactNode
+  footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
+  children?: React.ReactNode
+  noSticky?: boolean
+  sx?: SxProps<Theme>
+} & OwnerState
+
+type OwnerState = {
+  noSticky?: boolean
+}
+const parts = ['root', 'fabs', 'header', 'children', 'footer'] as const
+const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
+  'LayoutDefault',
+  parts,
+)
+
+export function LayoutDefault(props: LayoutDefaultProps) {
+  const {
+    children,
+    header,
+    beforeHeader,
+    footer,
+    menuFab,
+    cartFab,
+    noSticky,
+    className,
+    sx = [],
+  } = props
+
+  const { scrollY } = useScroll()
+  const scrollYOffset = useTransform(
+    [scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
+
+  const classes = withState({ noSticky })
+  const fabIconSize = useFabSize('responsive')
+
+  return (
+    <Box
+      className={`${classes.root} ${className ?? ''}`}
+      sx={sxx(
+        (theme) => ({
+          minHeight: dvh(100),
+          '@supports (-webkit-touch-callout: none)': {
+            minHeight: '-webkit-fill-available',
+          },
+          display: 'grid',
+          gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
+          gridTemplateColumns: '100%',
+          background: theme.vars.palette.background.default,
+        }),
+        sx,
+      )}
+    >
+      <SkipLink />
+      <LayoutProvider scroll={scrollYOffset}>
+        {beforeHeader}
+        <Container
+          sizing='shell'
+          maxWidth={false}
+          component='header'
+          className={classes.header}
+          sx={(theme) => ({
+            zIndex: theme.zIndex.appBar - 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: theme.appShell.headerHeightSm,
+            pointerEvents: 'none',
+            '& > *': {
+              pointerEvents: 'all',
+            },
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.headerHeightMd,
+              top: 0,
+              display: 'flex',
+              justifyContent: 'left',
+              width: '100%',
+            },
+            '&.sticky': {
+              [theme.breakpoints.down('md')]: {
+                position: 'sticky',
+                top: 0,
+              },
+            },
+          })}
+        >
+          {header}
+        </Container>
+        {menuFab || cartFab ? (
+          <Container
+            sizing='shell'
+            maxWidth={false}
+            className={classes.fabs}
+            sx={(theme) => ({
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              height: 0,
+              zIndex: 'speedDial',
+              [theme.breakpoints.up('sm')]: {
+                position: 'sticky',
+                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 - calc(${fabIconSize} / 2))`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
+              },
+              [theme.breakpoints.down('md')]: {
+                position: 'fixed',
+                top: 'unset',
+                bottom: `calc(20px + ${fabIconSize})`,
+                padding: '0 20px',
+                '@media (max-height: 530px) and (orientation: portrait)': {
+                  display: 'none',
+                },
+              },
+            })}
+          >
+            {menuFab}
+            {cartFab && (
+              <Box
+                sx={(theme) => ({
+                  display: 'flex',
+                  flexDirection: 'row-reverse',
+                  gap: theme.spacings.sm,
+                  [theme.breakpoints.up('md')]: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                  },
+                })}
+              >
+                {cartFab}
+              </Box>
+            )}
+          </Container>
+        ) : (
+          <div />
+        )}
+        <div className={classes.children}>
+          <div id='skip-nav' tabIndex={-1} />
+          {children}
+        </div>
+        <div className={classes.footer}>{footer}</div>
+      </LayoutProvider>
+    </Box>
+  )
+}
diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
index 89a5fa95457..765473bbe82 100644
--- a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -6,8 +6,6 @@ import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlis
 import {
   DesktopNavActions,
   DesktopNavBar,
-  LayoutDefault,
-  LayoutDefaultProps,
   iconCustomerService,
   iconHeart,
   NavigationFab,
@@ -36,6 +34,7 @@ import {
   StoreSwitcherFab,
   StoreSwitcherMenuFabSecondaryItem,
 } from '@graphcommerce/magento-store'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 
 export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
diff --git a/examples/magento-open-source/components/Layout/LayoutDefault.tsx b/examples/magento-open-source/components/Layout/LayoutDefault.tsx
new file mode 100644
index 00000000000..8f2fe5288e6
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/LayoutDefault.tsx
@@ -0,0 +1,165 @@
+import { useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { dvh } from '@graphcommerce/framer-utils'
+import {
+  Container,
+  extendableComponent,
+  LayoutProvider,
+  SkipLink,
+  sxx,
+  useFabSize,
+} from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import { useScroll, useTransform } from 'framer-motion'
+
+export type LayoutDefaultProps = {
+  className?: string
+  beforeHeader?: React.ReactNode
+  header: React.ReactNode
+  footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
+  children?: React.ReactNode
+  noSticky?: boolean
+  sx?: SxProps<Theme>
+} & OwnerState
+
+type OwnerState = {
+  noSticky?: boolean
+}
+const parts = ['root', 'fabs', 'header', 'children', 'footer'] as const
+const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
+  'LayoutDefault',
+  parts,
+)
+
+export function LayoutDefault(props: LayoutDefaultProps) {
+  const {
+    children,
+    header,
+    beforeHeader,
+    footer,
+    menuFab,
+    cartFab,
+    noSticky,
+    className,
+    sx = [],
+  } = props
+
+  const { scrollY } = useScroll()
+  const scrollYOffset = useTransform(
+    [scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
+
+  const classes = withState({ noSticky })
+  const fabIconSize = useFabSize('responsive')
+
+  return (
+    <Box
+      className={`${classes.root} ${className ?? ''}`}
+      sx={sxx(
+        (theme) => ({
+          minHeight: dvh(100),
+          '@supports (-webkit-touch-callout: none)': {
+            minHeight: '-webkit-fill-available',
+          },
+          display: 'grid',
+          gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
+          gridTemplateColumns: '100%',
+          background: theme.vars.palette.background.default,
+        }),
+        sx,
+      )}
+    >
+      <SkipLink />
+      <LayoutProvider scroll={scrollYOffset}>
+        {beforeHeader}
+        <Container
+          sizing='shell'
+          maxWidth={false}
+          component='header'
+          className={classes.header}
+          sx={(theme) => ({
+            zIndex: theme.zIndex.appBar - 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: theme.appShell.headerHeightSm,
+            pointerEvents: 'none',
+            '& > *': {
+              pointerEvents: 'all',
+            },
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.headerHeightMd,
+              top: 0,
+              display: 'flex',
+              justifyContent: 'left',
+              width: '100%',
+            },
+            '&.sticky': {
+              [theme.breakpoints.down('md')]: {
+                position: 'sticky',
+                top: 0,
+              },
+            },
+          })}
+        >
+          {header}
+        </Container>
+        {menuFab || cartFab ? (
+          <Container
+            sizing='shell'
+            maxWidth={false}
+            className={classes.fabs}
+            sx={(theme) => ({
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              height: 0,
+              zIndex: 'speedDial',
+              [theme.breakpoints.up('sm')]: {
+                position: 'sticky',
+                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 - calc(${fabIconSize} / 2))`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
+              },
+              [theme.breakpoints.down('md')]: {
+                position: 'fixed',
+                top: 'unset',
+                bottom: `calc(20px + ${fabIconSize})`,
+                padding: '0 20px',
+                '@media (max-height: 530px) and (orientation: portrait)': {
+                  display: 'none',
+                },
+              },
+            })}
+          >
+            {menuFab}
+            {cartFab && (
+              <Box
+                sx={(theme) => ({
+                  display: 'flex',
+                  flexDirection: 'row-reverse',
+                  gap: theme.spacings.sm,
+                  [theme.breakpoints.up('md')]: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                  },
+                })}
+              >
+                {cartFab}
+              </Box>
+            )}
+          </Container>
+        ) : (
+          <div />
+        )}
+        <div className={classes.children}>
+          <div id='skip-nav' tabIndex={-1} />
+          {children}
+        </div>
+        <div className={classes.footer}>{footer}</div>
+      </LayoutProvider>
+    </Box>
+  )
+}
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
index 485654a5516..1d387590b10 100644
--- a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
@@ -9,7 +9,6 @@ import {
   StoreSwitcherMenuFabSecondaryItem,
 } from '@graphcommerce/magento-store'
 import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
-import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
 import {
   DarkLightModeMenuSecondaryItem,
   DesktopNavActions,
@@ -19,7 +18,6 @@ import {
   iconCustomerService,
   iconHeart,
   IconSvg,
-  LayoutDefault,
   MenuFabSecondaryItem,
   MobileTopRight,
   NavigationFab,
@@ -36,6 +34,7 @@ import { useRouter } from 'next/router'
 import { productListRenderer } from '../ProductListItems/productListRenderer'
 import { Footer } from './Footer'
 import type { LayoutQuery } from './Layout.gql'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
 
 export type LayoutNavigationProps = LayoutQuery &
diff --git a/examples/magento-storyblok/components/Layout/LayoutDefault.tsx b/examples/magento-storyblok/components/Layout/LayoutDefault.tsx
new file mode 100644
index 00000000000..8f2fe5288e6
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/LayoutDefault.tsx
@@ -0,0 +1,165 @@
+import { useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { dvh } from '@graphcommerce/framer-utils'
+import {
+  Container,
+  extendableComponent,
+  LayoutProvider,
+  SkipLink,
+  sxx,
+  useFabSize,
+} from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import { useScroll, useTransform } from 'framer-motion'
+
+export type LayoutDefaultProps = {
+  className?: string
+  beforeHeader?: React.ReactNode
+  header: React.ReactNode
+  footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
+  children?: React.ReactNode
+  noSticky?: boolean
+  sx?: SxProps<Theme>
+} & OwnerState
+
+type OwnerState = {
+  noSticky?: boolean
+}
+const parts = ['root', 'fabs', 'header', 'children', 'footer'] as const
+const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof parts>(
+  'LayoutDefault',
+  parts,
+)
+
+export function LayoutDefault(props: LayoutDefaultProps) {
+  const {
+    children,
+    header,
+    beforeHeader,
+    footer,
+    menuFab,
+    cartFab,
+    noSticky,
+    className,
+    sx = [],
+  } = props
+
+  const { scrollY } = useScroll()
+  const scrollYOffset = useTransform(
+    [scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
+
+  const classes = withState({ noSticky })
+  const fabIconSize = useFabSize('responsive')
+
+  return (
+    <Box
+      className={`${classes.root} ${className ?? ''}`}
+      sx={sxx(
+        (theme) => ({
+          minHeight: dvh(100),
+          '@supports (-webkit-touch-callout: none)': {
+            minHeight: '-webkit-fill-available',
+          },
+          display: 'grid',
+          gridTemplateRows: { xs: 'auto 1fr auto', md: 'auto auto 1fr auto' },
+          gridTemplateColumns: '100%',
+          background: theme.vars.palette.background.default,
+        }),
+        sx,
+      )}
+    >
+      <SkipLink />
+      <LayoutProvider scroll={scrollYOffset}>
+        {beforeHeader}
+        <Container
+          sizing='shell'
+          maxWidth={false}
+          component='header'
+          className={classes.header}
+          sx={(theme) => ({
+            zIndex: theme.zIndex.appBar - 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: theme.appShell.headerHeightSm,
+            pointerEvents: 'none',
+            '& > *': {
+              pointerEvents: 'all',
+            },
+            [theme.breakpoints.up('md')]: {
+              height: theme.appShell.headerHeightMd,
+              top: 0,
+              display: 'flex',
+              justifyContent: 'left',
+              width: '100%',
+            },
+            '&.sticky': {
+              [theme.breakpoints.down('md')]: {
+                position: 'sticky',
+                top: 0,
+              },
+            },
+          })}
+        >
+          {header}
+        </Container>
+        {menuFab || cartFab ? (
+          <Container
+            sizing='shell'
+            maxWidth={false}
+            className={classes.fabs}
+            sx={(theme) => ({
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              height: 0,
+              zIndex: 'speedDial',
+              [theme.breakpoints.up('sm')]: {
+                position: 'sticky',
+                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 - calc(${fabIconSize} / 2))`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
+              },
+              [theme.breakpoints.down('md')]: {
+                position: 'fixed',
+                top: 'unset',
+                bottom: `calc(20px + ${fabIconSize})`,
+                padding: '0 20px',
+                '@media (max-height: 530px) and (orientation: portrait)': {
+                  display: 'none',
+                },
+              },
+            })}
+          >
+            {menuFab}
+            {cartFab && (
+              <Box
+                sx={(theme) => ({
+                  display: 'flex',
+                  flexDirection: 'row-reverse',
+                  gap: theme.spacings.sm,
+                  [theme.breakpoints.up('md')]: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                  },
+                })}
+              >
+                {cartFab}
+              </Box>
+            )}
+          </Container>
+        ) : (
+          <div />
+        )}
+        <div className={classes.children}>
+          <div id='skip-nav' tabIndex={-1} />
+          {children}
+        </div>
+        <div className={classes.footer}>{footer}</div>
+      </LayoutProvider>
+    </Box>
+  )
+}
diff --git a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
index d12d98866fa..039c5a8ead1 100644
--- a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
@@ -8,7 +8,6 @@ import {
   StoreSwitcherMenuFabSecondaryItem,
 } from '@graphcommerce/magento-store'
 import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
-import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
 import {
   DarkLightModeMenuSecondaryItem,
   DesktopNavActions,
@@ -18,7 +17,6 @@ import {
   iconCustomerService,
   iconHeart,
   IconSvg,
-  LayoutDefault,
   MenuFabSecondaryItem,
   MobileTopRight,
   NavigationFab,
@@ -37,6 +35,7 @@ import { GlobalConfigProvider } from '../Storyblok/GlobalConfigProvider'
 import type { StoryblokGlobalConfig } from '../Storyblok/types'
 import { Footer } from './Footer'
 import type { LayoutQuery } from './Layout.gql'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
 
 export type LayoutNavigationProps = LayoutQuery &

From 697c282ba8bfd7a5e2d74538cfbe6713fa406b72 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 15:21:46 +0200
Subject: [PATCH 4/6] feat(header-v2): split LayoutNavigation into more usable
 / composable components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LayoutNavigation was a big file that mixed the navigation overlay,
the header content, and the layout shell.
Customizing the header — sticky behavior, owning the container styling,
or adding a beforeHeader slot — required forking the whole file or
copying chunks of @graphcommerce/next-ui's LayoutDefault.

The header is now four reusable pieces:

  - HeaderContainer  the <Container component='header'> wrapper, lifted
                     out of LayoutDefault so each project owns its
                     header container.
  - Header           the header content (Logo, DesktopNavBar,
                     DesktopNavActions, MobileTopRight).
  - MenuOverlay      the NavigationProvider + NavigationOverlay.
  - LayoutDefault    a local copy that renders the `header` slot raw,
                     since the wrapping now lives in HeaderContainer.

Keeping LayoutDefault as a project-local copy makes the layout shell
itself customizable: tweaking the grid, the fab container, the
beforeHeader slot or the sticky behavior no longer requires patching
@graphcommerce/next-ui or copying the file — the example owns it.
Combined with the extracted Header / MenuOverlay / HeaderContainer,
projects can override any single piece without forking the rest.

LayoutNavigation becomes a slim orchestrator that composes them.
LayoutMinimal is updated to use the same local LayoutDefault +
HeaderContainer so both layouts share the canonical header pattern.

The previous monolithic version is kept as LayoutNavigationLegacy.tsx.
The active version is selected with a one-line switch in
components/Layout/index.ts:

    export * from './LayoutNavigation'
    // export * from './LayoutNavigationLegacy'

There is no visual change in the new default path:
HeaderContainer carries the same styling that the
header slot of next-ui's LayoutDefault used to apply.
---
 .changeset/red-rooms-press.md                 |  10 ++
 .../components/Layout/Header.tsx              |  82 +++++++++
 .../components/Layout/HeaderContainer.tsx     |  40 +++++
 .../components/Layout/LayoutDefault.tsx       |  33 +---
 .../components/Layout/LayoutMinimal.tsx       |   9 +-
 .../components/Layout/LayoutNavigation.tsx    | 152 +----------------
 .../components/Layout/MenuOverlay.tsx         |  87 ++++++++++
 .../components/Layout/Header.tsx              |  84 ++++++++++
 .../components/Layout/HeaderContainer.tsx     |  45 +++++
 .../components/Layout/LayoutDefault.tsx       |  33 +---
 .../components/Layout/LayoutMinimal.tsx       |  10 +-
 .../components/Layout/LayoutNavigation.tsx    | 150 +----------------
 .../components/Layout/MenuOverlay.tsx         |  86 ++++++++++
 .../components/Layout/Header.tsx              |  89 ++++++++++
 .../components/Layout/HeaderContainer.tsx     |  45 +++++
 .../components/Layout/LayoutDefault.tsx       |  33 +---
 .../components/Layout/LayoutMinimal.tsx       |  10 +-
 .../components/Layout/LayoutNavigation.tsx    | 156 +-----------------
 .../components/Layout/MenuOverlay.tsx         |  87 ++++++++++
 .../components/LayoutDefault.tsx              |   8 +
 20 files changed, 706 insertions(+), 543 deletions(-)
 create mode 100644 .changeset/red-rooms-press.md
 create mode 100644 examples/magento-graphcms/components/Layout/Header.tsx
 create mode 100644 examples/magento-graphcms/components/Layout/HeaderContainer.tsx
 create mode 100644 examples/magento-graphcms/components/Layout/MenuOverlay.tsx
 create mode 100644 examples/magento-open-source/components/Layout/Header.tsx
 create mode 100644 examples/magento-open-source/components/Layout/HeaderContainer.tsx
 create mode 100644 examples/magento-open-source/components/Layout/MenuOverlay.tsx
 create mode 100644 examples/magento-storyblok/components/Layout/Header.tsx
 create mode 100644 examples/magento-storyblok/components/Layout/HeaderContainer.tsx
 create mode 100644 examples/magento-storyblok/components/Layout/MenuOverlay.tsx

diff --git a/.changeset/red-rooms-press.md b/.changeset/red-rooms-press.md
new file mode 100644
index 00000000000..484a144b374
--- /dev/null
+++ b/.changeset/red-rooms-press.md
@@ -0,0 +1,10 @@
+---
+'@graphcommerce/magento-open-source': minor
+'@graphcommerce/magento-storyblok': minor
+'@graphcommerce/magento-graphcms': minor
+'@graphcommerce/next-ui': minor
+---
+
+Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`).
+The old version is preserved as `LayoutNavigationLegacy.tsx` and swappable via a one-line edit in `components/Layout/index.ts`. 
+`LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated` — the canonical version now lives locally in `components/Layout/`.
diff --git a/examples/magento-graphcms/components/Layout/Header.tsx b/examples/magento-graphcms/components/Layout/Header.tsx
new file mode 100644
index 00000000000..9d9886d6232
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/Header.tsx
@@ -0,0 +1,82 @@
+import { useCartEnabled } from '@graphcommerce/magento-cart'
+import { CustomerFab } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import { StoreSwitcherButton, StoreSwitcherFab } from '@graphcommerce/magento-store'
+import { WishlistFab } from '@graphcommerce/magento-wishlist'
+import {
+  DesktopNavActions,
+  DesktopNavBar,
+  DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MobileTopRight,
+  PlaceholderFab,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+import { Fab } from '@mui/material'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { HeaderContainer } from './HeaderContainer'
+import type { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function Header(props: HeaderProps) {
+  const { menu, selection } = props
+  const cartEnabled = useCartEnabled()
+
+  return (
+    <HeaderContainer>
+      <Logo />
+
+      <DesktopNavBar>
+        {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+          <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+            {item?.name}
+          </DesktopNavItem>
+        ))}
+
+        <DesktopNavItem
+          onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+          onKeyUp={(evt) => {
+            if (evt.key === 'Enter') {
+              selection.set([menu?.items?.[0]?.uid || ''])
+            }
+          }}
+          tabIndex={0}
+        >
+          {menu?.items?.[0]?.name}
+          <IconSvg src={iconChevronDown} />
+        </DesktopNavItem>
+
+        <DesktopNavItem href='/blog'>
+          <Trans>Blog</Trans>
+        </DesktopNavItem>
+      </DesktopNavBar>
+
+      <DesktopNavActions>
+        <SearchField
+          formControl={{ sx: { width: '400px' } }}
+          searchField={{ productListRenderer }}
+        />
+        <StoreSwitcherButton />
+        <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+          <IconSvg src={iconCustomerService} size='large' />
+        </Fab>
+        <WishlistFab icon={<IconSvg src={iconHeart} size='large' />} />
+        <CustomerFab guestHref='/account/signin' authHref='/account' />
+        {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+        {cartEnabled && <PlaceholderFab />}
+      </DesktopNavActions>
+
+      <MobileTopRight>
+        <StoreSwitcherFab size='responsiveMedium' />
+        <SearchFab size='responsiveMedium' />
+      </MobileTopRight>
+    </HeaderContainer>
+  )
+}
diff --git a/examples/magento-graphcms/components/Layout/HeaderContainer.tsx b/examples/magento-graphcms/components/Layout/HeaderContainer.tsx
new file mode 100644
index 00000000000..790de26bde8
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/HeaderContainer.tsx
@@ -0,0 +1,40 @@
+import type { ContainerSizingProps } from '@graphcommerce/next-ui'
+import { Container, sxx } from '@graphcommerce/next-ui'
+
+export type HeaderContainerProps = ContainerSizingProps
+
+export function HeaderContainer(props: HeaderContainerProps) {
+  const { children, sx, ...containerProps } = props
+  
+  return (
+    <Container
+      sizing='shell'
+      maxWidth={false}
+      component='header'
+      {...containerProps}
+      sx={sxx(
+        (theme) => ({
+          zIndex: theme.zIndex.appBar - 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: theme.appShell.headerHeightSm,
+          pointerEvents: 'none',
+          '& > *': {
+            pointerEvents: 'all',
+          },
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.headerHeightMd,
+            top: 0,
+            display: 'flex',
+            justifyContent: 'left',
+            width: '100%',
+          },
+        }),
+        sx,
+      )}
+    >
+      {children}
+    </Container>
+  )
+}
diff --git a/examples/magento-graphcms/components/Layout/LayoutDefault.tsx b/examples/magento-graphcms/components/Layout/LayoutDefault.tsx
index 8f2fe5288e6..2de89aaf05d 100644
--- a/examples/magento-graphcms/components/Layout/LayoutDefault.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutDefault.tsx
@@ -75,38 +75,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
-        <Container
-          sizing='shell'
-          maxWidth={false}
-          component='header'
-          className={classes.header}
-          sx={(theme) => ({
-            zIndex: theme.zIndex.appBar - 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: theme.appShell.headerHeightSm,
-            pointerEvents: 'none',
-            '& > *': {
-              pointerEvents: 'all',
-            },
-            [theme.breakpoints.up('md')]: {
-              height: theme.appShell.headerHeightMd,
-              top: 0,
-              display: 'flex',
-              justifyContent: 'left',
-              width: '100%',
-            },
-            '&.sticky': {
-              [theme.breakpoints.down('md')]: {
-                position: 'sticky',
-                top: 0,
-              },
-            },
-          })}
-        >
-          {header}
-        </Container>
+        {header}
         {menuFab || cartFab ? (
           <Container
             sizing='shell'
diff --git a/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx b/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
index fd013541eaf..714433b4f1c 100644
--- a/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
@@ -1,6 +1,7 @@
-import { LayoutDefault, LayoutDefaultProps } from '@graphcommerce/next-ui'
 import { Footer } from './Footer'
+import { HeaderContainer } from './HeaderContainer'
 import { LayoutQuery } from './Layout.gql'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
 
 export type LayoutMinimalProps = LayoutQuery &
@@ -12,7 +13,11 @@ export function LayoutMinimal(props: LayoutMinimalProps) {
   return (
     <LayoutDefault
       {...uiProps}
-      header={<Logo />}
+      header={
+        <HeaderContainer>
+          <Logo />
+        </HeaderContainer>
+      }
       footer={<Footer footer={footer} />}
       sx={(theme) => ({ background: theme.vars.palette.background.paper })}
     >
diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
index 765473bbe82..56bcb676333 100644
--- a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -1,40 +1,11 @@
-import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
-import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
-import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
-import { SearchFab, SearchField } from '@graphcommerce/magento-search'
-import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
-import {
-  DesktopNavActions,
-  DesktopNavBar,
-  iconCustomerService,
-  iconHeart,
-  NavigationFab,
-  MenuFabSecondaryItem,
-  PlaceholderFab,
-  IconSvg,
-  DesktopNavItem,
-  DarkLightModeMenuSecondaryItem,
-  iconChevronDown,
-  NavigationProvider,
-  NavigationOverlay,
-  useNavigationSelection,
-  useMemoDeep,
-  MobileTopRight,
-} from '@graphcommerce/next-ui'
-import { t } from '@lingui/core/macro'
-import { Trans } from '@lingui/react/macro'
-import { Divider, Fab } from '@mui/material'
+import { CartFab } from '@graphcommerce/magento-cart'
+import { NavigationFab, useNavigationSelection } from '@graphcommerce/next-ui'
 import { useRouter } from 'next/router'
 import { Footer } from './Footer'
-import { LayoutQuery } from './Layout.gql'
-import { Logo } from './Logo'
-import { productListRenderer } from '../ProductListItems/productListRenderer'
-import {
-  StoreSwitcherButton,
-  StoreSwitcherFab,
-  StoreSwitcherMenuFabSecondaryItem,
-} from '@graphcommerce/magento-store'
+import { Header } from './Header'
+import type { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
+import { MenuOverlay } from './MenuOverlay'
 
 export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
@@ -44,124 +15,15 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
 
   const selection = useNavigationSelection()
   const router = useRouter()
-  const cartEnabled = useCartEnabled()
 
   return (
     <>
-      <NavigationProvider
-        selection={selection}
-        items={useMemoDeep(
-          () => [
-            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
-            {
-              id: 'manual-item-one',
-              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
-            },
-            {
-              id: 'manual-item-two',
-              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
-            },
-            ...magentoMenuToNavigation(menu, true),
-            { id: 'blog', name: 'Blog', href: '/blog' },
-            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
-            <CustomerMenuFabItem
-              onClick={() => selection.set(false)}
-              key='account'
-              guestHref='/account/signin'
-              authHref='/account'
-            >
-              <Trans>Account</Trans>
-            </CustomerMenuFabItem>,
-            <MenuFabSecondaryItem
-              key='service'
-              icon={<IconSvg src={iconCustomerService} size='medium' />}
-              href='/service'
-            >
-              <Trans>Customer Service</Trans>
-            </MenuFabSecondaryItem>,
-            <WishlistMenuFabItem
-              onClick={() => selection.set(false)}
-              key='wishlist'
-              icon={<IconSvg src={iconHeart} size='medium' />}
-            >
-              <Trans>Wishlist</Trans>
-            </WishlistMenuFabItem>,
-            <DarkLightModeMenuSecondaryItem key='darkmode' />,
-            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
-          ],
-          [menu, selection],
-        )}
-      >
-        <NavigationOverlay
-          stretchColumns={false}
-          variantSm='left'
-          sizeSm='full'
-          justifySm='start'
-          itemWidthSm='70vw'
-          variantMd='left'
-          sizeMd='full'
-          justifyMd='start'
-          itemWidthMd='230px'
-          mouseEvent='hover'
-          itemPadding='md'
-        />
-      </NavigationProvider>
+      <MenuOverlay menu={menu} selection={selection} />
 
       <LayoutDefault
         {...uiProps}
         noSticky={router.asPath.split('?')[0] === '/'}
-        header={
-          <>
-            <Logo />
-
-            <DesktopNavBar>
-              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
-                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
-                  {item?.name}
-                </DesktopNavItem>
-              ))}
-
-              <DesktopNavItem
-                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
-                onKeyUp={(evt) => {
-                  if (evt.key === 'Enter') {
-                    selection.set([menu?.items?.[0]?.uid || ''])
-                  }
-                }}
-                tabIndex={0}
-              >
-                {menu?.items?.[0]?.name}
-                <IconSvg src={iconChevronDown} />
-              </DesktopNavItem>
-
-              <DesktopNavItem href='/blog'>
-                <Trans>Blog</Trans>
-              </DesktopNavItem>
-            </DesktopNavBar>
-
-            <DesktopNavActions>
-              <SearchField
-                formControl={{ sx: { width: '400px' } }}
-                searchField={{ productListRenderer }}
-              />
-              <StoreSwitcherButton />
-              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
-                <IconSvg src={iconCustomerService} size='large' />
-              </Fab>
-              <WishlistFab icon={<IconSvg src={iconHeart} size='large' />} />
-              <CustomerFab guestHref='/account/signin' authHref='/account' />
-              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
-              {cartEnabled && <PlaceholderFab />}
-            </DesktopNavActions>
-
-            <MobileTopRight>
-              <StoreSwitcherFab size='responsiveMedium' />
-              <SearchFab size='responsiveMedium' />
-            </MobileTopRight>
-          </>
-        }
+        header={<Header menu={menu} selection={selection} />}
         footer={<Footer footer={footer} />}
         cartFab={<CartFab />}
         menuFab={<NavigationFab onClick={() => selection.set([])} />}
diff --git a/examples/magento-graphcms/components/Layout/MenuOverlay.tsx b/examples/magento-graphcms/components/Layout/MenuOverlay.tsx
new file mode 100644
index 00000000000..735527190a3
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/MenuOverlay.tsx
@@ -0,0 +1,87 @@
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { StoreSwitcherMenuFabSecondaryItem } from '@graphcommerce/magento-store'
+import { WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import {
+  DarkLightModeMenuSecondaryItem,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MenuFabSecondaryItem,
+  NavigationOverlay,
+  NavigationProvider,
+  useMemoDeep,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
+import { Divider } from '@mui/material'
+import type { LayoutQuery } from './Layout.gql'
+
+export type MenuOverlayProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function MenuOverlay(props: MenuOverlayProps) {
+  const { menu, selection } = props
+
+  return (
+    <NavigationProvider
+      selection={selection}
+      items={useMemoDeep(
+        () => [
+          { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+          {
+            id: 'manual-item-one',
+            href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+          },
+          {
+            id: 'manual-item-two',
+            href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+          },
+          ...magentoMenuToNavigation(menu, true),
+          { id: 'blog', name: 'Blog', href: '/blog' },
+          <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+          <CustomerMenuFabItem
+            onClick={() => selection.set(false)}
+            key='account'
+            guestHref='/account/signin'
+            authHref='/account'
+          >
+            <Trans>Account</Trans>
+          </CustomerMenuFabItem>,
+          <MenuFabSecondaryItem
+            key='service'
+            icon={<IconSvg src={iconCustomerService} size='medium' />}
+            href='/service'
+          >
+            <Trans>Customer Service</Trans>
+          </MenuFabSecondaryItem>,
+          <WishlistMenuFabItem
+            onClick={() => selection.set(false)}
+            key='wishlist'
+            icon={<IconSvg src={iconHeart} size='medium' />}
+          >
+            <Trans>Wishlist</Trans>
+          </WishlistMenuFabItem>,
+          <DarkLightModeMenuSecondaryItem key='darkmode' />,
+          <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+        ],
+        [menu, selection],
+      )}
+    >
+      <NavigationOverlay
+        stretchColumns={false}
+        variantSm='left'
+        sizeSm='full'
+        justifySm='start'
+        itemWidthSm='70vw'
+        variantMd='left'
+        sizeMd='full'
+        justifyMd='start'
+        itemWidthMd='230px'
+        mouseEvent='hover'
+        itemPadding='md'
+      />
+    </NavigationProvider>
+  )
+}
diff --git a/examples/magento-open-source/components/Layout/Header.tsx b/examples/magento-open-source/components/Layout/Header.tsx
new file mode 100644
index 00000000000..eb331b679b9
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/Header.tsx
@@ -0,0 +1,84 @@
+import { useCartEnabled } from '@graphcommerce/magento-cart'
+import { CustomerFab } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import { StoreSwitcherButton, StoreSwitcherFab } from '@graphcommerce/magento-store'
+import { WishlistFab } from '@graphcommerce/magento-wishlist'
+import {
+  DesktopNavActions,
+  DesktopNavBar,
+  DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MobileTopRight,
+  PlaceholderFab,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Fab } from '@mui/material'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { HeaderContainer } from './HeaderContainer'
+import type { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function Header(props: HeaderProps) {
+  const { menu, selection } = props
+  const cartEnabled = useCartEnabled()
+
+  return (
+    <HeaderContainer>
+      <Logo />
+
+      <DesktopNavBar>
+        {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+          <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+            {item?.name}
+          </DesktopNavItem>
+        ))}
+
+        <DesktopNavItem
+          onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+          onKeyUp={(evt) => {
+            if (evt.key === 'Enter') {
+              selection.set([menu?.items?.[0]?.uid || ''])
+            }
+          }}
+          tabIndex={0}
+        >
+          {menu?.items?.[0]?.name}
+          <IconSvg src={iconChevronDown} />
+        </DesktopNavItem>
+      </DesktopNavBar>
+
+      <DesktopNavActions>
+        <StoreSwitcherButton />
+        <SearchField
+          formControl={{ sx: { width: '400px' } }}
+          searchField={{ productListRenderer }}
+        />
+        <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+          <IconSvg src={iconCustomerService} size='large' />
+        </Fab>
+        <WishlistFab
+          icon={<IconSvg src={iconHeart} size='large' />}
+          BadgeProps={{ color: 'secondary' }}
+        />
+        <CustomerFab
+          guestHref='/account/signin'
+          authHref='/account'
+          BadgeProps={{ color: 'secondary' }}
+        />
+        {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+        {cartEnabled && <PlaceholderFab />}
+      </DesktopNavActions>
+
+      <MobileTopRight>
+        <StoreSwitcherFab size='responsiveMedium' />
+        <SearchFab size='responsiveMedium' />
+      </MobileTopRight>
+    </HeaderContainer>
+  )
+}
diff --git a/examples/magento-open-source/components/Layout/HeaderContainer.tsx b/examples/magento-open-source/components/Layout/HeaderContainer.tsx
new file mode 100644
index 00000000000..dcb369ce2a5
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/HeaderContainer.tsx
@@ -0,0 +1,45 @@
+import type { ContainerSizingProps } from '@graphcommerce/next-ui'
+import { Container, sxx } from '@graphcommerce/next-ui'
+
+export type HeaderContainerProps = ContainerSizingProps
+
+export function HeaderContainer(props: HeaderContainerProps) {
+  const { children, sx, ...containerProps } = props
+  return (
+    <Container
+      sizing='shell'
+      maxWidth={false}
+      component='header'
+      {...containerProps}
+      sx={sxx(
+        (theme) => ({
+          zIndex: theme.zIndex.appBar - 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: theme.appShell.headerHeightSm,
+          pointerEvents: 'none',
+          '& > *': {
+            pointerEvents: 'all',
+          },
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.headerHeightMd,
+            top: 0,
+            display: 'flex',
+            justifyContent: 'left',
+            width: '100%',
+          },
+          '&.sticky': {
+            [theme.breakpoints.down('md')]: {
+              position: 'sticky',
+              top: 0,
+            },
+          },
+        }),
+        sx,
+      )}
+    >
+      {children}
+    </Container>
+  )
+}
diff --git a/examples/magento-open-source/components/Layout/LayoutDefault.tsx b/examples/magento-open-source/components/Layout/LayoutDefault.tsx
index 8f2fe5288e6..2de89aaf05d 100644
--- a/examples/magento-open-source/components/Layout/LayoutDefault.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutDefault.tsx
@@ -75,38 +75,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
-        <Container
-          sizing='shell'
-          maxWidth={false}
-          component='header'
-          className={classes.header}
-          sx={(theme) => ({
-            zIndex: theme.zIndex.appBar - 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: theme.appShell.headerHeightSm,
-            pointerEvents: 'none',
-            '& > *': {
-              pointerEvents: 'all',
-            },
-            [theme.breakpoints.up('md')]: {
-              height: theme.appShell.headerHeightMd,
-              top: 0,
-              display: 'flex',
-              justifyContent: 'left',
-              width: '100%',
-            },
-            '&.sticky': {
-              [theme.breakpoints.down('md')]: {
-                position: 'sticky',
-                top: 0,
-              },
-            },
-          })}
-        >
-          {header}
-        </Container>
+        {header}
         {menuFab || cartFab ? (
           <Container
             sizing='shell'
diff --git a/examples/magento-open-source/components/Layout/LayoutMinimal.tsx b/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
index 53019aab5f6..c526246b033 100644
--- a/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
@@ -1,9 +1,9 @@
 import { CmsBlock } from '@graphcommerce/magento-cms'
-import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
-import { LayoutDefault } from '@graphcommerce/next-ui'
 import { productListRenderer } from '../ProductListItems'
 import { Footer } from './Footer'
+import { HeaderContainer } from './HeaderContainer'
 import type { LayoutQuery } from './Layout.gql'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
 
 export type LayoutMinimalProps = LayoutQuery &
@@ -17,7 +17,11 @@ export function LayoutMinimal(props: LayoutMinimalProps) {
   return (
     <LayoutDefault
       {...uiProps}
-      header={<Logo />}
+      header={
+        <HeaderContainer>
+          <Logo />
+        </HeaderContainer>
+      }
       footer={
         <Footer
           socialLinks={
diff --git a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
index 1d387590b10..f2b13e782d3 100644
--- a/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutNavigation.tsx
@@ -1,41 +1,13 @@
-import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
-import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CartFab } from '@graphcommerce/magento-cart'
 import { CmsBlock } from '@graphcommerce/magento-cms'
-import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
-import { SearchFab, SearchField } from '@graphcommerce/magento-search'
-import {
-  StoreSwitcherButton,
-  StoreSwitcherFab,
-  StoreSwitcherMenuFabSecondaryItem,
-} from '@graphcommerce/magento-store'
-import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
-import {
-  DarkLightModeMenuSecondaryItem,
-  DesktopNavActions,
-  DesktopNavBar,
-  DesktopNavItem,
-  iconChevronDown,
-  iconCustomerService,
-  iconHeart,
-  IconSvg,
-  MenuFabSecondaryItem,
-  MobileTopRight,
-  NavigationFab,
-  NavigationOverlay,
-  NavigationProvider,
-  PlaceholderFab,
-  useMemoDeep,
-  useNavigationSelection,
-} from '@graphcommerce/next-ui'
-import { t } from '@lingui/core/macro'
-import { Trans } from '@lingui/react/macro'
-import { Divider, Fab } from '@mui/material'
+import { NavigationFab, useNavigationSelection } from '@graphcommerce/next-ui'
 import { useRouter } from 'next/router'
 import { productListRenderer } from '../ProductListItems/productListRenderer'
 import { Footer } from './Footer'
+import { Header } from './Header'
 import type { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
-import { Logo } from './Logo'
+import { MenuOverlay } from './MenuOverlay'
 
 export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'>
@@ -46,126 +18,16 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
   const selection = useNavigationSelection()
   const router = useRouter()
 
-  const cartEnabled = useCartEnabled()
-
   const footerBlock = cmsBlocks?.items?.find((item) => item?.identifier === 'footer_links_block')
 
   return (
     <>
-      <NavigationProvider
-        selection={selection}
-        items={useMemoDeep(
-          () => [
-            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
-            {
-              id: 'manual-item-one',
-              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
-            },
-            {
-              id: 'manual-item-two',
-              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
-            },
-            ...magentoMenuToNavigation(menu, true),
-            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
-            <CustomerMenuFabItem
-              onClick={() => selection.set(false)}
-              key='account'
-              guestHref='/account/signin'
-              authHref='/account'
-            >
-              <Trans>Account</Trans>
-            </CustomerMenuFabItem>,
-            <MenuFabSecondaryItem
-              key='service'
-              icon={<IconSvg src={iconCustomerService} size='medium' />}
-              href='/service'
-            >
-              <Trans>Customer Service</Trans>
-            </MenuFabSecondaryItem>,
-            <WishlistMenuFabItem
-              onClick={() => selection.set(false)}
-              key='wishlist'
-              icon={<IconSvg src={iconHeart} size='medium' />}
-            >
-              <Trans>Wishlist</Trans>
-            </WishlistMenuFabItem>,
-            <DarkLightModeMenuSecondaryItem key='darkmode' />,
-            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
-          ],
-          [menu, selection],
-        )}
-      >
-        <NavigationOverlay
-          stretchColumns={false}
-          variantSm='left'
-          sizeSm='full'
-          justifySm='start'
-          itemWidthSm='70vw'
-          variantMd='left'
-          sizeMd='full'
-          justifyMd='start'
-          itemWidthMd='230px'
-          mouseEvent='hover'
-          itemPadding='md'
-        />
-      </NavigationProvider>
+      <MenuOverlay menu={menu} selection={selection} />
 
       <LayoutDefault
         {...uiProps}
         noSticky={router.asPath.split('?')[0] === '/'}
-        header={
-          <>
-            <Logo />
-
-            <DesktopNavBar>
-              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
-                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
-                  {item?.name}
-                </DesktopNavItem>
-              ))}
-              <DesktopNavItem
-                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
-                onKeyUp={(evt) => {
-                  if (evt.key === 'Enter') {
-                    selection.set([menu?.items?.[0]?.uid || ''])
-                  }
-                }}
-                tabIndex={0}
-              >
-                {menu?.items?.[0]?.name}
-                <IconSvg src={iconChevronDown} />
-              </DesktopNavItem>
-            </DesktopNavBar>
-            <DesktopNavActions>
-              <StoreSwitcherButton />
-              <SearchField
-                formControl={{ sx: { width: '400px' } }}
-                searchField={{ productListRenderer }}
-              />
-              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
-                <IconSvg src={iconCustomerService} size='large' />
-              </Fab>
-              <WishlistFab
-                icon={<IconSvg src={iconHeart} size='large' />}
-                BadgeProps={{ color: 'secondary' }}
-              />
-              <CustomerFab
-                guestHref='/account/signin'
-                authHref='/account'
-                BadgeProps={{ color: 'secondary' }}
-              />
-              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
-              {cartEnabled && <PlaceholderFab />}
-            </DesktopNavActions>
-
-            <MobileTopRight>
-              <StoreSwitcherFab size='responsiveMedium' />
-              <SearchFab size='responsiveMedium' />
-            </MobileTopRight>
-          </>
-        }
+        header={<Header menu={menu} selection={selection} />}
         footer={
           <Footer
             socialLinks={
diff --git a/examples/magento-open-source/components/Layout/MenuOverlay.tsx b/examples/magento-open-source/components/Layout/MenuOverlay.tsx
new file mode 100644
index 00000000000..dee68be639c
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/MenuOverlay.tsx
@@ -0,0 +1,86 @@
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { StoreSwitcherMenuFabSecondaryItem } from '@graphcommerce/magento-store'
+import { WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import {
+  DarkLightModeMenuSecondaryItem,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MenuFabSecondaryItem,
+  NavigationOverlay,
+  NavigationProvider,
+  useMemoDeep,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
+import { Divider } from '@mui/material'
+import type { LayoutQuery } from './Layout.gql'
+
+export type MenuOverlayProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function MenuOverlay(props: MenuOverlayProps) {
+  const { menu, selection } = props
+
+  return (
+    <NavigationProvider
+      selection={selection}
+      items={useMemoDeep(
+        () => [
+          { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+          {
+            id: 'manual-item-one',
+            href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+          },
+          {
+            id: 'manual-item-two',
+            href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+          },
+          ...magentoMenuToNavigation(menu, true),
+          <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+          <CustomerMenuFabItem
+            onClick={() => selection.set(false)}
+            key='account'
+            guestHref='/account/signin'
+            authHref='/account'
+          >
+            <Trans>Account</Trans>
+          </CustomerMenuFabItem>,
+          <MenuFabSecondaryItem
+            key='service'
+            icon={<IconSvg src={iconCustomerService} size='medium' />}
+            href='/service'
+          >
+            <Trans>Customer Service</Trans>
+          </MenuFabSecondaryItem>,
+          <WishlistMenuFabItem
+            onClick={() => selection.set(false)}
+            key='wishlist'
+            icon={<IconSvg src={iconHeart} size='medium' />}
+          >
+            <Trans>Wishlist</Trans>
+          </WishlistMenuFabItem>,
+          <DarkLightModeMenuSecondaryItem key='darkmode' />,
+          <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+        ],
+        [menu, selection],
+      )}
+    >
+      <NavigationOverlay
+        stretchColumns={false}
+        variantSm='left'
+        sizeSm='full'
+        justifySm='start'
+        itemWidthSm='70vw'
+        variantMd='left'
+        sizeMd='full'
+        justifyMd='start'
+        itemWidthMd='230px'
+        mouseEvent='hover'
+        itemPadding='md'
+      />
+    </NavigationProvider>
+  )
+}
diff --git a/examples/magento-storyblok/components/Layout/Header.tsx b/examples/magento-storyblok/components/Layout/Header.tsx
new file mode 100644
index 00000000000..27727d51e18
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/Header.tsx
@@ -0,0 +1,89 @@
+import { useCartEnabled } from '@graphcommerce/magento-cart'
+import { CustomerFab } from '@graphcommerce/magento-customer'
+import { SearchFab, SearchField } from '@graphcommerce/magento-search'
+import { StoreSwitcherButton, StoreSwitcherFab } from '@graphcommerce/magento-store'
+import { WishlistFab } from '@graphcommerce/magento-wishlist'
+import {
+  DesktopNavActions,
+  DesktopNavBar,
+  DesktopNavItem,
+  iconChevronDown,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MobileTopRight,
+  PlaceholderFab,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+import { Fab } from '@mui/material'
+import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { HeaderContainer } from './HeaderContainer'
+import type { LayoutQuery } from './Layout.gql'
+import { Logo } from './Logo'
+
+export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function Header(props: HeaderProps) {
+  const { menu, selection } = props
+  const cartEnabled = useCartEnabled()
+
+  return (
+    <HeaderContainer>
+      <Logo />
+
+      <DesktopNavBar>
+        {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
+          <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
+            {item?.name}
+          </DesktopNavItem>
+        ))}
+
+        <DesktopNavItem
+          onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+          onKeyUp={(evt) => {
+            if (evt.key === 'Enter') {
+              selection.set([menu?.items?.[0]?.uid || ''])
+            }
+          }}
+          tabIndex={0}
+        >
+          {menu?.items?.[0]?.name}
+          <IconSvg src={iconChevronDown} />
+        </DesktopNavItem>
+
+        <DesktopNavItem href='/blog'>
+          <Trans>Blog</Trans>
+        </DesktopNavItem>
+      </DesktopNavBar>
+
+      <DesktopNavActions>
+        <StoreSwitcherButton />
+        <SearchField
+          formControl={{ sx: { width: '400px' } }}
+          searchField={{ productListRenderer }}
+        />
+        <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
+          <IconSvg src={iconCustomerService} size='large' />
+        </Fab>
+        <WishlistFab
+          icon={<IconSvg src={iconHeart} size='large' />}
+          BadgeProps={{ color: 'secondary' }}
+        />
+        <CustomerFab
+          guestHref='/account/signin'
+          authHref='/account'
+          BadgeProps={{ color: 'secondary' }}
+        />
+        {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
+        {cartEnabled && <PlaceholderFab />}
+      </DesktopNavActions>
+
+      <MobileTopRight>
+        <StoreSwitcherFab size='responsiveMedium' />
+        <SearchFab size='responsiveMedium' />
+      </MobileTopRight>
+    </HeaderContainer>
+  )
+}
diff --git a/examples/magento-storyblok/components/Layout/HeaderContainer.tsx b/examples/magento-storyblok/components/Layout/HeaderContainer.tsx
new file mode 100644
index 00000000000..dcb369ce2a5
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/HeaderContainer.tsx
@@ -0,0 +1,45 @@
+import type { ContainerSizingProps } from '@graphcommerce/next-ui'
+import { Container, sxx } from '@graphcommerce/next-ui'
+
+export type HeaderContainerProps = ContainerSizingProps
+
+export function HeaderContainer(props: HeaderContainerProps) {
+  const { children, sx, ...containerProps } = props
+  return (
+    <Container
+      sizing='shell'
+      maxWidth={false}
+      component='header'
+      {...containerProps}
+      sx={sxx(
+        (theme) => ({
+          zIndex: theme.zIndex.appBar - 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: theme.appShell.headerHeightSm,
+          pointerEvents: 'none',
+          '& > *': {
+            pointerEvents: 'all',
+          },
+          [theme.breakpoints.up('md')]: {
+            height: theme.appShell.headerHeightMd,
+            top: 0,
+            display: 'flex',
+            justifyContent: 'left',
+            width: '100%',
+          },
+          '&.sticky': {
+            [theme.breakpoints.down('md')]: {
+              position: 'sticky',
+              top: 0,
+            },
+          },
+        }),
+        sx,
+      )}
+    >
+      {children}
+    </Container>
+  )
+}
diff --git a/examples/magento-storyblok/components/Layout/LayoutDefault.tsx b/examples/magento-storyblok/components/Layout/LayoutDefault.tsx
index 8f2fe5288e6..2de89aaf05d 100644
--- a/examples/magento-storyblok/components/Layout/LayoutDefault.tsx
+++ b/examples/magento-storyblok/components/Layout/LayoutDefault.tsx
@@ -75,38 +75,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
       <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
-        <Container
-          sizing='shell'
-          maxWidth={false}
-          component='header'
-          className={classes.header}
-          sx={(theme) => ({
-            zIndex: theme.zIndex.appBar - 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: theme.appShell.headerHeightSm,
-            pointerEvents: 'none',
-            '& > *': {
-              pointerEvents: 'all',
-            },
-            [theme.breakpoints.up('md')]: {
-              height: theme.appShell.headerHeightMd,
-              top: 0,
-              display: 'flex',
-              justifyContent: 'left',
-              width: '100%',
-            },
-            '&.sticky': {
-              [theme.breakpoints.down('md')]: {
-                position: 'sticky',
-                top: 0,
-              },
-            },
-          })}
-        >
-          {header}
-        </Container>
+        {header}
         {menuFab || cartFab ? (
           <Container
             sizing='shell'
diff --git a/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx b/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
index e4bdd728deb..9facb8c13fa 100644
--- a/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
@@ -1,9 +1,9 @@
-import type { LayoutDefaultProps } from '@graphcommerce/next-ui'
-import { LayoutDefault } from '@graphcommerce/next-ui'
 import { GlobalConfigProvider } from '../Storyblok/GlobalConfigProvider'
 import type { StoryblokGlobalConfig } from '../Storyblok/types'
 import { Footer } from './Footer'
+import { HeaderContainer } from './HeaderContainer'
 import type { LayoutQuery } from './Layout.gql'
+import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
 
 export type LayoutMinimalProps = LayoutQuery &
@@ -18,7 +18,11 @@ export function LayoutMinimal(props: LayoutMinimalProps) {
     <GlobalConfigProvider value={globalConfig}>
       <LayoutDefault
         {...uiProps}
-        header={<Logo />}
+        header={
+          <HeaderContainer>
+            <Logo />
+          </HeaderContainer>
+        }
         footer={<Footer />}
         sx={(theme) => ({ background: theme.vars.palette.background.paper })}
       >
diff --git a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
index 039c5a8ead1..b10b3ad0ffd 100644
--- a/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
+++ b/examples/magento-storyblok/components/Layout/LayoutNavigation.tsx
@@ -1,42 +1,13 @@
-import { CartFab, useCartEnabled } from '@graphcommerce/magento-cart'
-import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
-import { CustomerFab, CustomerMenuFabItem } from '@graphcommerce/magento-customer'
-import { SearchFab, SearchField } from '@graphcommerce/magento-search'
-import {
-  StoreSwitcherButton,
-  StoreSwitcherFab,
-  StoreSwitcherMenuFabSecondaryItem,
-} from '@graphcommerce/magento-store'
-import { WishlistFab, WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
-import {
-  DarkLightModeMenuSecondaryItem,
-  DesktopNavActions,
-  DesktopNavBar,
-  DesktopNavItem,
-  iconChevronDown,
-  iconCustomerService,
-  iconHeart,
-  IconSvg,
-  MenuFabSecondaryItem,
-  MobileTopRight,
-  NavigationFab,
-  NavigationOverlay,
-  NavigationProvider,
-  PlaceholderFab,
-  useMemoDeep,
-  useNavigationSelection,
-} from '@graphcommerce/next-ui'
-import { t } from '@lingui/core/macro'
-import { Trans } from '@lingui/react/macro'
-import { Divider, Fab } from '@mui/material'
+import { CartFab } from '@graphcommerce/magento-cart'
+import { NavigationFab, useNavigationSelection } from '@graphcommerce/next-ui'
 import { useRouter } from 'next/router'
-import { productListRenderer } from '../ProductListItems/productListRenderer'
 import { GlobalConfigProvider } from '../Storyblok/GlobalConfigProvider'
 import type { StoryblokGlobalConfig } from '../Storyblok/types'
 import { Footer } from './Footer'
+import { Header } from './Header'
 import type { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
-import { Logo } from './Logo'
+import { MenuOverlay } from './MenuOverlay'
 
 export type LayoutNavigationProps = LayoutQuery &
   Omit<LayoutDefaultProps, 'footer' | 'header' | 'cartFab' | 'menuFab'> & {
@@ -49,129 +20,14 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
   const selection = useNavigationSelection()
   const router = useRouter()
 
-  const cartEnabled = useCartEnabled()
-
   return (
     <GlobalConfigProvider value={globalConfig}>
-      <NavigationProvider
-        selection={selection}
-        items={useMemoDeep(
-          () => [
-            { id: 'home', name: <Trans>Home</Trans>, href: '/' },
-            {
-              id: 'manual-item-one',
-              href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[0]?.name ?? '',
-            },
-            {
-              id: 'manual-item-two',
-              href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
-              name: menu?.items?.[0]?.children?.[1]?.name ?? '',
-            },
-            ...magentoMenuToNavigation(menu, true),
-            { id: 'blog', name: 'Blog', href: '/blog' },
-            <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
-            <CustomerMenuFabItem
-              onClick={() => selection.set(false)}
-              key='account'
-              guestHref='/account/signin'
-              authHref='/account'
-            >
-              <Trans>Account</Trans>
-            </CustomerMenuFabItem>,
-            <MenuFabSecondaryItem
-              key='service'
-              icon={<IconSvg src={iconCustomerService} size='medium' />}
-              href='/service'
-            >
-              <Trans>Customer Service</Trans>
-            </MenuFabSecondaryItem>,
-            <WishlistMenuFabItem
-              onClick={() => selection.set(false)}
-              key='wishlist'
-              icon={<IconSvg src={iconHeart} size='medium' />}
-            >
-              <Trans>Wishlist</Trans>
-            </WishlistMenuFabItem>,
-            <DarkLightModeMenuSecondaryItem key='darkmode' />,
-            <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
-          ],
-          [menu, selection],
-        )}
-      >
-        <NavigationOverlay
-          stretchColumns={false}
-          variantSm='left'
-          sizeSm='full'
-          justifySm='start'
-          itemWidthSm='70vw'
-          variantMd='left'
-          sizeMd='full'
-          justifyMd='start'
-          itemWidthMd='230px'
-          mouseEvent='hover'
-          itemPadding='md'
-        />
-      </NavigationProvider>
+      <MenuOverlay menu={menu} selection={selection} />
 
       <LayoutDefault
         {...uiProps}
         noSticky={router.asPath.split('?')[0] === '/'}
-        header={
-          <>
-            <Logo />
-
-            <DesktopNavBar>
-              {menu?.items?.[0]?.children?.slice(0, 2).map((item) => (
-                <DesktopNavItem key={item?.uid} href={`/${item?.url_path}`}>
-                  {item?.name}
-                </DesktopNavItem>
-              ))}
-              <DesktopNavItem
-                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
-                onKeyUp={(evt) => {
-                  if (evt.key === 'Enter') {
-                    selection.set([menu?.items?.[0]?.uid || ''])
-                  }
-                }}
-                tabIndex={0}
-              >
-                {menu?.items?.[0]?.name}
-                <IconSvg src={iconChevronDown} />
-              </DesktopNavItem>
-
-              <DesktopNavItem href='/blog'>
-                <Trans>Blog</Trans>
-              </DesktopNavItem>
-            </DesktopNavBar>
-            <DesktopNavActions>
-              <StoreSwitcherButton />
-              <SearchField
-                formControl={{ sx: { width: '400px' } }}
-                searchField={{ productListRenderer }}
-              />
-              <Fab href='/service' aria-label={t`Customer Service`} size='large' color='inherit'>
-                <IconSvg src={iconCustomerService} size='large' />
-              </Fab>
-              <WishlistFab
-                icon={<IconSvg src={iconHeart} size='large' />}
-                BadgeProps={{ color: 'secondary' }}
-              />
-              <CustomerFab
-                guestHref='/account/signin'
-                authHref='/account'
-                BadgeProps={{ color: 'secondary' }}
-              />
-              {/* The placeholder exists because the CartFab is sticky but we want to reserve the space for the <CartFab /> */}
-              {cartEnabled && <PlaceholderFab />}
-            </DesktopNavActions>
-
-            <MobileTopRight>
-              <StoreSwitcherFab size='responsiveMedium' />
-              <SearchFab size='responsiveMedium' />
-            </MobileTopRight>
-          </>
-        }
+        header={<Header menu={menu} selection={selection} />}
         footer={<Footer />}
         cartFab={<CartFab BadgeProps={{ color: 'secondary' }} />}
         menuFab={<NavigationFab onClick={() => selection.set([])} />}
diff --git a/examples/magento-storyblok/components/Layout/MenuOverlay.tsx b/examples/magento-storyblok/components/Layout/MenuOverlay.tsx
new file mode 100644
index 00000000000..735527190a3
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/MenuOverlay.tsx
@@ -0,0 +1,87 @@
+import { magentoMenuToNavigation } from '@graphcommerce/magento-category'
+import { CustomerMenuFabItem } from '@graphcommerce/magento-customer'
+import { StoreSwitcherMenuFabSecondaryItem } from '@graphcommerce/magento-store'
+import { WishlistMenuFabItem } from '@graphcommerce/magento-wishlist'
+import {
+  DarkLightModeMenuSecondaryItem,
+  iconCustomerService,
+  iconHeart,
+  IconSvg,
+  MenuFabSecondaryItem,
+  NavigationOverlay,
+  NavigationProvider,
+  useMemoDeep,
+  type UseNavigationSelection,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react/macro'
+import { Divider } from '@mui/material'
+import type { LayoutQuery } from './Layout.gql'
+
+export type MenuOverlayProps = LayoutQuery & { selection: UseNavigationSelection }
+
+export function MenuOverlay(props: MenuOverlayProps) {
+  const { menu, selection } = props
+
+  return (
+    <NavigationProvider
+      selection={selection}
+      items={useMemoDeep(
+        () => [
+          { id: 'home', name: <Trans>Home</Trans>, href: '/' },
+          {
+            id: 'manual-item-one',
+            href: `/${menu?.items?.[0]?.children?.[0]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[0]?.name ?? '',
+          },
+          {
+            id: 'manual-item-two',
+            href: `/${menu?.items?.[0]?.children?.[1]?.url_path}`,
+            name: menu?.items?.[0]?.children?.[1]?.name ?? '',
+          },
+          ...magentoMenuToNavigation(menu, true),
+          { id: 'blog', name: 'Blog', href: '/blog' },
+          <Divider key='divider' sx={(theme) => ({ my: theme.spacings.xs })} />,
+          <CustomerMenuFabItem
+            onClick={() => selection.set(false)}
+            key='account'
+            guestHref='/account/signin'
+            authHref='/account'
+          >
+            <Trans>Account</Trans>
+          </CustomerMenuFabItem>,
+          <MenuFabSecondaryItem
+            key='service'
+            icon={<IconSvg src={iconCustomerService} size='medium' />}
+            href='/service'
+          >
+            <Trans>Customer Service</Trans>
+          </MenuFabSecondaryItem>,
+          <WishlistMenuFabItem
+            onClick={() => selection.set(false)}
+            key='wishlist'
+            icon={<IconSvg src={iconHeart} size='medium' />}
+          >
+            <Trans>Wishlist</Trans>
+          </WishlistMenuFabItem>,
+          <DarkLightModeMenuSecondaryItem key='darkmode' />,
+          <StoreSwitcherMenuFabSecondaryItem key='store-switcher' />,
+        ],
+        [menu, selection],
+      )}
+    >
+      <NavigationOverlay
+        stretchColumns={false}
+        variantSm='left'
+        sizeSm='full'
+        justifySm='start'
+        itemWidthSm='70vw'
+        variantMd='left'
+        sizeMd='full'
+        justifyMd='start'
+        itemWidthMd='230px'
+        mouseEvent='hover'
+        itemPadding='md'
+      />
+    </NavigationProvider>
+  )
+}
diff --git a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
index 2cecd3f6c6c..2600367eba2 100644
--- a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
+++ b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
@@ -10,6 +10,10 @@ import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
+/**
+ * @deprecated Import `LayoutDefaultProps` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export type LayoutDefaultProps = {
   className?: string
   beforeHeader?: React.ReactNode
@@ -31,6 +35,10 @@ const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof pa
   parts,
 )
 
+/**
+ * @deprecated Import `LayoutDefault` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export function LayoutDefault(props: LayoutDefaultProps) {
   const {
     children,

From 4d7fdc50448fc762654beb5a8dec7caaac544b3a Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 16:43:28 +0200
Subject: [PATCH 5/6] feat(header-v2): group Header and Footer files into
 subfolders

---
 .../components/Layout/{ => Footer}/Footer.tsx               | 0
 .../Layout/{ => Footer}/FooterQueryFragment.graphql         | 0
 examples/magento-graphcms/components/Layout/Footer/index.ts | 1 +
 .../components/Layout/{ => Header}/Header.tsx               | 6 +++---
 .../components/Layout/{ => Header}/HeaderContainer.tsx      | 0
 examples/magento-graphcms/components/Layout/Header/index.ts | 2 ++
 .../magento-graphcms/components/Layout/LayoutMinimal.tsx    | 2 +-
 .../components/Layout/{ => Footer}/Footer.tsx               | 0
 .../magento-open-source/components/Layout/Footer/index.ts   | 1 +
 .../components/Layout/{ => Header}/Header.tsx               | 6 +++---
 .../components/Layout/{ => Header}/HeaderContainer.tsx      | 0
 .../magento-open-source/components/Layout/Header/index.ts   | 2 ++
 .../magento-open-source/components/Layout/LayoutMinimal.tsx | 2 +-
 .../components/Layout/{ => Footer}/Footer.tsx               | 4 ++--
 .../magento-storyblok/components/Layout/Footer/index.ts     | 1 +
 .../components/Layout/{ => Header}/Header.tsx               | 6 +++---
 .../components/Layout/{ => Header}/HeaderContainer.tsx      | 0
 .../magento-storyblok/components/Layout/Header/index.ts     | 2 ++
 .../magento-storyblok/components/Layout/LayoutMinimal.tsx   | 2 +-
 19 files changed, 23 insertions(+), 14 deletions(-)
 rename examples/magento-graphcms/components/Layout/{ => Footer}/Footer.tsx (100%)
 rename examples/magento-graphcms/components/Layout/{ => Footer}/FooterQueryFragment.graphql (100%)
 create mode 100644 examples/magento-graphcms/components/Layout/Footer/index.ts
 rename examples/magento-graphcms/components/Layout/{ => Header}/Header.tsx (94%)
 rename examples/magento-graphcms/components/Layout/{ => Header}/HeaderContainer.tsx (100%)
 create mode 100644 examples/magento-graphcms/components/Layout/Header/index.ts
 rename examples/magento-open-source/components/Layout/{ => Footer}/Footer.tsx (100%)
 create mode 100644 examples/magento-open-source/components/Layout/Footer/index.ts
 rename examples/magento-open-source/components/Layout/{ => Header}/Header.tsx (94%)
 rename examples/magento-open-source/components/Layout/{ => Header}/HeaderContainer.tsx (100%)
 create mode 100644 examples/magento-open-source/components/Layout/Header/index.ts
 rename examples/magento-storyblok/components/Layout/{ => Footer}/Footer.tsx (96%)
 create mode 100644 examples/magento-storyblok/components/Layout/Footer/index.ts
 rename examples/magento-storyblok/components/Layout/{ => Header}/Header.tsx (94%)
 rename examples/magento-storyblok/components/Layout/{ => Header}/HeaderContainer.tsx (100%)
 create mode 100644 examples/magento-storyblok/components/Layout/Header/index.ts

diff --git a/examples/magento-graphcms/components/Layout/Footer.tsx b/examples/magento-graphcms/components/Layout/Footer/Footer.tsx
similarity index 100%
rename from examples/magento-graphcms/components/Layout/Footer.tsx
rename to examples/magento-graphcms/components/Layout/Footer/Footer.tsx
diff --git a/examples/magento-graphcms/components/Layout/FooterQueryFragment.graphql b/examples/magento-graphcms/components/Layout/Footer/FooterQueryFragment.graphql
similarity index 100%
rename from examples/magento-graphcms/components/Layout/FooterQueryFragment.graphql
rename to examples/magento-graphcms/components/Layout/Footer/FooterQueryFragment.graphql
diff --git a/examples/magento-graphcms/components/Layout/Footer/index.ts b/examples/magento-graphcms/components/Layout/Footer/index.ts
new file mode 100644
index 00000000000..bd2c119a6ca
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer'
diff --git a/examples/magento-graphcms/components/Layout/Header.tsx b/examples/magento-graphcms/components/Layout/Header/Header.tsx
similarity index 94%
rename from examples/magento-graphcms/components/Layout/Header.tsx
rename to examples/magento-graphcms/components/Layout/Header/Header.tsx
index 9d9886d6232..c4641541c23 100644
--- a/examples/magento-graphcms/components/Layout/Header.tsx
+++ b/examples/magento-graphcms/components/Layout/Header/Header.tsx
@@ -18,10 +18,10 @@ import {
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Fab } from '@mui/material'
-import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { productListRenderer } from '../../ProductListItems/productListRenderer'
 import { HeaderContainer } from './HeaderContainer'
-import type { LayoutQuery } from './Layout.gql'
-import { Logo } from './Logo'
+import type { LayoutQuery } from '../Layout.gql'
+import { Logo } from '../Logo'
 
 export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
 
diff --git a/examples/magento-graphcms/components/Layout/HeaderContainer.tsx b/examples/magento-graphcms/components/Layout/Header/HeaderContainer.tsx
similarity index 100%
rename from examples/magento-graphcms/components/Layout/HeaderContainer.tsx
rename to examples/magento-graphcms/components/Layout/Header/HeaderContainer.tsx
diff --git a/examples/magento-graphcms/components/Layout/Header/index.ts b/examples/magento-graphcms/components/Layout/Header/index.ts
new file mode 100644
index 00000000000..710e4d6c61e
--- /dev/null
+++ b/examples/magento-graphcms/components/Layout/Header/index.ts
@@ -0,0 +1,2 @@
+export * from './Header'
+export * from './HeaderContainer'
diff --git a/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx b/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
index 714433b4f1c..e372600c73c 100644
--- a/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-graphcms/components/Layout/LayoutMinimal.tsx
@@ -1,5 +1,5 @@
 import { Footer } from './Footer'
-import { HeaderContainer } from './HeaderContainer'
+import { HeaderContainer } from './Header'
 import { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
diff --git a/examples/magento-open-source/components/Layout/Footer.tsx b/examples/magento-open-source/components/Layout/Footer/Footer.tsx
similarity index 100%
rename from examples/magento-open-source/components/Layout/Footer.tsx
rename to examples/magento-open-source/components/Layout/Footer/Footer.tsx
diff --git a/examples/magento-open-source/components/Layout/Footer/index.ts b/examples/magento-open-source/components/Layout/Footer/index.ts
new file mode 100644
index 00000000000..bd2c119a6ca
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer'
diff --git a/examples/magento-open-source/components/Layout/Header.tsx b/examples/magento-open-source/components/Layout/Header/Header.tsx
similarity index 94%
rename from examples/magento-open-source/components/Layout/Header.tsx
rename to examples/magento-open-source/components/Layout/Header/Header.tsx
index eb331b679b9..f1e314d77b2 100644
--- a/examples/magento-open-source/components/Layout/Header.tsx
+++ b/examples/magento-open-source/components/Layout/Header/Header.tsx
@@ -17,10 +17,10 @@ import {
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Fab } from '@mui/material'
-import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { productListRenderer } from '../../ProductListItems/productListRenderer'
 import { HeaderContainer } from './HeaderContainer'
-import type { LayoutQuery } from './Layout.gql'
-import { Logo } from './Logo'
+import type { LayoutQuery } from '../Layout.gql'
+import { Logo } from '../Logo'
 
 export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
 
diff --git a/examples/magento-open-source/components/Layout/HeaderContainer.tsx b/examples/magento-open-source/components/Layout/Header/HeaderContainer.tsx
similarity index 100%
rename from examples/magento-open-source/components/Layout/HeaderContainer.tsx
rename to examples/magento-open-source/components/Layout/Header/HeaderContainer.tsx
diff --git a/examples/magento-open-source/components/Layout/Header/index.ts b/examples/magento-open-source/components/Layout/Header/index.ts
new file mode 100644
index 00000000000..710e4d6c61e
--- /dev/null
+++ b/examples/magento-open-source/components/Layout/Header/index.ts
@@ -0,0 +1,2 @@
+export * from './Header'
+export * from './HeaderContainer'
diff --git a/examples/magento-open-source/components/Layout/LayoutMinimal.tsx b/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
index c526246b033..d4dfaa85dbc 100644
--- a/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-open-source/components/Layout/LayoutMinimal.tsx
@@ -1,7 +1,7 @@
 import { CmsBlock } from '@graphcommerce/magento-cms'
 import { productListRenderer } from '../ProductListItems'
 import { Footer } from './Footer'
-import { HeaderContainer } from './HeaderContainer'
+import { HeaderContainer } from './Header'
 import type { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'
diff --git a/examples/magento-storyblok/components/Layout/Footer.tsx b/examples/magento-storyblok/components/Layout/Footer/Footer.tsx
similarity index 96%
rename from examples/magento-storyblok/components/Layout/Footer.tsx
rename to examples/magento-storyblok/components/Layout/Footer/Footer.tsx
index 684e149d99c..a6efc9926f5 100644
--- a/examples/magento-storyblok/components/Layout/Footer.tsx
+++ b/examples/magento-storyblok/components/Layout/Footer/Footer.tsx
@@ -7,8 +7,8 @@ import { DateFormat, FindAndReplace, Footer as FooterBase } from '@graphcommerce
 import { multilinkHref, storyblokEditable } from '@graphcommerce/storyblok-ui'
 import { Trans } from '@lingui/react/macro'
 import { Button, IconButton, Link } from '@mui/material'
-import { useGlobalConfig } from '../Storyblok/GlobalConfigProvider'
-import type { StoryblokGlobalConfig } from '../Storyblok/types'
+import { useGlobalConfig } from '../../Storyblok/GlobalConfigProvider'
+import type { StoryblokGlobalConfig } from '../../Storyblok/types'
 
 export type FooterProps = { globalConfig?: StoryblokGlobalConfig | null }
 
diff --git a/examples/magento-storyblok/components/Layout/Footer/index.ts b/examples/magento-storyblok/components/Layout/Footer/index.ts
new file mode 100644
index 00000000000..bd2c119a6ca
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer'
diff --git a/examples/magento-storyblok/components/Layout/Header.tsx b/examples/magento-storyblok/components/Layout/Header/Header.tsx
similarity index 94%
rename from examples/magento-storyblok/components/Layout/Header.tsx
rename to examples/magento-storyblok/components/Layout/Header/Header.tsx
index 27727d51e18..255e9de76bc 100644
--- a/examples/magento-storyblok/components/Layout/Header.tsx
+++ b/examples/magento-storyblok/components/Layout/Header/Header.tsx
@@ -18,10 +18,10 @@ import {
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Fab } from '@mui/material'
-import { productListRenderer } from '../ProductListItems/productListRenderer'
+import { productListRenderer } from '../../ProductListItems/productListRenderer'
 import { HeaderContainer } from './HeaderContainer'
-import type { LayoutQuery } from './Layout.gql'
-import { Logo } from './Logo'
+import type { LayoutQuery } from '../Layout.gql'
+import { Logo } from '../Logo'
 
 export type HeaderProps = LayoutQuery & { selection: UseNavigationSelection }
 
diff --git a/examples/magento-storyblok/components/Layout/HeaderContainer.tsx b/examples/magento-storyblok/components/Layout/Header/HeaderContainer.tsx
similarity index 100%
rename from examples/magento-storyblok/components/Layout/HeaderContainer.tsx
rename to examples/magento-storyblok/components/Layout/Header/HeaderContainer.tsx
diff --git a/examples/magento-storyblok/components/Layout/Header/index.ts b/examples/magento-storyblok/components/Layout/Header/index.ts
new file mode 100644
index 00000000000..710e4d6c61e
--- /dev/null
+++ b/examples/magento-storyblok/components/Layout/Header/index.ts
@@ -0,0 +1,2 @@
+export * from './Header'
+export * from './HeaderContainer'
diff --git a/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx b/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
index 9facb8c13fa..c9ecfee88b1 100644
--- a/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
+++ b/examples/magento-storyblok/components/Layout/LayoutMinimal.tsx
@@ -1,7 +1,7 @@
 import { GlobalConfigProvider } from '../Storyblok/GlobalConfigProvider'
 import type { StoryblokGlobalConfig } from '../Storyblok/types'
 import { Footer } from './Footer'
-import { HeaderContainer } from './HeaderContainer'
+import { HeaderContainer } from './Header'
 import type { LayoutQuery } from './Layout.gql'
 import { LayoutDefault, type LayoutDefaultProps } from './LayoutDefault'
 import { Logo } from './Logo'

From e238288a38f713f74fff840c80cdf33ad1a68de4 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 28 May 2026 16:56:06 +0200
Subject: [PATCH 6/6] Added disableScrollEffects prop to CartFab &
 NavigationFab for easier customization of the header

---
 .changeset/kind-days-punch.md                 |  6 +++
 .../components/CartFab/CartFab.tsx            |  8 ++-
 .../components/CartFab/CartFabStatic.tsx      | 49 +++++++++++++++++++
 .../Navigation/components/NavigationFab.tsx   | 24 ++++++---
 4 files changed, 78 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/kind-days-punch.md
 create mode 100644 packages/magento-cart/components/CartFab/CartFabStatic.tsx

diff --git a/.changeset/kind-days-punch.md b/.changeset/kind-days-punch.md
new file mode 100644
index 00000000000..bed1f67c87e
--- /dev/null
+++ b/.changeset/kind-days-punch.md
@@ -0,0 +1,6 @@
+---
+'@graphcommerce/magento-cart': patch
+'@graphcommerce/next-ui': patch
+---
+
+Added disableScrollEffects prop to CartFab & NavigationFab for easier customization of the header
diff --git a/packages/magento-cart/components/CartFab/CartFab.tsx b/packages/magento-cart/components/CartFab/CartFab.tsx
index 045a740d150..f58a1959ef0 100644
--- a/packages/magento-cart/components/CartFab/CartFab.tsx
+++ b/packages/magento-cart/components/CartFab/CartFab.tsx
@@ -15,12 +15,14 @@ import React from 'react'
 import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
 import { useCartQuery } from '../../hooks/useCartQuery'
 import { CartFabDocument } from './CartFab.gql'
+import { CartFabStatic } from './CartFabStatic'
 import type { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
 
 export type CartFabProps = {
   icon?: React.ReactNode
   sx?: SxProps<Theme>
   BadgeProps?: BadgeProps
+  disableScrollEffects?: boolean
 } & Pick<FabProps, 'color' | 'size' | 'variant'>
 
 export type CartFabContentProps = CartFabProps & CartTotalQuantityFragment
@@ -108,5 +110,9 @@ export function CartFab(props: CartFabProps) {
   })
   if (!cartEnabled) return null
 
-  return <CartFabContent total_quantity={cartQuery.data?.cart?.total_quantity ?? 0} {...props} />
+  const { disableScrollEffects, ...rest } = props
+  if (disableScrollEffects)
+    return <CartFabStatic total_quantity={cartQuery.data?.cart?.total_quantity ?? 0} {...rest} />
+
+  return <CartFabContent total_quantity={cartQuery.data?.cart?.total_quantity ?? 0} {...rest} />
 }
diff --git a/packages/magento-cart/components/CartFab/CartFabStatic.tsx b/packages/magento-cart/components/CartFab/CartFabStatic.tsx
new file mode 100644
index 00000000000..2156428d045
--- /dev/null
+++ b/packages/magento-cart/components/CartFab/CartFabStatic.tsx
@@ -0,0 +1,49 @@
+import {
+  DesktopHeaderBadge,
+  extendableComponent,
+  iconShoppingBag,
+  IconSvg,
+  sxx,
+} from '@graphcommerce/next-ui'
+import { t } from '@lingui/core/macro'
+import { Fab } from '@mui/material'
+import type { CartFabContentProps } from './CartFab'
+
+export type CartFabStaticProps = Omit<CartFabContentProps, 'disableScrollEffects'>
+
+const { classes } = extendableComponent('CartFab', ['root', 'cart', 'shadow'] as const)
+
+export function CartFabStatic(props: CartFabStaticProps) {
+  const { total_quantity, icon, sx = [], BadgeProps, ...fabProps } = props
+
+  const cartIcon = icon ?? <IconSvg src={iconShoppingBag} size='large' />
+
+  return (
+    <Fab
+      href='/cart'
+      className={classes.cart}
+      aria-label={t`Cart`}
+      color='inherit'
+      size='responsive'
+      sx={sxx(
+        (theme) => ({
+          [theme.breakpoints.down('md')]: {
+            backgroundColor: theme.vars.palette.background.paper,
+          },
+        }),
+        sx,
+      )}
+      {...fabProps}
+    >
+      <DesktopHeaderBadge
+        color='primary'
+        variant='dot'
+        overlap='circular'
+        badgeContent={total_quantity}
+        {...BadgeProps}
+      >
+        {cartIcon}
+      </DesktopHeaderBadge>
+    </Fab>
+  )
+}
diff --git a/packages/next-ui/Navigation/components/NavigationFab.tsx b/packages/next-ui/Navigation/components/NavigationFab.tsx
index 73f3323bde6..98dd21e5c1f 100644
--- a/packages/next-ui/Navigation/components/NavigationFab.tsx
+++ b/packages/next-ui/Navigation/components/NavigationFab.tsx
@@ -17,6 +17,7 @@ const MotionDiv = styled(m.div)({})
 export type NavigationFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
+  disableScrollEffects?: boolean
   sx?: SxProps<Theme>
 } & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
 
@@ -29,7 +30,7 @@ type OwnerState = {
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function NavigationFab(props: NavigationFabProps) {
-  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const { menuIcon, closeIcon, disableScrollEffects, sx = [], ...fabProps } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
@@ -53,12 +54,19 @@ export function NavigationFab(props: NavigationFabProps) {
     <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
       <MotionDiv
         className={classes.wrapper}
-        sx={{
-          [theme.breakpoints.down('md')]: {
-            opacity: '1 !important',
-            transform: 'none !important',
-          },
-        }}
+        sx={
+          disableScrollEffects
+            ? {
+                opacity: '1 !important',
+                transform: 'none !important',
+              }
+            : {
+                [theme.breakpoints.down('md')]: {
+                  opacity: '1 !important',
+                  transform: 'none !important',
+                },
+              }
+        }
         style={{ opacity }}
       >
         <Fab
@@ -121,7 +129,7 @@ export function NavigationFab(props: NavigationFabProps) {
             [theme.breakpoints.down('md')]: { opacity: '1 !important' },
           }}
           className={classes.shadow}
-          style={{ opacity: shadowOpacity }}
+          style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
         />
       </MotionDiv>
     </Box>