LgMenuConfiguration

LgMenuConfiguration centralizes the declaration of the main menu, sidebar, and application toolbars. It is a configuration component with no visual rendering of its own, placed in the layout.

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Home" IconName="@IconNames.HouseFill" Uri="dashboard" />
    </Menu>
</LgMenuConfiguration>

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• NuGet package: Lagoon.UI

Centralized configuration

Place a single LgMenuConfiguration in the application layout, then distribute entries between Menu, Sidebar, Toolbar, and TabContainerToolbar according to their display area.

Usage

Define a simple menu in the layout

Declare the menu in a dedicated component of the client project (often Shared/MenuConfiguration.razor). The four zones correspond to the main menu, sidebar, toolbar, and toolbar of the application tab container.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Home" IconName="@IconNames.Home" Uri="dashboard" />
        <LgMenuItem Link="@OrdersPage.Link()" />
    </Menu>

    <Sidebar>
        <LgMenuTitle Text="#Navigation" />
        <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />
        <LgMenuSeparator />
        <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" />
    </Sidebar>

    <Toolbar>
        <LgMenuItem Text="#Refresh" IconName="@IconNames.Loading" OnClick="RefreshDashboardAsync" />
    </Toolbar>

    <TabContainerToolbar>
        <LgMenuItem Text="#OpenOrders" IconName="@IconNames.All.BoxArrowUpRight" Uri="orders" />
    </TabContainerToolbar>
</LgMenuConfiguration>

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    // Re-triggers loading of visible data in the dashboard from the toolbar.
    private async Task RefreshDashboardAsync(ActionEventArgs args)
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#DashboardRefreshed");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Extract reusable groups with LgMenuSet

MenuSetDeclarations declares reusable groups identified by Id. LgIncludeMenuSet then inserts them into one or more zones. Use AuthorizeView for conditional visibility: LgMenuItem has no PolicyVisible parameter.

MenuConfiguration.razor

<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="common-menu">
            <LgMenuItem Text="#Home" IconName="@IconNames.Home" Uri="dashboard" />
            <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />
        </LgMenuSet>

        <LgMenuSet Id="admin-menu">
            <LgMenuItem Text="#Users" IconName="@IconNames.All.PeopleFill" Uri="admin/users" />
            <LgMenuItem Text="#Roles" IconName="@IconNames.All.ShieldLockFill" Uri="admin/roles" />
        </LgMenuSet>

        <LgMenuSet Id="toolbar-menu">
            <LgMenuItem Text="#Settings" IconName="@IconNames.Admin" Uri="settings" />
            <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="common-menu" />

        <AuthorizeView Policy="Administration">
            <Authorized>
                <LgMenuItem Text="#Administration" IconName="@IconNames.Admin" AutoHide="true">
                    <LgIncludeMenuSet Id="admin-menu" />
                </LgMenuItem>
            </Authorized>
        </AuthorizeView>

        @if (App.WindowInformation.MediaType == MediaType.Mobile)
        {
            <LgIncludeMenuSet Id="toolbar-menu" />
        }
    </Menu>

    <Toolbar>
        @if (App.WindowInformation.MediaType == MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="toolbar-menu" />
        }
    </Toolbar>
</LgMenuConfiguration>

Refresh a dynamic menu

When composition depends on state calculated on the client side, inject MenuService into the code-behind of the menu component and call Refresh or RefreshAll after modifying that state.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Support" IconName="@IconNames.Question" AutoHide="true">
            @if (_showSupportLinks)
            {
                <LgMenuItem Text="#Documentation" Uri="help/documentation" />
                <LgMenuItem Text="#ContactSupport" Uri="help/contact" />
            }
        </LgMenuItem>
    </Menu>

    <Toolbar>
        <LgMenuItem Text="#ToggleSupport" IconName="@IconNames.Question" OnClick="ToggleSupportLinksAsync" />
    </Toolbar>
</LgMenuConfiguration>

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    // Stores the visibility of support links; useful for rebuilding menu fragments on demand.
    private bool _showSupportLinks = true;

    [Inject]
    private MenuService MenuService { get; set; }

    // Toggles the visibility state and forces Lagoon to re-read the affected menu zones.
    private Task ToggleSupportLinksAsync(ActionEventArgs args)
    {
        _showSupportLinks = !_showSupportLinks;
        MenuService.Refresh(MenuPosition.MenuTop | MenuPosition.MenuToolbar);
        return Task.CompletedTask;
    }
}

Properties

All [Parameter] properties of LgMenuConfiguration.

Name	Type	Default	Declared in	Description
MenuSetDeclarations	RenderFragment	null	LgMenuConfiguration	Declares reusable menu sets (LgMenuSet) identified by Id.
Menu	RenderFragment	null	LgMenuConfiguration	Content of the main menu, typically displayed in the header or top navigation bar.
Sidebar	RenderFragment	null	LgMenuConfiguration	Content of the sidebar menu.
Toolbar	RenderFragment	null	LgMenuConfiguration	Content of the application's main toolbar.
TabContainerToolbar	RenderFragment	null	LgMenuConfiguration	Content of the toolbar integrated into the application tab container.

Associated reusable components

LgMenuSet

LgMenuSet declares a group of reusable menu entries in MenuSetDeclarations.

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgMenuSet	Content of the reusable group.
Id	string	null	LgCustomMenuSet	Unique identifier of the group. Required; a duplicate causes an error at initialization.

LgIncludeMenuSet

LgIncludeMenuSet inserts a group previously declared by LgMenuSet.

Name	Type	Default	Declared in	Description
Id	string	null	LgIncludeMenuSet	Identifier of the LgMenuSet to include.

Accessibility

• Keep a translated Text on important LgMenuItem, even when the icon is present.
• If the root text is hidden in certain renderings, provide a tooltip or equivalent label on the affected items.
• Structure the sidebar with LgMenuTitle and LgMenuSeparator to make groups more readable.

Related components

• LgMenuItem — clickable menu entry.
• LgMenuTitle — section title for the sidebar.
• LgMenuSeparator — visual separator between groups.
• LgTabContainer — can consume TabContainerToolbar.