Complex Layout Management

Implement sidebar navigation and dynamic dashboard layouts using component composition.

In this lesson, you will learn how to orchestrate sophisticated, responsive UI structures by leveraging Blazor’s component composition to create modular, dynamic dashboard layouts.

Beyond Simple Layouts

While standard MainLayout.razor files are sufficient for basic applications, "Complex Layout Management" involves treating your dashboard as a collection of pluggable components. Instead of hardcoding a sidebar, we define a layout contract where the Body is merely one piece of a reactive puzzle.

The core idea is to separate your Layout Shell (the scaffolding) from Layout Providers (the state and logic). By injecting a state service into your layout, you can toggle sidebar visibility or swap navigation menus dynamically based on user context or permissions.

Implementing Component Composition

To achieve this, we define a DashboardShell.razor that utilizes the @Body directive, but wraps it in state-aware containers:

@inject NavigationState NavState

<div class="app-container @(NavState.IsExpanded ? "sidebar-open" : "")">
    <aside class="sidebar">
        <NavMenu />
    </aside>
    
    <main class="content">
        <Header />
        @Body
    </main>
</div>

In this setup, the NavMenu component doesn't need to know about the layout's internals. Instead, the NavState (a scoped service) acts as the mediator. When a user clicks a "Collapse" button, the service notifies the layout to re-render. This keeps your styling logic decoupled from your navigation business logic.

Dynamic Dashboard Composition

For complex dashboards, you can further refine this by passing components as parameters. By using RenderFragment, you can create a generic "DashboardSlot" component that allows specific pages to inject their own toolbars or context-sensitive widgets into the layout's header:

<Header>
    <ToolbarActions>
        @ToolbarContent
    </ToolbarActions>
</Header>

By nesting these fragments, you avoid "prop drilling" and ensure that the layout remains flexible enough to handle disparate pages—such as a data-heavy grid view versus a settings-focused profile view—without needing separate Layout files for every module.

Key Takeaway: Complex layout management is best achieved by combining component composition with scoped state services to decouple the layout scaffolding from the specific content requirements of individual pages.