[navigation menu] Mount content as hidden before hydration

[atomiks]

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

Closes #3755

Before hydration, this renders the <NavigationMenu.Content> into the DOM with a hidden attribute. After hydration, it's removed from the DOM (and only then portaled into the popup element as normal)

[pkg-pr-new]

• 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: f87bf7e

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+74B(+0.02%)	🔺+37B(+0.03%)

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	f87bf7e
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/696ed6f5e9d6ab0008e3c0e0
😎 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 Summary

This PR adds server-side rendering support to NavigationMenu.Content by rendering content with a hidden attribute during SSR, then removing it from the DOM after hydration. The implementation uses a selfMounted state flag (set via useOnMount) to differentiate between SSR/initial render and post-hydration renders. During SSR and initial client render, content renders in-place with hidden=true to ensure SEO-friendly HTML. After hydration, the content either returns null (when closed) or portals into the viewport (when open).

• Added useOnMount hook to track when component has hydrated
• Modified rendering logic to show hidden content before hydration
• Updated shouldRender logic to include !selfMounted condition
• Props array now includes { hidden: true } when !selfMounted
• Added comprehensive SSR tests validating hidden attribute and post-hydration behavior

The implementation correctly avoids hydration mismatches by ensuring SSR and initial client render produce identical output.

Confidence Score: 4/5

• This PR is safe to merge with minor concerns about hydration warnings
• The implementation is well-designed and uses a clever pattern to avoid hydration mismatches by matching SSR and client initial renders. Tests cover both SSR and post-hydration scenarios. Score is 4 rather than 5 due to potential hydration edge cases that should be tested in a real browser environment
• No files require special attention - implementation follows established patterns from similar components like TabsIndicator

Important Files Changed

Filename	Overview
packages/react/src/navigation-menu/content/NavigationMenuContent.tsx	Adds SSR support by rendering content with hidden attribute before hydration, then portaling after mount
packages/react/src/navigation-menu/content/NavigationMenuContent.test.tsx	Adds SSR tests validating content renders with hidden attribute on server and is removed post-hydration

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: hydration mismatch will occur between SSR (renders content in-place with hidden) and client (returns null or portal). consider adding suppressHydrationWarning to parent to avoid React warnings.

Suggested change

	if (!selfMounted) {
	return content;
	}
	if (!selfMounted) {
	return <div suppressHydrationWarning>{content}</div>;
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react/src/navigation-menu/content/NavigationMenuContent.tsx
Line: 148:150

Comment:
**logic:** hydration mismatch will occur between SSR (renders content in-place with `hidden`) and client (returns null or portal). consider adding `suppressHydrationWarning` to parent to avoid React warnings.

```suggestion
  if (!selfMounted) {
    return <div suppressHydrationWarning>{content}</div>;
  }
```

How can I resolve this? If you propose a fix, please make it concise.