Website layout

✅ Similar to Blazor Server

A layout in website design refers to the arrangement of elements on a webpage, including text, images, videos, and interactive features. A layout determines how the content is organized and presented to the user, and can have a significant impact on the user experience. In this tutorial, we will delve into the following topics:

• What is a layout component?
• How to create a layout component.
• Setting a default layout for entire website.
• Setting a layout for all components in a same folder.
• Set layout for a specific component.
• Using a component in multiple layouts.
• Layout overriding priority.
• Nested layout.

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

What is a layout component?

A layout component in Blazor is a component that defines the overall structure of a webpage. It serves as a wrapper for other components and provides a consistent look and feel across the entire application. The layout component has a @Body property, which serves as a placeholder for the content of the wrapped components.

Layout templates can be applied not only to the entire website but also to individual components. This allows for different components to have different layouts, or for a single layout template to be used to structure the layout of multiple components. This feature provides flexibility and modularity in the design of the user interface, as well as the ability to make changes to the layout of specific components without affecting the rest of the application.

How to create a layout component

1. Create a new component by inheriting from the LayoutComponentBase class. This will ensure that your component has access to the necessary properties and methods for functioning as a layout component.

@inherits LayoutComponentBase

2. Design the structure of your layout by adding various HTML elements and other components as desired. Be sure to include the @Body placeholder, which will be used to render the content of the wrapped components.

<main>
    @Body
</main>

Setting a default layout for entire website

In order to set the default layout for your website in Blazor, you can use the RouteView component. To do this, navigate to the App.razor file and update the DefaultLayout parameter of the RouteView component with the name of your desired layout component. For example:

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

Setting a layout for all components in a same folder

One way to organize similar dependent components is by grouping them into a folder. Additionally, instead of setting a layout for each individual component, you can set the default layout for all the components within a specific folder and its subfolders. Assuming you have the following folder structure:

To set the default layout for all the components inside a specific folder, you can create a new component with the name _Imports.razor within the desired folder. In this component, add the @layout directive in the directive section. For example:

@layout MyLayout

This tells Blazor to use the MyLayout component as the default layout for all the components within this folder and its subfolders.

It's important to note that the component must be named _Imports.razor, as this is a special name that Blazor looks for when searching for default layout settings. Additionally, be aware that there is a default _Imports.razor located at the same level as App.razor, you should not put @layout directive there, otherwise you will have an infinite loop.

Set layout for a specific component

The @layout directive allows you to specify the layout component that should be used to wrap the content of the current component.
For example, to use the MainLayout component as the layout for a specific component, you can add the following code in the directive section of that component:

@layout MyLayout

Using a component in multiple layouts

The LayoutView component in Blazor allows you to render a component in multiple layouts. This means that you can use the same component in different layouts, or even multiple times within the same layout. For example:

<LayoutView Layout="@typeof(MainLayout)">
  <MyComponent />
</LayoutView>
<LayoutView Layout="@typeof(SecondLayout)">
  <MyComponent />
</LayoutView>

Layout overriding priority

When a component has multiple layouts set by different methods, Blazor will select only one layout to display based on the order in which they are set. This order of precedence is known as the layout overriding chain. The following image illustrates the layout overriding chain in Blazor:

Nested layout

Nested layout is a powerful feature that allows for the extension of layout templates in multiple levels, without the need to modify the original template. This is in alignment with the SOLID principle of Open-Closed, which states that a module or class should be open for extension but closed for modification.
When nesting layouts, a chain of layouts is created where each level builds upon the previous one. The first level layout does not use any layout and serves as the foundation, while the second level layout uses the first level layout, and the third level layout uses the second level layout, and so on. This allows for easy modification of the common layout elements in one place, without having to make changes to every individual page or component. This provides flexibility and modularity in the design of the user interface, and makes it easier to maintain and extend the application's codebase.

Creating a layout chain in Blazor is a straightforward process. The first step is to create the first layout component, which serves as the foundation for the chain. To add additional levels to the chain, simply create new layout components and use the @layout directive to specify the previous layout component. For example, in the second level layout component, you would use the @layout directive with the name of the first level layout component. This process can be repeated to add as many levels as desired, with each new level building upon the previous one.

@layout FirstLevelLayout