Techie BabajiLearn to Code. Build Real Skills.
Blazor · App Structure

Layouts

Layouts hold the parts that repeat on every page — header, menu, footer — so pages only contain their own content.

Intermediate 5 min Lesson 15 of 31Examples target .NET 9 Blazor Web App.
Before you start:Routing
0/31 in Blazor
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 29, 2026

Related tutorials

Interview questions

Learning objectives#

  • Create a layout with @Body
  • Apply layouts per page or folder
  • Nest layouts
  • Build a responsive navigation menu

Explanation#

A layout is a component that inherits LayoutComponentBase and renders @Body where the page content goes.

The default layout is set in Routes.razor (<RouteView DefaultLayout="typeof(Layout.MainLayout)" />). A page can choose another with @layout AdminLayout.

An _Imports.razor file in a folder can apply @layout to every page in that folder.

Layouts can be nested: AdminLayout can itself use @layout MainLayout.

Code example: An admin layout#

Razor / MarkupComponents/Layout/AdminLayout.razor Illustrative
@inherits LayoutComponentBase
@layout MainLayout


<div class="admin">
    <aside>
        <nav aria-label="Admin">
            <NavLink href="admin" Match="NavLinkMatch.All">Dashboard</NavLink>
            <NavLink href="admin/products">Products</NavLink>
            <NavLink href="admin/orders">Orders</NavLink>
        </nav>
    </aside>
    <section class="admin-content">
        @Body
    </section>
</div>


@* Components/Pages/Admin/_Imports.razor *@
@* @layout AdminLayout *@
Expected output
Every page under Pages/Admin shows the site header and footer (from MainLayout) plus the admin side menu, with the page content in the right column.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. The layout inherits LayoutComponentBase.
  2. @layout MainLayout nests it inside the main site layout.
  3. NavLink items highlight the current section.
  4. _Imports.razor applies the layout to every admin page.

Real-world use case#

A public site layout and a separate admin layout with a side menu, shared header and footer.

Common mistakes#

Repeating header markup on every page

Put shared UI in a layout so changes happen once.

Making the whole layout interactive just for a menu toggle

Make only the menu component interactive; keep the layout static.

Best practices#

  • Keep layouts thin
  • Use _Imports.razor for folder-wide layouts
  • Use semantic landmarks (header, nav, main, footer)
  • Interactive islands instead of interactive layouts

Remember this#

Layout = LayoutComponentBase + @Body.

@layout on a page or in _Imports.razor.

Layouts can nest.

Practice exercise#

Your task: Make a single page use a layout called BlankLayout.

Show solution
Razor / Markup Illustrative
@page "/print/{Id:int}"
@layout BlankLayout

Mini quiz#

Layouts quizMultiple choice Question 1 of 1

Where does a layout render the page content?

Score so far: 0/0

Want more? Practise all Blazor MCQs · Blazor interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.