Building layouts in Blazor

Most applications have common pieces of UI shared across different pages such as menus, navbars, company branding, and some other content. Rewriting this markup in every page component is very inefficient in modern software development. The solution is to have a single place where we place this shared content and then reference it from the pages, and here is where layout comes into play.

So basically, a layout is a special type of Blazor component that defines the general structure of the app by hosting the shared markup.

Understanding our Blazor project’s default MainLayout

Before getting started with creating our own layout component, let’s understand the default layout that comes with a Blazor project. The MainLayout.razor file within the Shared folder is the default layout for every new Blazor project, so if we open that file, we are going to notice the following:

@inherits LayoutComponentBase<div class="page">...