Skip to content

[dialog][navigation menu] Nesting Dialogs in Navigation Menu creates conflicting dismiss actions #2390

@LeeCampbellr

Description

@LeeCampbellr

Bug report

Current behavior

When a Dialog component is rendered inside NavigationMenu content, clicking anywhere in the dialog (including buttons and content) closes the dialog. This makes dialogs unusable within navigation menus.

I believe this is what is happening:

  1. Click event originates on dialog content
  2. Dialog's useDismiss sees this as an "inside" click
  3. NavigationMenu's useDismiss sees this as an "outside" click
  4. NavigationMenu closes, unmounting the dialog
Screen.Recording.2025-07-30.at.9.34.00.AM.mov

Additionally the clicks while the dialog is open pass through the dialog and hit the navigation. If the dialog is sitting on top of another submenu item with a dialog trigger it will open that dialog on top of the currently open dialog.

Screen.Recording.2025-07-30.at.11.09.53.AM.mov

For reference the experience I'm trying to build is a "leaving website" confirmation modal for external links in the navigation. It's a bit of a unique use case given nesting a dialog in a navigation isn't a common experience, but hopefully provides some context for the issue here.

Workaround

I've been able to sidestep this issue by creating a div in the menu and using the container prop on the Dialog.Portal to portal the dialog inside the navigation. This might be the correct way to handle nested scenarios like this since it appears to create a useDismiss hierarchy. Though it feels weird to force nesting the dialog; ideally from an architectural, accessibility, and reusable approach I'd love to keep this dialog portaled into the body.

Expected behavior

A nested dialog/alert dialog inside a navigation should be interact-able with its own context that is layered over the navigation. Once the dialog is either dismissed or closed the navigation context should then take back over.

Reproducible example

https://codesandbox.io/p/devbox/silly-jang-99qgsk?file=%2Fapp%2Fpage.tsx%3A165%2C8

Base UI version

^1.0.0-beta.1

Which browser are you using?

Chrome & Safari

Which OS are you using?

Mac OS

Additional context

These seem tangentially related but not specifically tied to the problem shown here.
#2312
#2195

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: navigation menuChanges related to the navigation menu component.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions