Layout
RadzenLayout allows you to define the global layout of your application (usually used in MainLayout.razor).
It has header, sidebar, body and footer sections which correspond to the RadzenHeader, RadzenSidebar, RadzenBody and RadzenFooter components.
Sections are optional and can be omitted.
These demos showcase application layout with optional header/sidebar/body/footer sections, full-height sidebar variants, overlay sidebar modes, right-positioned sidebars, dual left/right sidebars, RTL-aware start/end positioning, and icon-only sidebar configurations.
Sidebar, Header and Footer link
Create a standard layout with sidebar navigation, header, and footer sections using RadzenLayout components.
Full height Sidebar link
Create a sidebar that spans the full height of the viewport, sitting alongside the header and content.
Overlay Sidebar link
Create a sidebar that overlays the content when opened, perfect for responsive mobile layouts.
Full height overlay Sidebar link
Create a full-height overlay sidebar that covers the entire viewport height when opened.
Right Sidebar link
Use Position="SidebarPosition.Right" if you need to explicitly position the sidebar to the right, or Position="SidebarPosition.End" if you need to take into account RTL support.
Right full height Sidebar link
Position a full-height sidebar on the right side of the layout.
Right and Left Sidebar link
Use Position="SidebarPosition.Right" and Position="SidebarPosition.Left" if you need to explicitly position the sidebar to the right or to the left, without taking into account LTR or RTL direction.
Start and End Sidebar link
Use Position="SidebarPosition.Start" or Position="SidebarPosition.End" for international applications with RTL support.
Icon Sidebar link
Create a compact icon-only sidebar that expands to show labels on hover or click.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT