LgMenuItem

LgMenuItem représente une entrée de navigation ou d'action dans le menu principal, la sidebar ou une barre d'outils. Il peut naviguer vers une URI, utiliser un LgPageLink, ouvrir une modale, déclencher une commande ou contenir des sous-items.

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

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgCustomMenuItem → LgAriaComponentBase → LgComponentBase
• Interfaces : IActionComponent
• Package NuGet : Lagoon.UI

Navigation typée

Préférez Link="@MyPage.Link()" à une URI en dur lorsque la page expose déjà une méthode Link().

Utilisation

Naviguer avec un lien typé

Préférez Link quand la page expose une méthode statique Link(). Le menu récupère alors automatiquement l'URI, le titre et l'icône du LgPageLink.

MenuConfiguration.razor

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

OrdersPage.razor.cs

[Route(ROUTE)]
public partial class OrdersPage : LgPage
{
    // Route unique de la page : centralisée pour éviter les URI en dur dans le menu.
    private const string ROUTE = "orders";

    // Crée le lien typé utilisé par les menus, onglets de démarrage ou boutons de navigation.
    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#Orders", IconNames.All.Cart3);
    }
}

Créer un menu hiérarchique

Imbriquez des LgMenuItem pour créer des sous-menus. Le menu principal supporte jusqu'à trois niveaux ; la sidebar supporte jusqu'à deux niveaux.

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>

Gérer la visibilité avec AuthorizeView et AutoHide

Pour masquer des entrées selon les droits, encapsulez-les dans AuthorizeView. AutoHide masque le parent si tous ses sous-items conditionnels sont absents.

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>

Déclencher une action, confirmer ou ouvrir une modale

OnClick exécute un handler local. ConfirmationMessage demande une confirmation avant l'action, sauf avec CommandName. Modal ouvre l'URI dans une fenêtre modale Lagoon.

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
{
    // Actualise les données visibles depuis le menu et affiche un retour utilisateur en cas de succès.
    private async Task RefreshAsync(ActionEventArgs args)
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#RefreshDone");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Adapter l'affichage dans une toolbar

Dans une toolbar, le texte des items racine est masqué par défaut. Utilisez HideRootLevelText="false" pour le forcer, ShowTextAsTooltip pour afficher un tooltip, et HideDropDownArrow pour simplifier un bouton de menu.

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>

Sous-menus scrollables

Scrollable="true" est prévu pour une longue liste de second niveau. N'ajoutez pas de troisième niveau sous un item scrollable, sinon le sous-menu imbriqué peut être tronqué.

Personnaliser le rendu d'un item

CustomContent remplace le rendu standard du contenu de l'item. Conservez un Text ou un AriaLabel traduit pour l'accessibilité.

MenuConfiguration.razor

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

Propriétés

Toutes les propriétés [Parameter] de LgMenuItem.

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgMenuItem	Sous-items du menu.
CustomContent	RenderFragment	null	LgMenuItem	Rendu personnalisé de l'item.
AutoHide	bool	false	LgMenuItem	Masque automatiquement le dropdown si aucun sous-item n'est visible.
CommandArgument	object	null	LgMenuItem	Argument transmis à la commande.
CommandName	string	null	LgMenuItem	Nom de la commande envoyée au gestionnaire parent.
ConfirmationMessage	string	null	LgMenuItem	Message de confirmation affiché avant l'action. N'est pas utilisé avec CommandName.
CssClass	string	null	LgMenuItem	Classes CSS additionnelles.
HasSeparator	bool	false	LgMenuItem	Affiche un séparateur avant cet item.
HideDropDownArrow	bool?	null	LgMenuItem	Masque localement la flèche du dropdown.
HideRootLevelText	bool?	null	LgMenuItem	Masque le texte lorsque l'item est au niveau racine.
IconName	string	null	LgMenuItem	Icône affichée. Si absente, Link.IconName est utilisé.
Link	LgPageLink	null	LgMenuItem	Lien typé vers une page Lagoon. Peut fournir l'URI, le titre et l'icône.
Modal	ModalSize?	null	LgMenuItem	Ouvre l'URI dans une modale au lieu d'une navigation classique.
OnClick	EventCallback<ActionEventArgs>	—	LgMenuItem	Callback exécuté au clic.
ShowTextAsTooltip	bool?	null	LgMenuItem	Affiche le texte comme tooltip selon le rendu ciblé.
Scrollable	bool	false	LgMenuItem	Rend la liste des sous-items scrollable. À éviter avec des sous-menus imbriqués.
Tag	string	null	LgMenuItem	Badge ou tag affiché sur l'item.
Target	string	null	LgMenuItem	Fenêtre cible du navigateur pour l'URI.
Text	string	null	LgMenuItem	Libellé affiché. Si absent, Link.Title est utilisé.
Uri	string	null	LgMenuItem	URI de navigation.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Événements

Événement	Type	Description
OnClick	EventCallback<ActionEventArgs>	Déclenché au clic sur l'item lorsque l'action n'est pas uniquement une navigation directe.

Énumérations associées

ModalSize

Taille de la modale ouverte par la propriété Modal. Cette propriété est nullable : null (valeur par défaut) conserve une navigation classique sans modale.

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

Accessibilité

• Renseignez Text ou AriaLabel lorsque l'item n'affiche qu'une icône.
• Si vous masquez HideRootLevelText, activez aussi ShowTextAsTooltip quand cela améliore la compréhension.
• Utilisez LgMenuSeparator et LgMenuTitle pour mieux structurer les groupes d'actions.

Composants liés

• LgMenuConfiguration — conteneur de configuration du menu.
• LgMenuTitle — titre de groupe dans la sidebar.
• LgMenuSeparator — séparateur visuel.