Layout

The RCL ships three composable layouts: DashboardLayout for the full app shell, AuthLayout for login/register pages, and an empty layout you supply for standalone pages.

DashboardLayout

DashboardLayout is the complete AdminLTE app shell: topbar + sidebar + content + footer + command palette. Set it as your MainLayout so every page inherits the shell. It reads branding, the menu and color-mode settings straight from AdminLteOptions.

@inherits LayoutComponentBase

<DashboardLayout User="_user">
    <TopbarEnd>
        <NavMessages Messages="_messages" />
        <NavNotifications Notifications="_notifications" />
        <NavTasks Tasks="_tasks" />
    </TopbarEnd>
    <ChildContent>
        @Body
    </ChildContent>
</DashboardLayout>

Parameter	Type	Purpose
`ChildContent`	RenderFragment	Page body rendered inside `<main class="app-main">` (usually an `AppContent`).
`User`	TopbarUser?	User shown in the topbar account dropdown (`Name`, `Role`, `AvatarUrl`, `ProfileUrl`, `LogoutUrl`).
`TopbarEnd`	RenderFragment?	Inject extra items into the default topbar's end slot (e.g. `NavMessages`, `NavNotifications`, `NavTasks` dropdowns).
`TopbarContent`	RenderFragment?	Override the default topbar entirely.
`SidebarContent`	RenderFragment?	Override the default sidebar entirely.
`FooterContent`	RenderFragment?	Override the default footer entirely.
`AuthorizedUser`	ClaimsPrincipal?	Principal used to filter the menu/palette to authorized items. When null, the full menu shows.

DashboardLayout tracks the current path and re-runs AdminLTE's JS plugin initialiser after each interactive render, so push-menu, treeview and collapsible cards keep working as you navigate.

AppContent

Wrap each page's body in AppContent to get the page header (title + breadcrumbs) and the content container.

<AppContent Title="Dashboard" Breadcrumbs="_breadcrumbs">
    <div class="row">
        <!-- page content -->
    </div>
</AppContent>

@code {
    private readonly IReadOnlyList<Breadcrumb.Crumb> _breadcrumbs =
    [
        new("Home", "/"),
        new("Dashboard"),
    ];
}

Parameters: Title (header text), Breadcrumbs (an IReadOnlyList<Breadcrumb.Crumb> rendered on the right), Fluid (defaults true for container-fluid; set false for container-lg) and HeaderContent to replace the title with custom markup.

AuthLayout

AuthLayout is the centered card layout for login and register pages. Use it inside an empty layout (no sidebar/topbar). It drives the box, logo and card-body class names from AuthType.

@page "/login"
@layout EmptyLayout

<AuthLayout AuthType="login" Variant="v2" LogoHref="/">
    <p class="login-box-msg">Sign in to start your session</p>
    <EditForm Model="_model" OnValidSubmit="SignIn">
        <Input Type="email" @bind-Value="_model.Email" Placeholder="Email" Prepend="@@" />
        <Input Type="password" @bind-Value="_model.Password" Placeholder="Password" Append="🔒" />
        <Button Type="submit" Theme="primary" Block="true" Label="Sign in" />
    </EditForm>
</AuthLayout>

Parameter	Default	Purpose
`AuthType`	`login`	`login` or `register` — picks `login-box`/`register-box` class names.
`Variant`	`default`	`default` (logo above the card) or `v2` (logo inside the card header).
`LogoHref`	`/`	Where the logo links to.
`Logo`	—	Custom logo markup (defaults to AdminLTE).

EmptyLayout for standalone pages

For pages that should not render the dashboard shell (login, lockscreen, error pages), define a minimal layout in your app and apply it with the @layout directive:

@* EmptyLayout.razor *@
@inherits LayoutComponentBase

@Body

Then on the page: @layout EmptyLayout. This lets auth pages use AuthLayout without inheriting the topbar/sidebar.

AdminLTE 4 · ASP.NET port Edit on GitHub