Using a layout

Please help!

If you've found this site useful, please...

Specifying a default layout for the app

The most generic way to specify a layout is to edit the /Pages/_Imports.razor file and edit the single line of code to identify a different layout.

@layout MainLayout

The name of the layout is strongly typed. Blazor will only syntax-highlight the code correctly if it there is a layout with the name specified, the compiler will also fail if the identifier is incorrect.

Note: Obviously you can alter the /Shared/MainLayout.razor file if you just wish to alter the appearance of the existing layout.

Specifying a default template for an area of the app

If your app has separate areas to it, for example an “Admin” area, it is possible to specify a default layout to use for all pages within that area simply by grouping them within their own child-folder that has its own _Imports.razor file.

Create a new Blazor client-side app, and then update the navigation menu to contain a link to a new page we’ll create shortly.

  1. Open the /Shared/NavMenu.razor file.
  2. Locate the last <li> element, it should contain a <NavLink> element.
  3. Duplicate the <li> element.
  4. Change the NavLink’s href attribute to "admin/users".
  5. Change the text of the link to Admin users.

Next we’ll create a very basic page

  1. Expand the /Pages node in the Solution explorer.
  2. Create a folder named Admin.
  3. Create a new file named within the folder named AdminUsers.razor.
@page "/admin/users"


Note: The URL to the page does not have to reflect the folder structure.

Running the app now will present you with an app that has a new menu item named “Admin users”. When you click on the item it will show a very basic page that simply says “Users”. Next we’ll create a default layout for all Admin pages.

  1. Create another new file in the Admin folder named _Imports.razor.
  2. Enter the following code.
@layout AdminLayout

At this point there is no file within the app named AdminLayout, so you should see a red-line in Visual Studio beneath the name indicating it cannot be found. You can fix this by creating an AdminLayout.razor in the /Shared folder.

@inherits LayoutComponentBase


If you now run the app and click the Admin users link you will see an awful user experience consisting merely of a <h1> and a <h2>. We will fix this in the section on Nested layouts, but for now we’ll use it as an exercise in how to explicitly specify a layout from the page itself.

Specifying a layout explicitly for an individual page

So far we’ve seen that a default layout can be specified in the /Pages/_Imports.razor file. We’ve also seen that this setting can be overridden by Blazor finding a more specific _Imports.razor file closer to the page it is rendering. The final (and most explicit) level of specifying a template to use is to literally specify it in the page itself using the @layout directive.

@page "/admin/users"
@layout MainLayout


Running the app again and clicking on the Admin users link will now show basic page using the app’s standard layout.

Please help!

If you've found this site useful, please...