diff --git a/.changeset/dull-pots-draw.md b/.changeset/dull-pots-draw.md
new file mode 100644
index 0000000000..dbae9c3b80
--- /dev/null
+++ b/.changeset/dull-pots-draw.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Mark the menu item as active if router.asPath matches the href, or if the first URL segment matches, indicating it's the parent item.
diff --git a/packages/next-ui/LayoutParts/DesktopNavBarItem.tsx b/packages/next-ui/LayoutParts/DesktopNavBarItem.tsx
index b3cfc7d818..f1c050f1a4 100644
--- a/packages/next-ui/LayoutParts/DesktopNavBarItem.tsx
+++ b/packages/next-ui/LayoutParts/DesktopNavBarItem.tsx
@@ -4,9 +4,12 @@ import { extendableComponent } from '../Styles/extendableComponent'
 
 const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
 
-export type DesktopNavItemLinkProps = LinkProps<'a'>
+export type DesktopNavItemLinkProps = LinkProps<'a'> & {
+  active?: boolean
+}
 export type DesktopNavItemButtonProps = LinkProps<'div'> & {
   onClick: LinkProps<'button'>['onClick']
+  active?: boolean
 }
 
 function isLinkProps(
@@ -19,7 +22,7 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
   const router = useRouter()
 
   if (!isLinkProps(props)) {
-    const { onClick, children, sx = [], ...linkProps } = props
+    const { onClick, children, sx = [], active, ...linkProps } = props
 
     return (
       <Link
@@ -40,9 +43,9 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
     )
   }
 
-  const { href, children, sx = [], ...linkProps } = props
-
-  const active = router.asPath.startsWith((href ?? '').toString())
+  const { href, children, sx = [], active, ...linkProps } = props
+  const activeValue =
+    typeof active === 'undefined' ? router.asPath.startsWith((href ?? '').toString()) : active
 
   return (
     <Link
@@ -67,7 +70,7 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
           background: (theme) => theme.palette.primary.main,
           margin: '0 auto',
           marginTop: '6px',
-          opacity: active ? 1 : 0,
+          opacity: activeValue ? 1 : 0,
         }}
       />
     </Link>