From 9f5e76575e3932f8fcd8689d8ef42e4c44b923d1 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 1/7] 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>

From 53d8255731ba891d5c2ff2335648ed2e22e5ae71 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 2/7] 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 bdaa6ec6aa2669b74fc6702ad46336db4c154b7c Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Wed, 3 Jun 2026 14:02:23 +0200
Subject: [PATCH 3/7] 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.

There is no visual change:
HeaderContainer carries the same styling that the
header slot of next-ui's LayoutDefault used to apply.
---
 .changeset/true-suits-design.md               |   8 +
 .../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, 704 insertions(+), 543 deletions(-)
 create mode 100644 .changeset/true-suits-design.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/true-suits-design.md b/.changeset/true-suits-design.md
new file mode 100644
index 00000000000..59c594e0d12
--- /dev/null
+++ b/.changeset/true-suits-design.md
@@ -0,0 +1,8 @@
+---
+'@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`). `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 21a676bb50888278d437b88a6e49e6f3d0c4d4bb Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 4 Jun 2026 14:20:53 +0200
Subject: [PATCH 4/7] Allow setting footer container props

---
 .changeset/yummy-spies-change.md   | 5 +++++
 packages/next-ui/Footer/Footer.tsx | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/yummy-spies-change.md

diff --git a/.changeset/yummy-spies-change.md b/.changeset/yummy-spies-change.md
new file mode 100644
index 00000000000..a835c9dc8d7
--- /dev/null
+++ b/.changeset/yummy-spies-change.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Changed Footer props type to allow setting footer container props
diff --git a/packages/next-ui/Footer/Footer.tsx b/packages/next-ui/Footer/Footer.tsx
index f30ff9dab15..dc1600f18ca 100644
--- a/packages/next-ui/Footer/Footer.tsx
+++ b/packages/next-ui/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import { sxx } from '@graphcommerce/next-ui'
-import type { ContainerProps } from '@mui/material'
 import { Box } from '@mui/material'
-import React from 'react'
+import type React from 'react'
+import type { ContainerSizingProps } from '../Container/Container'
 import { Container } from '../Container/Container'
 import { LazyHydrate } from '../LazyHydrate'
 import { extendableComponent } from '../Styles'
@@ -12,7 +12,7 @@ export type FooterProps = {
   customerService?: React.ReactNode
   copyright?: React.ReactNode
   children?: React.ReactNode
-} & ContainerProps
+} & ContainerSizingProps
 
 const { classes, selectors } = extendableComponent('Footer', [
   'root',

From 95dc52e8e9b523c3d7d630436c770d70b62c7a0f Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 4 Jun 2026 14:22:24 +0200
Subject: [PATCH 5/7] Allow disabling elevation for NavigationFab

---
 .../Navigation/components/NavigationFab.tsx   | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/next-ui/Navigation/components/NavigationFab.tsx b/packages/next-ui/Navigation/components/NavigationFab.tsx
index 98dd21e5c1f..1738c48c247 100644
--- a/packages/next-ui/Navigation/components/NavigationFab.tsx
+++ b/packages/next-ui/Navigation/components/NavigationFab.tsx
@@ -18,6 +18,7 @@ export type NavigationFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
   disableScrollEffects?: boolean
+  disableElevation?: boolean
   sx?: SxProps<Theme>
 } & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
 
@@ -30,7 +31,14 @@ type OwnerState = {
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function NavigationFab(props: NavigationFabProps) {
-  const { menuIcon, closeIcon, disableScrollEffects, sx = [], ...fabProps } = props
+  const {
+    menuIcon,
+    closeIcon,
+    disableScrollEffects,
+    disableElevation,
+    sx = [],
+    ...fabProps
+  } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
@@ -74,14 +82,14 @@ export function NavigationFab(props: NavigationFabProps) {
           aria-label='Open Menu'
           size='responsive'
           sx={{
-            boxShadow: 'none',
-            '&:hover, &:focus': {
               boxShadow: 'none',
+              '&:hover, &:focus': {
+                boxShadow: 'none',
+                background: theme.vars.palette.text.primary,
+              },
               background: theme.vars.palette.text.primary,
-            },
-            background: theme.vars.palette.text.primary,
             pointerEvents: 'all',
-            color: theme.vars.palette.background.paper,
+              color: theme.vars.palette.background.paper,
           }}
           className={classes.fab}
           {...fabProps}
@@ -117,20 +125,22 @@ export function NavigationFab(props: NavigationFabProps) {
             />
           )}
         </Fab>
-        <MotionDiv
-          sx={{
-            pointerEvents: 'none',
-            borderRadius: '99em',
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            boxShadow: theme.shadows[6],
-            top: 0,
-            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
-          }}
-          className={classes.shadow}
-          style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
-        />
+        {!disableElevation && (
+          <MotionDiv
+            sx={{
+              pointerEvents: 'none',
+              borderRadius: '99em',
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              boxShadow: theme.shadows[6],
+              top: 0,
+              [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+            }}
+            className={classes.shadow}
+            style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
+          />
+        )}
       </MotionDiv>
     </Box>
   )

From 3c10cce091530efea93ae94b946dc92362a264d3 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 4 Jun 2026 14:23:40 +0200
Subject: [PATCH 6/7] Fix issue where NavigationFab color prop would not work

---
 .../next-ui/Navigation/components/NavigationFab.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/next-ui/Navigation/components/NavigationFab.tsx b/packages/next-ui/Navigation/components/NavigationFab.tsx
index 1738c48c247..98d446aba6e 100644
--- a/packages/next-ui/Navigation/components/NavigationFab.tsx
+++ b/packages/next-ui/Navigation/components/NavigationFab.tsx
@@ -81,16 +81,22 @@ export function NavigationFab(props: NavigationFabProps) {
           color='inherit'
           aria-label='Open Menu'
           size='responsive'
-          sx={{
+          sx={sxx(
+            {
               boxShadow: 'none',
+              pointerEvents: 'all',
               '&:hover, &:focus': {
                 boxShadow: 'none',
+              },
+            },
+            !fabProps.color && {
+              '&:hover, &:focus': {
                 background: theme.vars.palette.text.primary,
               },
               background: theme.vars.palette.text.primary,
-            pointerEvents: 'all',
               color: theme.vars.palette.background.paper,
-          }}
+            },
+          )}
           className={classes.fab}
           {...fabProps}
         >

From f259fd726b45b885df05aeaab3cec32b1d04d0d5 Mon Sep 17 00:00:00 2001
From: Bram van der Holst <bram@reachdigital.nl>
Date: Thu, 4 Jun 2026 15:37:22 +0200
Subject: [PATCH 7/7] Update changelog

---
 .changeset/true-suits-design.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/true-suits-design.md b/.changeset/true-suits-design.md
index 59c594e0d12..7d71d6e0848 100644
--- a/.changeset/true-suits-design.md
+++ b/.changeset/true-suits-design.md
@@ -5,4 +5,4 @@
 '@graphcommerce/next-ui': minor
 ---
 
-Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`). `LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated` — the canonical version now lives locally in `components/Layout/`.
+Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`). `LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated`. If you are upgrading and do not want these changes, you can just discard them. This is just a structural change for more ease of use. No visually change.