Blazor Layout = null

Please, I need a way to master Blazor multi-layered layouts, but for now, I desperately need to know how to null layouts so that I can add everything from `

<html>

</html>

myself on the @page directly.

Why do I want to do this?

in MVC I can make the ViewModel inherit from the _layout ViewModel so that I can dynamically add user images, name, properties... in the navigation and side-nav, even hide some nav options. like in the picture below.

Solution

Looks like you want to custom your MainLayout?

You can just clear it, open MainLayout.razor (where the _Layout lies) and only add @Body in it:

@inherits LayoutComponentBase

@Body

From your example, seems you just want to custom your NavMenu?

It's the same,open NavMenu.razor and just modify the navs.

And for extension, if you want to different types of Layout, you can use NavigationManager to

check the parameter in your url and it will use the related Layout, like:

@inherits LayoutComponentBase
@inject NavigationManager _navManager

@if (_navManager.Uri.Contains("CustomLayout1"))
{
    @Body                
}
else
{
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>
 }

So if the page is @page "/CustomLayout1/counter" Then it will use your null MainLayout in this demo.