[navigation menu] Add keepMounted prop to Content part

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

Closes #3755

<NavigationMenu.Content keepMounted> will keep the content mounted in the DOM with a hidden attribute during SSR and after hydration - this ensures the content is crawlable. Whenever it should be inserted into the popup, the component moves in there permanently, and stays mounted inside. <NavigationMenu.Portal keepMounted> needs to be used for it to "stay" on the DOM after it gets moved.

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@3794
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@3794
  

commit: da85a35

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+182B(+0.04%)	🔺+61B(+0.05%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	da85a35
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/698164fdc08cd80009edd311
😎 Deploy Preview	https://deploy-preview-3794--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Overview

Greptile Summary

Adds keepMounted prop to <NavigationMenu.Content> to keep content in the DOM with a hidden attribute during SSR and when closed, ensuring web crawler accessibility. When the popup opens, the content is reparented into the portal container.

• Added keepMounted prop (default false) to NavigationMenuContent component
• Content renders inline with hidden attribute when keepMounted=true and not mounted/no portal container
• Content moves to portal when popup opens and portal container exists
• Comprehensive test coverage for SSR and client-side hydration scenarios
• Documentation updated in API reference and component pages

Confidence Score: 4/5

• safe to merge after addressing the missing refs issue
• implementation is solid with good test coverage, but the inline rendering path is missing forwardedRef which could break ref forwarding for parent components
• packages/react/src/navigation-menu/content/NavigationMenuContent.tsx needs the refs fix

Important Files Changed

Filename	Overview
packages/react/src/navigation-menu/content/NavigationMenuContent.tsx	Added keepMounted prop to render content with hidden attribute during SSR and when closed, ensuring crawlability. Content is portaled when mounted and has a portal container.
packages/react/src/navigation-menu/content/NavigationMenuContent.test.tsx	Added comprehensive tests for keepMounted prop covering SSR and client-side hydration scenarios.

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[michaldudak]

I'd make this opt-in to avoid potential performance hits. With it enabled by default, the initial payload received from the server is larger. The browser also adds these elements to the DOM just to remove them a split-second later. It doesn't have to lay out or paint, so it's not a huge issue, but memory will be allocated, increasing the GC pressure.

[atomiks]

@michaldudak yeah good point, I figured navigation menus should always be mounted for SEO, but we can keep it opt-in with keepMounted specified on Root and possibly on Content as well to let them opt-out for specific menus if they're expensive and not critical for SEO

Alternatively (and this actually is probably necessary), we could keep the mounted content in the DOM at all times, since Google might re-evaluate contents after hydration finishes.

[michaldudak]

A comment explaining what's going on here could be useful for future readers.

[atomiks]

I removed the clone approach to be simpler

[atomiks]

@greptileai

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}