How to create a layout in a Blazor Web App (.NET 8)

When developing a website/web application you will more than likely want it to have a consistent design across the vast majority of the pages to allow for a great user experience. In Blazor Web Apps that functionality can be implemented quite easily and that is the topic I will be discussing today.

Create Blazor Web App project

The IDE that I use is Rider so the first thing we will need to do is to create a Blazor Web App project using our chosen IDE.

LayoutComponentBase

In the context of Blazor a layout is a Razor component which inherits from the class LayoutComponentBase. This component can then be built to give a consistent look to the application in whichever way you want! Furthermore, something else a layout component must have is the Body property which designates where on the page the content of rendered components should display.

Within the Components folder you will notice a Layout folder and this is where you will need to place your additional layout files (By default the Blazor application uses the MainLayout razor component)

The default layout for an application can be set in the Routes.razor component within the DefaultLayout parameter of the RouteView.

However, if we wanted we could have different layouts for different sections of the application. This can be accomplished by creating a folder within the Components such as RickAndMorty and within this folder we would need to create an _Imports.razor component and within that _Imports.razor component we would reference the shared layout that we would want to apply on all of the components within the RickAndMorty folder.

Creating new layout

Our first step will be to create a new Razor component in the Layout folder and call it BigBangTheoryLayout.razor. Once you have created this component open it and enter the below line.

@inherits LayoutComponentBase