Menu configuration

Menu configuration is done in a dedicated component of the Client project, typically Shared/MenuConfiguration.razor. This component is referenced by App.razor in the ChildContent of LgApp.

Simple menu

Declare items directly in the Menu, Sidebar, Toolbar, and TabContainerToolbar fragments of LgMenuConfiguration.

MenuConfiguration.razor

@inherits LgComponentBase

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Link="HomePage.Link()" />
        <LgMenuItem Text="#menuCatalog" Link="CatalogPage.Link()" />
    </Menu>
    <Sidebar>
        <LgMenuItem Link="SidePage.Link()" />
    </Sidebar>
    <Toolbar>
        <LgDebugMenuItem />
        <LgAboutMenuItem />
        <LgConnectMenuItem />
    </Toolbar>
</LgMenuConfiguration>

Technical menus

LgDebugMenuItem is intended for development configurations. It provides access to style reloading, the icons page, and application logs.

Menu groups

For a more complex configuration, declare reusable groups in MenuSetDeclarations, then insert them into the layout areas with LgIncludeMenuSet.

MenuConfiguration.razor

@inherits LgComponentBase

<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="grpCommon">
            <LgMenuItem Text="#menuHome" IconName="@IconNames.Home" Uri="/" />
            <LgMenuItem Link="CardListUsagePage.Link()" />
            <LgMenuItem Link="CounterPage.Link()" />
            <LgMenuItem Text="#menuFetchData" IconName="@IconNames.All.UiChecks" Uri="fetchdata" />
            <LgMenuItem Text="#menuCsv" IconName="@IconNames.All.UiChecks" Uri="CSV" />
        </LgMenuSet>

        <LgMenuSet Id="grpAdmin">
            <LgMenuItem IconName="@IconNames.All.GearFill" AutoHide="true">
                <LgMenuItem Text="#menuUser" IconName="@IconNames.All.PersonPlusFill">
                    <LgMenuItem Text="#menuUserList" IconName="@IconNames.Home" />
                    <LgMenuItem Text="#menuUserAdd" IconName="@IconNames.All.Wrench" />
                </LgMenuItem>
                <LgMenuItem Text="#menuLogs" IconName="@IconNames.All.CardList" />
            </LgMenuItem>
        </LgMenuSet>

        <LgMenuSet Id="grpCommonToolbar">
            <LgMenuItem Text="#menuLanguage">
                <LgMenuItem OnClick="SetFrenchAsync" Text="#languageFrench" />
                <LgMenuItem OnClick="SetEnglishAsync" Text="#languageEnglish" />
            </LgMenuItem>
            <LgMenuItem IconName="@IconNames.All.KeyFill" Uri="lgredirect/logout" Text="#disconnect" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="grpCommon" />
        <AuthorizeView Policy="@AppPolicies.ContentEditor">
            <LgIncludeMenuSet Id="grpAdmin" />
        </AuthorizeView>
        @if (App.WindowInformation.MediaType != MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="grpCommonToolbar" />
        }
    </Menu>

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

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    private Task SetFrenchAsync(ActionEventArgs args)
    {
        // Change the language on the client side and synchronize future server requests.
        App.SetLanguage("fr-FR");
        return Task.CompletedTask;
    }

    private Task SetEnglishAsync(ActionEventArgs args)
    {
        // Change the language on the client side and synchronize future server requests.
        App.SetLanguage("en-US");
        return Task.CompletedTask;
    }
}

In this example, grpCommon is always present, grpAdmin is rendered only if the policy is satisfied, and grpCommonToolbar switches from the toolbar to the main menu based on the display type.

Levels and composition

Sublevels are declared by nesting LgMenuItem. The main menu supports up to three levels. The sidebar supports up to two levels. When Scrollable is enabled on an item, do not add a third level in this dropdown list.

Typed links to pages

Always prefer the Link parameter over a hard-coded URI. The page exposes a static Link() method that centralizes the route, translated title, and icon.

CounterPage.razor.cs

[Route(ROUTE)]
public partial class CounterPage : LgPage
{
    private const string ROUTE = "counter";

    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#menuCounter", IconNames.All.CalculatorFill);
    }
}

MenuConfiguration.razor

<LgMenuItem Link="CounterPage.Link()" />

Pre-existing elements

Element	Usage
LgMenuTitle	Adds a text title in a menu.
LgMenuSeparator	Adds a separator.
LgNavigationBox<TPageLink>	Adds a navigation search area.
LgAboutMenuItem	Opens the About modal.
LgDebugMenuItem	Adds diagnostic entries useful in development.

Common parameters of LgMenuItem

Parameter	Role
OnClick	Action executed on click. Does not combine with navigation via Uri.
AutoHide	Automatically hides an empty submenu, for example after filtering by AuthorizeView.
CustomContent	Customizes the rendering of the item. Does not combine with Text.
IconName	Name of the displayed icon.
Link	Typed link produced by a Lagoon page.
Modal	Opens the URI in a modal of a given size.
Scrollable	Enables scrolling in the dropdown list.
Target	Name of the target browser window.
Text	Displayed label, translatable with #.
Uri	Path to open.
HideRootLevelText	Forces the display or hiding of text at the root level, notably in the toolbar.

Rights-based visibility

LgMenuItem and LgMenuSet do not have a PolicyVisible parameter. Use AuthorizeView around items or groups. PolicyVisible exists on LgStartupTab.

See also

• Layout definition
• Mobile / Desktop
• LgMenuConfiguration
• LgMenuItem