Using Blazor layout components

Most web pages typically feature fixed elements such as headers, footers, or menus. By designing a page with a layout combined with its content, we can minimize redundant code. The page itself displays the content intended for users, while the layout assists in constructing visual styles and providing navigational methods.

Blazor layout components are classes derived from LayoutComponentBase. Any functionality applicable to regular Razor components can also be applied to layout components.

In Listing 9.1, we observe that MainLayout serves as the default layout for the pages. Its definition can be found in Listing 9.2, as shown below:

@inherits LayoutComponentBase                             //(1)
<div class="page">
  <div class="sidebar">
    <NavMenu />                                           //(2)
  </div>
  <main>
    @Body                                                 //(3)
  <...