LgToolbarMenu

LgToolbarMenu adds a dropdown menu to an LgToolbar. It renders an LgButton of type dropdown and displays its ChildContent in a dropdown-menu container.

<LgToolbarMenu Text="Dropdown with group">
    <LgToolbarButton Text="Item 1" />
</LgToolbarMenu>

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

Expected content

Place primarily LgToolbarButton components in the menu. Buttons automatically detect the parent menu and adapt their rendering as a dropdown-item element.

Usage

Demo

Try this component in the Lagoon showcase.

Simple menu with entries, title, and separator

LgToolbarMenu opens a dropdown-menu. Its content must remain flat: use LgToolbarButton, LgToolbarMenuItemTitle, and LgToolbarMenuItemSeparator.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#MoreActions" IconName="@IconNames.All.GearFill">
            <LgToolbarMenuItemTitle Text="#Documents" />
            <LgToolbarButton Text="#Import" IconName="@IconNames.All.Upload" OnClick="ImportAsync" />
            <LgToolbarButton Text="#Export" IconName="@IconNames.All.Download" OnClick="ExportAsync" />
            <LgToolbarMenuItemSeparator />
            <LgToolbarButton Text="#Delete" IconName="@IconNames.Delete" Kind="ButtonKind.Error" OnClick="DeleteAsync" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

OrdersPage.razor.cs

public partial class OrdersPage : LgPage
{
    // Launches an import from the secondary actions menu.
    private Task ImportAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Launches an export from the same menu to group document-related actions.
    private Task ExportAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Executes a destructive action placed after a separator to distinguish it visually.
    private Task DeleteAsync(ActionEventArgs args)
    {
        return Task.CompletedTask;
    }
}

Navigate to Lagoon pages

Since menu entries are LgToolbarButton components, they can receive a typed Link. The title and icon then come from the page.

OrdersPage.razor

@inherits LgPage

<LgToolbar>
    <LgToolbarGroup>
        <LgToolbarMenu Text="#OpenPage" IconName="@IconNames.All.BoxArrowUpRight">
            <LgToolbarButton Link="@DashboardPage.Link()" />
            <LgToolbarButton Link="@ReportsPage.Link()" Target="_blank" Text="#OpenReportInNewTab" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Customize the opening button

Kind, IconName, Text, AriaLabel, and CssClass concern the button that opens the menu. Buttons placed in the menu retain their own parameters.

OrdersPage.razor

@inherits LgPage

<LgToolbar ButtonSize="ButtonSize.Small">
    <LgToolbarGroup>
        <LgToolbarMenu Text="#Actions"
                       IconName="@IconNames.All.ThreeDotsVertical"
                       Kind="ButtonKind.Primary"
                       CssClass="ml-2"
                       AriaLabel="#AvailableActions">
            <LgToolbarButton Text="#Validate" IconName="@IconNames.All.Check2Circle" Kind="ButtonKind.Success" />
            <LgToolbarButton Text="#Reject" IconName="@IconNames.All.XCircle" Kind="ButtonKind.Error" />
        </LgToolbarMenu>
    </LgToolbarGroup>
</LgToolbar>

Menu size

The opening button reads Toolbar.ButtonSize.Value. Therefore, place LgToolbarMenu in an LgToolbar to benefit from the size configured by the application or by the ButtonSize parameter.

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgToolbarMenu	Content displayed in the dropdown-menu.
CssClass	string	null	LgToolbarMenu	Additional CSS classes added to the btn-group container.
IconName	string	null	LgToolbarMenu	Icon of the button that opens the menu.
Kind	ButtonKind	ButtonKind.Secondary	LgToolbarMenu	Style of the button that opens the menu.
Text	string	null	LgToolbarMenu	Label of the button that opens the menu. The value is translated with CheckTranslate().
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute passed to the menu button after translation.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute passed to the menu button.

Cascading parameters

LgToolbarMenu consumes Toolbar (LgToolbar) to read Toolbar.ButtonSize.Value and size the dropdown button. It also provides its own cascading instance to the menu buttons.

Events

No public EventCallback is defined by LgToolbarMenu or its base classes.

Associated enumerations

ButtonKind

Visual style of the button that opens the menu.

Value	Description
Primary	Primary style.
Secondary	Secondary style (default value).
Success	Success style.
Error	Error style (danger).
Warning	Warning style.
Info	Information style.
Link	Link appearance.
Ghost	Ghost style (transparent background).
Custom	Custom style (no variant class enforced).

Accessibility

• The opening button receives aria-haspopup="true", aria-expanded="false", and role="menuitem".
• Use AriaLabel or AriaLabelledBy if the menu button is identified only by an icon.
• Entries placed in ChildContent must have their own accessible labels.

Related components

• LgToolbar — parent container of the toolbar.
• LgToolbarGroup — group that typically contains the menu.
• LgToolbarButton — menu entry or toolbar button.
• LgCrudToolbarButton — menu entry with secondary CRUD actions.