How to close a menu outside it

[xcaptain]

Using the template as an example, everytime click the button would open/close the menu

aspnetcore/src/Components/WebAssembly/Samples/HostedBlazorWebassemblyApp/Client/Shared/NavMenu.razor

Lines 33 to 36 in 63c8031

	private void ToggleNavMenu()
	{
	collapseNavMenu = !collapseNavMenu;
	}

I want to ask how to close the menu when click otherwhere of the page, a general solution is to add a global event listener

document.addEventListener('click', collapseTheMenu)

But in blazor this global event listener doesn't know the inner state of the menu component, so what's the recommended way to solve it in blazor?

[danroth27]

To share state across components you have some options:

• Pass parameters from parent components to child components.
• Use cascading values and parameters.
• Use dependency injection to have a shared service.

[mayur-ekbote]

There is no direct solution in Blazor. You have only two options:

1. Implement the JS functionality upon opening the menu. It would require you to use JSInterop
2. Show the menu on a fixed backdrop modal. Add the closing logic in the @OnClick event of the backdrop

[xcaptain]

Can you be more specific about using JSinterop?

I know first step is document.addEventListener('click', collapseTheMenu) but how do the global event listener collapse the blazor menu component?

I found it's a little difficult to implement a dropdown menu in blazor

[xcaptain]

The fluentUI is using a fullscreen overlay layer, click elsewhere will trigger the overlay close, https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Menu/FluentMenu.razor

but I don't think it's a good solution.

[xcaptain]

I think the easiest way to implement a collapsible menu is using the popover api, but saddly this feature is not widely used.