LgNavLink

LgNavLink is the Lagoon navigation link that inherits the behavior from LgHyperlink and automatically adds the active CSS class when the current page matches the link's URI.

<LgNavLink Link="@MyPage.Link()">My page</LgNavLink>

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

Automatic active link

LgNavLink listens to navigation in the Lagoon application and compares the PageKey of the target URI with the current location. When they match, the active CSS class is added to the rendered link.

Usage

Demo

Try this component in the Lagoon showcase.

Link to a typed page

Use Link to point to a Lagoon page via its Link() method. The component calculates the active state from the target URI and automatically adds the active class when the current page matches.

MainMenu.razor

@inherits LgComponentBase

<LgNavLink Link="@DashboardPage.Link()" CssClass="nav-link">
    @("#Dashboard".Translate())
</LgNavLink>

<LgNavLink Link="@OrdersPage.Link()" CssClass="nav-link">
    @("#Orders".Translate())
</LgNavLink>

Typed navigation

Prefer Link="@OrdersPage.Link()" over a manually entered route. The route then stays synchronized with the page and LgNavLink can calculate the active state on the same URI.

Link to a URI or target window

Uri takes priority over Link.Uri. Target allows opening the destination in another window or tab.

MainMenu.razor

@inherits LgComponentBase

<LgNavLink Uri="help/orders" CssClass="nav-link">
    @("#Help".Translate())
</LgNavLink>

<LgNavLink Uri="https://example.org/status" Target="_blank" CssClass="nav-link">
    @("#ExternalStatus".Translate())
</LgNavLink>

Custom content with icon

The displayed content comes from ChildContent. Add an icon or conditional text to the link when navigation needs to be more visual.

PagerNavigation.razor

@inherits LgComponentBase

<LgNavLink Uri="orders/previous" CssClass="@_previousCssClass">
    <LgIcon IconName="@IconNames.All.ArrowLeftShort" />
    @if (_displayText)
    {
        <span>@("#Previous".Translate())</span>
    }
</LgNavLink>

PagerNavigation.razor.cs

public partial class PagerNavigation : LgComponentBase
{
    // Shows or hides text alongside the icon depending on available space.
    private bool _displayText = true;

    // Additional CSS class calculated by the calling component to adapt rendering to context.
    private string _previousCssClass = "nav-link nav-link-previous";
}

Execute an action before navigating

OnClick takes priority over automatic navigation: when the callback is set, the action must navigate itself if needed.

DashboardPage.razor

@inherits LgPage

<LgNavLink Link="@OrdersPage.Link()"
           ConfirmationMessage="#ConfirmOpenOrders"
           OnClick="OpenOrdersAsync"
           CssClass="nav-link">
    @("#OpenOrders".Translate())
</LgNavLink>

DashboardPage.razor.cs

public partial class DashboardPage : LgPage
{
    // Checks the context before navigation; essential because OnClick disables automatic navigation.
    private Task OpenOrdersAsync(ActionEventArgs args)
    {
        App.NavigateTo(OrdersPage.Link().Uri);
        return Task.CompletedTask;
    }
}

OnClick priority

If OnClick has a handler, GetNavigateToUri() returns null. Only set OnClick if you want to replace the standard navigation.

Properties

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

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgHyperlink	Additional HTML attributes applied to the rendered a element (capture of unmapped values).
ChildContent	RenderFragment	null	LgHyperlink	Content displayed in the link.
CommandArgument	object	null	LgHyperlink	Argument associated with the command sent to the parent handler. Use primitive types or string to optimize rendering.
CommandName	string	null	LgHyperlink	Name of the command sent to the parent ICommandListener.
ConfirmationMessage	string	null	LgHyperlink	Confirmation message displayed before the action. Incompatible with CommandName.
CssClass	string	null	LgHyperlink	Additional CSS classes. LgNavLink also adds active when the link matches the current page.
Link	LgPageLink	null	LgHyperlink	Link information to a typed Lagoon page. Used if Uri is not set.
OnClick	EventCallback<ActionEventArgs>	—	LgHyperlink	Callback triggered on click. If set, it replaces automatic navigation.
StopPropagation	bool	true	LgHyperlink	Stops click event propagation (@onclick:stopPropagation).
Target	string	null	LgHyperlink	Name of the browser window in which to open the URI.
Uri	string	null	LgHyperlink	URI / route to open on click. Used in priority over Link.Uri.

Cascading parameters

LgNavLink also consumes parameters automatically provided by ancestor components: AppComponent (LgApp, used to track navigation), ParentCommandListener (ICommandListener, used with CommandName) and ContextProvider (IComponentContextProvider, inherited from LgComponentBase).

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered on click. ActionEventArgs exposes the action's WaitingContext.

Accessibility

• The link content must remain explicit: avoid a link composed solely of an icon without accessible text.
• The active state is materialized by the active CSS class; add an appropriate attribute via AdditionalAttributes if your context requires additional ARIA indication.
• StopPropagation defaults to true: verify this behavior if the link is placed in a container that also listens for clicks.

Related components

• LgHyperlink — basic hyperlink used by LgNavLink.
• LgButton — alternative for an action or navigation presented as a button.