LgMenuItem

LgMenuItem represents a navigation or action entry in the main menu, sidebar, or toolbar. It can navigate to a URI, use an LgPageLink, open a modal, trigger a command, or contain sub-items.

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

• Namespace: Lagoon.UI.Components
• Inherits from: LgCustomMenuItem → LgAriaComponentBase → LgComponentBase
• Interfaces: IActionComponent
• NuGet package: Lagoon.UI

Typed navigation

Prefer Link="@MyPage.Link()" over a hardcoded URI when the page already exposes a Link() method.

Usage

Navigate with a typed link

Prefer Link when the page exposes a static Link() method. The menu then automatically retrieves the URI, title, and icon from the LgPageLink.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Link="@OrdersPage.Link()" />
    </Menu>
</LgMenuConfiguration>

OrdersPage.razor.cs

[Route(ROUTE)]
public partial class OrdersPage : LgPage
{
    // Unique route of the page: centralized to avoid hardcoded URIs in the menu.
    private const string ROUTE = "orders";

    // Creates the typed link used by menus, startup tabs, or navigation buttons.
    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#Orders", IconNames.All.Cart3);
    }
}

Create a hierarchical menu

Nest LgMenuItem components to create submenus. The main menu supports up to three levels; the sidebar supports up to two levels.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3">
            <LgMenuItem Text="#OrdersList" Uri="orders" />
            <LgMenuItem Text="#NewOrder" IconName="@IconNames.Add" Uri="orders/create" />

            <LgMenuItem Text="#Reports" IconName="@IconNames.All.BarChartFill">
                <LgMenuItem Text="#SalesReport" Uri="orders/reports/sales" />
                <LgMenuItem Text="#StockReport" Uri="orders/reports/stock" />
            </LgMenuItem>
        </LgMenuItem>
    </Menu>
</LgMenuConfiguration>

Manage visibility with AuthorizeView and AutoHide

To hide entries based on permissions, wrap them in AuthorizeView. AutoHide hides the parent if all its conditional sub-items are absent.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Administration" IconName="@IconNames.Admin" AutoHide="true">
            <AuthorizeView Policy="Administration">
                <Authorized>
                    <LgMenuItem Text="#Users" IconName="@IconNames.All.PeopleFill" Uri="admin/users" />
                    <LgMenuItem Text="#Roles" IconName="@IconNames.All.ShieldLockFill" Uri="admin/roles" />
                </Authorized>
            </AuthorizeView>
        </LgMenuItem>
    </Menu>
</LgMenuConfiguration>

Trigger an action, confirm, or open a modal

OnClick executes a local handler. ConfirmationMessage requests confirmation before the action, except with CommandName. Modal opens the URI in a Lagoon modal window.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Toolbar>
        <LgMenuItem Text="#Refresh"
                    IconName="@IconNames.Loading"
                    ConfirmationMessage="#ConfirmRefresh"
                    OnClick="RefreshAsync" />

        <LgMenuItem Text="#CreateOrder"
                    IconName="@IconNames.Add"
                    Uri="orders/create"
                    Modal="@ModalSize.Large" />

        <LgMenuItem Text="#ExternalHelp"
                    IconName="@IconNames.Question"
                    Uri="https://support.example.com"
                    Target="_blank" />
    </Toolbar>
</LgMenuConfiguration>

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    // Refreshes the data visible from the menu and displays user feedback on success.
    private async Task RefreshAsync(ActionEventArgs args)
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#RefreshDone");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Adapt display in a toolbar

In a toolbar, the text of root items is hidden by default. Use HideRootLevelText="false" to force it, ShowTextAsTooltip to display a tooltip, and HideDropDownArrow to simplify a menu button.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Toolbar>
        <LgMenuItem Text="#Settings"
                    IconName="@IconNames.Admin"
                    Uri="settings"
                    HideRootLevelText="false"
                    ShowTextAsTooltip="true" />

        <LgMenuItem Text="#MoreActions"
                    IconName="@IconNames.All.ListUl"
                    HideDropDownArrow="true"
                    Scrollable="true">
            <LgMenuItem Text="#ActionOne" Uri="actions/one" />
            <LgMenuItem Text="#ActionTwo" Uri="actions/two" HasSeparator="true" Tag="#New" />
        </LgMenuItem>
    </Toolbar>
</LgMenuConfiguration>

Scrollable submenus

Scrollable="true" is intended for a long list of second-level items. Do not add a third level under a scrollable item, or the nested submenu may be truncated.

Customize item rendering

CustomContent replaces the standard rendering of the item content. Keep a translated Text or AriaLabel for accessibility.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Toolbar>
        <LgMenuItem Text="#Notifications" AriaLabel="#Notifications">
            <CustomContent>
                <LgIcon IconName="@IconNames.All.BellFill" />
            </CustomContent>
        </LgMenuItem>
    </Toolbar>
</LgMenuConfiguration>

Properties

All [Parameter] properties of LgMenuItem.

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgMenuItem	Sub-items of the menu.
CustomContent	RenderFragment	null	LgMenuItem	Custom rendering of the item.
AutoHide	bool	false	LgMenuItem	Automatically hides the dropdown if no sub-item is visible.
CommandArgument	object	null	LgMenuItem	Argument passed to the command.
CommandName	string	null	LgMenuItem	Name of the command sent to the parent handler.
ConfirmationMessage	string	null	LgMenuItem	Confirmation message displayed before the action. Not used with CommandName.
CssClass	string	null	LgMenuItem	Additional CSS classes.
HasSeparator	bool	false	LgMenuItem	Displays a separator before this item.
HideDropDownArrow	bool?	null	LgMenuItem	Locally hides the dropdown arrow.
HideRootLevelText	bool?	null	LgMenuItem	Hides the text when the item is at the root level.
IconName	string	null	LgMenuItem	Icon displayed. If absent, Link.IconName is used.
Link	LgPageLink	null	LgMenuItem	Typed link to a Lagoon page. Can provide the URI, title, and icon.
Modal	ModalSize?	null	LgMenuItem	Opens the URI in a modal instead of standard navigation.
OnClick	EventCallback<ActionEventArgs>	—	LgMenuItem	Callback executed on click.
ShowTextAsTooltip	bool?	null	LgMenuItem	Displays the text as a tooltip based on the targeted rendering.
Scrollable	bool	false	LgMenuItem	Makes the sub-item list scrollable. Avoid with nested submenus.
Tag	string	null	LgMenuItem	Badge or tag displayed on the item.
Target	string	null	LgMenuItem	Target browser window for the URI.
Text	string	null	LgMenuItem	Displayed label. If absent, Link.Title is used.
Uri	string	null	LgMenuItem	Navigation URI.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered on click of the item when the action is not solely direct navigation.

Associated enumerations

ModalSize

Size of the modal opened by the Modal property. This property is nullable: null (default value) maintains standard navigation without a modal.

Value	Description
Small	300px.
Medium	500px.
Large	800px.
ExtraLarge	1140px.
ExtraExtraLarge	1600px.

Accessibility

• Provide Text or AriaLabel when the item displays only an icon.
• If you hide HideRootLevelText, also enable ShowTextAsTooltip when it improves understanding.
• Use LgMenuSeparator and LgMenuTitle to better structure groups of actions.

Related components

• LgMenuConfiguration — menu configuration container.
• LgMenuTitle — group title in the sidebar.
• LgMenuSeparator — visual separator.