Dashboard Layout

ShellUI ships two dashboard layouts, each a sidebar plus a content area with a header, breadcrumb and theme toggle:

In v0.3.0, shellui add installs the files. You then make the dashboard your app's layout, which takes a few steps, all below. The examples use dashboard-02; for dashboard-01, use DashboardLayout01 instead.

1. Install

From your project root, after shellui init:

shellui add dashboard-02

This adds:

The sidebar needs an interactive render mode and shellui.js; shellui init already set up both in App.razor.

2. Make it the default layout

Open Components/Routes.razor and change DefaultLayout:

<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.DashboardLayout02)" />

With ASP.NET Core Identity (--auth Individual), the element is <AuthorizeRouteView ...>; change its DefaultLayout the same way.

@page "/reports"
@layout Layout.DashboardLayout02

3. Point the sidebar at your pages

AppSidebar.razor ships with placeholder links (/, /dashboard, /settings), a placeholder brand ("My App") and a placeholder user. Edit them to match your app. For the pages in a new Blazor project:

<SidebarMenuItem>
    <SidebarMenuButton Href="/" IsActive="@IsCurrentPath("/")" Tooltip="Home">
        <span>Home</span>
    </SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
    <SidebarMenuButton Href="/counter" IsActive="@IsCurrentPath("/counter")" Tooltip="Counter">
        <span>Counter</span>
    </SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
    <SidebarMenuButton Href="/weather" IsActive="@IsCurrentPath("/weather")" Tooltip="Weather">
        <span>Weather</span>
    </SidebarMenuButton>
</SidebarMenuItem>

Keep an icon inside each button if you want one; the placeholders show inline SVGs. IsCurrentPath highlights the link of the current page. Remove the Settings entry if you have no settings page.

4. Remove the old layout (optional)

After step 2, the template's MainLayout is no longer used. You can delete these from Components/Layout/:

• MainLayout.razor and MainLayout.razor.css
• NavMenu.razor and NavMenu.razor.css

Keep ReconnectModal.* (.NET 10). Before deleting, do these two things, or the build or the error bar will break.

Pages that name MainLayout. The .NET 10 template's Components/Pages/NotFound.razor has @layout MainLayout, and Identity's Components/Account/Shared/ManageLayout.razor does too. Change them to the dashboard:

@layout DashboardLayout02

The error bar. MainLayout.razor contains Blazor's error bar (<div id="blazor-error-ui">). Move it into Components/App.razor, just before </body>. Its old styles were in MainLayout.razor.css, so use this Tailwind-styled version:

<div id="blazor-error-ui" data-nosnippet class="fixed inset-x-0 bottom-0 z-[1000] hidden border-t border-border bg-background px-5 py-3 text-sm text-foreground shadow-lg">
    An unhandled error has occurred.
    <a href="." class="reload font-medium underline underline-offset-4">Reload</a>
    <span class="dismiss absolute right-4 top-3 cursor-pointer">🗙</span>
</div>

It stays hidden until Blazor shows it after an error.

5. Run it

dotnet watch

Your pages now render inside the dashboard. On desktop, Ctrl+B (⌘B on macOS) collapses and expands the sidebar; on small screens, the menu button in the header opens it.

Switching between 01 and 02

Install the other block and change the layout name in Routes.razor and in any @layout directives. Both layouts use the same AppSidebar.razor, so your links carry over.