Skip to content

[navigation-menu] Close parent menus when nested link with closeOnClick is clicked#4276

Merged
atomiks merged 3 commits intomui:masterfrom
CiscoFran10:navigation-menu-close-on-click-bubble
Mar 10, 2026
Merged

[navigation-menu] Close parent menus when nested link with closeOnClick is clicked#4276
atomiks merged 3 commits intomui:masterfrom
CiscoFran10:navigation-menu-close-on-click-bubble

Conversation

@CiscoFran10
Copy link
Contributor

Closes #4262

Previously, when a nested link with closeOnClick was clicked, only the nearest NavigationMenu.Root closed and the parent menu stayed open. We now bubble that close up so the whole menu closes without needing to control the root with value / onValueChange.

Changes

  • NavigationMenuRoot.tsx: Nested roots get the parent via useNavigationMenuRootContext(true). In setValue, after updating local state, if we're closing with eventDetails.reason === REASONS.linkPress, we call parentRootContext.setValue(null, eventDetails) so the parent (and its ancestors) close as well.
  • NavigationMenuRoot.test.tsx: Added two fixtures, one with a single nested level and optional onValueChange, one with three nested levels and three tests under "nested menus": parent closes when nested link is clicked, parent onValueChange is called with null, and all three levels close when the deepest link is clicked.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 6, 2026

commit: f771eec

@mui-bot
Copy link

mui-bot commented Mar 6, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+65B(+0.01%) 🔺+14B(+0.01%)

Details of bundle changes


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

@netlify
Copy link

netlify bot commented Mar 6, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 11b6566
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69afaccfd426520008abc5cb
😎 Deploy Preview https://deploy-preview-4276--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@zannager zannager added the component: navigation menu Changes related to the navigation menu component. label Mar 6, 2026
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 9, 2026
@atomiks atomiks added type: bug It doesn't behave as expected. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Mar 10, 2026
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 10, 2026
…ge-fix

# Conflicts:
#	packages/react/src/navigation-menu/root/NavigationMenuRoot.test.tsx
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 10, 2026
@atomiks
Copy link
Contributor

atomiks commented Mar 10, 2026

Codex Review

Overview

This patch makes closeOnClick links inside nested navigation menus close the parent menus as well, and it adds regression coverage for nested and deeply nested cases. The branch now includes the current master, so this review reflects the full PR diff on top of the latest base.

Findings (None)

No blocking issues found in this patch.

Confidence: 4/5

High confidence based on a full pass over packages/react/src/navigation-menu/root/NavigationMenuRoot.tsx and packages/react/src/navigation-menu/root/NavigationMenuRoot.test.tsx, plus targeted NavigationMenuRoot runs in JSDOM and Chromium after merging the latest master.

Notes

  • Verified with pnpm test:jsdom NavigationMenuRoot --no-watch.
  • Verified with pnpm test:chromium NavigationMenuRoot --no-watch.

@atomiks atomiks merged commit e37b477 into mui:master Mar 10, 2026
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: navigation menu Changes related to the navigation menu component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[navigation menu] closeOnClick only closes the nearest NavigationMenu.Root in nested menus

4 participants