Blazor For Kids

Content to Layout

In BlazorForKids, every layout element—Header, Footer, LeftSidePanel, and RightSidePanel—can include a fully customizable menu. These menus help your users navigate through the application, display user-specific options, and even toggle themes.

🏗️ Layout Elements

The framework offers four key layout areas you can work with:

• Header – Usually contains the logo and main navigation
• Footer – Suitable for secondary navigation or legal links
• LeftSidePanel – Commonly used for vertical navigation or tools
• RightSidePanel – Can be used for additional tools or user panels

Each of these elements supports menu creation and other display content through the IBkElementContent interface:

public interface IBkElementContent : IBkElementBase, IBkDisplayComponent
{
    void CreateMenu(Action<IBkMenu> menu);
    void CreateMarkup(string markup);
    void CreatePanel(Action<IBkElementContent> panel);
    void AddTitle(string title);
    void AddSubTitle(string subTitle);
    void AddText(string text);
}

📌 Example: Creating a Menu in the Header

Here’s a practical example of creating a menu in the header of your layout:

public void LayoutDesigner(IBkLayoutBuilder builder)
{
    builder.CreateHeader(header =>
    {
        header.DisplayComponent<ApplicationLogo>();
        
        header.CreateMenu(menu =>
        {
            menu.AddMenuItem<HomePage>();
            menu.AddMenuItem<EmployeeTasksPage>();
            menu.AddMenuItem<MyDocumentsPage>();

            menu.AddMenuItem<SettingsPage>(options =>
            {
                options.VisibleToRoles("Admin");
            });

            menu.AddMenuItem<LoginPage>(options =>
            {
                options.HiddenToAuthenticatedUsers();
                options.Icon(Icons.ARROW_LEFT_CIRCLE);
            });

            menu.AddDropDownMenuItem(options =>
            {
                options.VisibleToAuthenticatedUsers();
                options.Text(CurrentUser.DisplayName ?? "Current User");
                options.Icon(Icons.PERSON_CHECK);

                options.AddMenuItems(subMenu =>
                {
                    subMenu.AddMenuItem<LogoutPage>(logoutLink =>
                    {
                        logoutLink.Icon(Icons.ARROW_RIGHT_CIRCLE);
                    });

                    subMenu.AddMenuItem<AdminPage>(adminPageLink =>
                    {
                        adminPageLink.VisibleToRoles("Admin");
                    });
                });
            });

            menu.AddThemeSwitcher();
        });
    });
}

🧩 Menu Item Configuration Options

Each menu item offers a variety of options you can use to control visibility, appearance, and behavior:

public interface IBkMenuItemOptions : IBkElementBase
{
    void Text(string otherTextForLink);
    void Icon(string otherIcon);
    void Description(string otherToolTip);
    void AddQueryParameter(string name, string value);
    void VisibleToRoles(string roles);
    void VisibleToAuthenticatedUsers();
    void HiddenToAuthenticatedUsers();
    void AddMenuItems(Action<IBkMenuBase> subMenu);
    void UseTemplate<TMenuItemTemplate>() where TMenuItemTemplate : BkMenuItemTemplate;
}

📃 Page Type Requirements

Menu items must refer to a page that implements the following interface:

public interface IBkPage
{
    static abstract string Text { get; }
    static abstract string Description { get; }
    static abstract string Icon { get; }
    static abstract string Url { get; }
}

This interface is automatically implemented for all pages created using the BlazorForKids framework. It ensures that every page provides the necessary data for display in the menu.

🎨 Theme Switcher

You can add a button to your menu to allow users to switch between light and dark themes. Just call:

menu.AddThemeSwitcher();

This will place a toggle button in your menu that works out of the box.

🧠 Tips for Beginners

• Menus are created inside layout areas using CreateMenu.
• You can conditionally show/hide menu items based on user roles or authentication status.
• Each page you reference in a menu must implement IBkPage (automatically handled for you).
• Use AddDropDownMenuItem to nest other menu items.
• AddThemeSwitcher gives users a quick way to toggle dark/light mode.

📦 Menus in Footer and Side Panels

Besides the header, you can also add menus to other layout sections using similar syntax:

builder.CreateFooter(footer =>
{
    footer.CreateMenu(menu =>
    {
        menu.AddMenuItem<TermsAndConditionsPage>();
        menu.AddMenuItem<PrivacyPolicyPage>();
    });
});

builder.CreateLeftSidePanel(panel =>
{
    panel.CreateMenu(menu =>
    {
        menu.AddMenuItem<DashboardPage>();
        menu.AddMenuItem<ReportsPage>();
    });
});

builder.CreateRightSidePanel(panel =>
{
    panel.CreateMenu(menu =>
    {
        menu.AddMenuItem<HelpCenterPage>();
        menu.AddMenuItem<ContactSupportPage>();
    });
});

These menu areas work the same as the header. The only difference is where they appear in the layout.

📚 Nested Menus (Dropdowns)

Sometimes you want to group menu items under a parent menu item. For this, you can use AddDropDownMenuItem.

Here's an example:

menu.AddDropDownMenuItem(options =>
{
    options.Text("Tools");
    options.Icon(Icons.TOOLS);

    options.AddMenuItems(subMenu =>
    {
        subMenu.AddMenuItem<ExportDataPage>();
        subMenu.AddMenuItem<ImportDataPage>();
    });
});

The dropdown will show Tools as the parent, and when clicked or hovered, the nested items will appear.

🎨 Custom Menu Templates

If you want full control over how a menu item looks, you can use a custom Razor component as a template:

menu.AddMenuItem<SpecialOfferPage>(options =>
{
    options.UseTemplate<MyCustomMenuTemplate>();
});

The custom template component must inherit from BkMenuItemTemplate, which gives you access to all the data needed to build your own rendering logic.

🛠️ Advanced Examples

Mix and match everything you’ve learned to create smart, dynamic menus:

menu.AddDropDownMenuItem(options =>
{
    options.VisibleToAuthenticatedUsers();
    options.Text(CurrentUser.DisplayName ?? "Profile");
    options.Icon(Icons.PERSON);

    options.AddMenuItems(sub =>
    {
        sub.AddMenuItem<ProfilePage>();
        sub.AddMenuItem<SettingsPage>(opts => opts.VisibleToRoles("Admin"));
        sub.AddMenuItem<LogoutPage>(opts => opts.Icon(Icons.DOOR_OPEN));
    });
});

This structure creates a user dropdown with role-based and icon-enhanced entries.

✅ Summary

• You can define menus inside Header, Footer, LeftSidePanel, or RightSidePanel.
• Use CreateMenu to start defining your menu structure.
• Each menu item points to a page implementing IBkPage (automatically handled by the framework).
• You can customize visibility based on roles or authentication.
• Use dropdowns for grouping items and templates for advanced visual styling.
• Add AddThemeSwitcher() for user-friendly dark/light mode toggling.

Menus in BlazorForKids are flexible, easy to use, and fully customizable. They help you deliver powerful, role-aware navigation with just a few lines of code.