Create Layout

Learn how to create a layout

Defining Layouts Using LayoutDesigner

In BlazorForKids, the LayoutDesigner() method is where you define the structural layout of your application feature. This method allows you to declaratively build and customize the visual and navigational skeleton that will host your feature’s pages and components.

Layouts are essential for providing a consistent user experience across pages. They typically include headers, navigation menus, side panels, and footers — all wrapped around a main content area where individual pages are rendered.

The method receives an instance of IBkLayoutBuilder, which exposes fluent APIs to configure all layout regions.

Layout Structure Options

You can design your layout in many ways, depending on your application needs. Some common combinations include:

  • Minimal Layout: No header, footer, or sidebar. Good for login pages or modals.
  • Header-Only Layout: A layout with just a top menu or logo. Clean and simple.
  • Sidebar Layout: Includes left or right side panels for navigation or filters.
  • Header + Sidebar: A popular structure for admin dashboards or productivity tools.
  • Header + Footer: Ideal for marketing-style layouts or informational pages.
  • Full Layout: Includes header, footer, sidebar(s), and content area.

Available Layout Regions

Here are the primary layout elements you can configure inside LayoutDesigner():

  • builder.CreateHeader(...) – Adds a top navigation/header area. You can display components (like a logo) and define a dynamic menu.
  • builder.CreateFooter(...) – Adds a footer section, typically used for copyrights, links, or static content.
  • builder.CreateLeftSidePanel(...) – Adds a collapsible sidebar to the left. Common for main navigation.
  • builder.CreateRightSidePanel(...) – Adds an additional panel to the right side. Great for filters, notifications, or user tools.
  • builder.Content(...) – Defines the layout's main grid and content placement. Here, you can specify rows, columns, and how content and page placeholders are arranged.

Grid-Based Content Area

The content area is typically structured using a flexible grid. You define the number of rows and columns, and specify what to display in each cell:

  • content.DisplayComponent<T>(row, column) – Places a specific component at the given grid position.
  • content.PagePlaceHolder(row, column) – Reserves space where the page content will be rendered within the layout.

Additional Configuration Options

Beyond visual structure, the layout builder offers several powerful utilities:

  • Base URL for Routing:
    builder.BaseUrl("/custom-path") – Overrides the default route prefix derived from the layout name.
  • Query Parameter Propagation:
    builder.PropagateQueryParameters() – Ensures that query parameters in the URL are forwarded to all child pages and menu items.
  • CSS Styling:
    builder.CssClass("my-layout-style") – Adds a custom CSS class to the root layout container for styling purposes.
  • Role-Based Access Control:
    builder.RestrictAccessTo("Admin, Manager", ...) – Restricts access to the entire layout based on user roles.

Layering Layouts

One of the unique and powerful features in BlazorForKids is the ability to build nested layouts. This allows you to define a shared parent layout (e.g., MainLayout) and then child layouts that inherit from it (e.g., HomeLayout, ReportsLayout).

By using the [Layout] attribute on your layout class, you specify which parent layout it belongs to. This creates a layered UI structure, where top-level regions like branding or app-level navigation are defined once and reused across multiple features.

For example, you may have:

  • MainLayout – Provides app-level branding and main navigation.
  • HomeLayout – Inherits from MainLayout and includes a dashboard-specific sidebar and content area.
  • SettingsLayout – Inherits from MainLayout but offers its own specialized tools and pages.

Best Practices

  • Keep your layout definitions focused and feature-specific. Don’t overload a layout with too many responsibilities.
  • Use shared layouts (like MainLayout) to define application-wide structure (headers, footers).
  • Use nested layouts to encapsulate logic and visuals unique to a given feature.
  • Use PropagateQueryParameters if your feature depends on URL state (filters, tokens, etc).
  • Always define PagePlaceHolder in your content area so pages can render properly inside the layout.

Sample layout implementation

layout layout layout layout layout

publicpartialclassHomeLayout:IBkApplicationLayout

{

// Empty Layout    publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)

    {

    }

// Layout with Header    publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)

    {

        builder.CreateHeader(header=>

        {

//... header configuration        });

    }

// Layout with Header and Left Side Panel    publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)

    {

        builder.CreateHeader(header=>

        {

//... header configuration        });

        builder.CreateLeftSidePanel(left=>

        {

//... left side panel configuration        });

    }

// Layout with Header and Left Side Panel and Right Side Panel    publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)

    {

        builder.CreateHeader(header=>

        {

//... header configuration        });

        builder.CreateLeftSidePanel(left=>

        {

//... left side panel configuration        });

        builder.CreateRightSidePanel(right=>

        {

//... right side panel configuration        });

    }

// Layout with Header and Left Side Panel and Right Side Panel and Footer    publicvoidLayoutDesigner(IBkLayoutBuilderbuilder)

    {

        builder.CreateHeader(header=>

        {

//... header configuration        });

        builder.CreateLeftSidePanel(left=>

        {

//... left side panel configuration        });

        builder.CreateRightSidePanel(right=>

        {

//... right side panel configuration        });

        builder.CreateFooter(footer=>

        {

//... footer configuration        });

    }

}

As you've seen in the examples above, the layout of your page is controlled by how you implement the LayoutDesigner method in your layout class. By calling different methods like CreateHeader or CreateLeftSidePanel, you decide how the header, sidebar, and content areas are arranged on the screen.

This makes it easy to customize the user experience depending on your application's needs — you can build a simple layout with no header, a layout with just a top header, or a more complex one with both a header and a sidebar. The rest of the page will automatically adjust and fill the remaining space.

Now that you understand how layout definitions work, you're free to create your own custom layouts and control how each page should look and behave. With just a few lines of code, you can structure your application in a way that’s both clean and user-friendly.

An unhandled error has occurred. Reload 🗙