Layouts

Layouts define common UI elements for the entire application - navigation, logo, copyright etc. In this article you will learn how to work with layouts in Radzen Blazor Studio.

INFO: Radzen Blazor Studio supports layout management since v1.15.0

Creating layouts

To create a layout:

1. Right-click the Shared directory of your application or click the + button next to your project name.
2. Select New Layout. This opens the Choose layout type dialog which allows you to pick from a list of layout templates.
   • Empty - empty layout
   • Sidebar - a layout with sidebar navigation which uses the RadzenPanelMenu. Optionally you can make the side bar occupy the full browser window height, move the sidebar to the right, add a footer.
   • Menu - a layout which uses the RadzeMenu component.
   • Login - a layout which is typically used for login pages.
3. Specify the Name of the layout. It should be a valid C# identifier (without whitespace, numbers or any invalid symbols). Radzen Blazor Studio will append Layout to the file name as it is a common convention.
4. Click Finish

TIP: Set Name to Main in order to replace the default layout of the application

Changing the layout of a page

To change the layout of a page

1. Open a page in design time.
2. Pick a layout from the Layout dropdown in the Page properties section of the property grid.
3. Save the page.

Rendering the layout in design time

By default Radzen Blazor Studio shows the layout of a page in design time preview. Use the Layout switch in the toolbar if you want to hide the layout and show only the page contents.

You can also globally toggle that option from the Radzen Blazor Studio settings (available from the in the bottom left corner).