Website layout

Layout is an important part in website development process. It's impact directly to the user interface and user experience. This tutorial includes:

• What is layout?
• How to create a layout?
• RouteView.
• Default layout for folder.
• @layout directive.
• LayoutView.
• Layout overriding priority.

You can download the example code used in this topic on GitHub.

What is layout?

Your component will have one tag or many tags, let's call it component content. Layout is how you wrap your component content. Each layout has a @Body property which is the placeholder of the wrapping component. The following image illustrate what a layout is:

Layout in Blazor is a wrapper for a component, not just a website page.

Based on the personality of a layout, you can split the layout into 2 types:

• Layout for pages: The layout that wraps the entire content of a website page.
• Layout for components: The layout that wraps one or more components.

How to create a layout?

1. Add a new component to your Shared folder.
2. Inherit from LayoutComponentBase. Add the following code to the directive section of your component.

@inherits LayoutComponentBase

3. (Optional) Design your layout. Add @Body as the placeholder of the wrapping component. For example:

<div class="bg-dark text-light">
    @Body
</div>

RouteView

You can use RouteView to set the default layout for your website. To use RouteView, navigate to App.razor and update the DefaultLayout parameter of the RouteView component. For example:

<RouteView RouteData="routeData" DefaultLayout="typeof(SecondaryLayout)" />

Default layout for folder

You can group similar Dependent components (see Component types section in Blazor WebAssembly Component .NET 6) into a folder. Furthermore, instead of set a layout for each component, you can set the default layout for all the components in the same folder and its subfolders. Assuming you have the following folder structure:

Create a new component with the name _Imports.razor in the folder you want to set default layout for all components inside. Add @layout directive at the directive section of the component. For example:

@layout FolderLayout

You need to name your component exactly _Imports.razor because it is a special component.

There is a default _Imports.razor which located at the same level App.razor. Do not put @layout directive there. Otherwise, you will have infinity loop.

@layout directive

@layout PrimaryLayout

<h3>MyComponent</h3>

LayoutView

<LayoutView Layout="typeof(DarkLayout)">
    <Index></Index>
</LayoutView>
<LayoutView Layout="typeof(LightLayout)">
    <Index></Index>
</LayoutView>

Layout overriding priority

RouteView is the first in the chain, which means anything later will override RouteView. LayoutView is the last in the chain, which means nothing can override LayoutView.