Use @layout directive

The @layout directive is used to set the layout for the component and overriding the settings from _Imports.razor and <RouteView>.

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

Creating a layout

Before setting the layout for components, you need a layout first. Follow the steps described in Theming and Layouts guide to create a layout. In this example, we will use the following layout:

@inherits LayoutComponentBase

<div class="container-fluid">
    @Body
</div>

Changing the layout

Once you have the layout, you can use it in the @layout directive.

@layout BlankLayout

<h3>ComponentUsingBlankLayout</h3>