LgTabContainer

LgTabContainer drives horizontal tab navigation in the application. It manages activation, dynamic opening, closing, moving, and reloading of tabs, while LgTab describes each tab declared in the markup.

<LgTabContainer>
    <LgTab Key="dashboard" Title="#Dashboard" Uri="dashboard" />
</LgTabContainer>

• Namespace: Lagoon.UI.Components
• Inherits from: LgCustomTabContainer → LgAriaComponentBase → LgComponentBase
• Interfaces: IDisposable, IPageTitleHandler, IPageCloser, IPageReloader, IPageDefaultLayoutProvider, ICommandListener
• NuGet package: Lagoon.UI

Declarative and dynamic tabs

Use LgTab for tabs known at initial render, then OpenTabAsync() to open a tab on demand from code.

Usage

Demonstration

Try this component in the Lagoon showcase.

Declare static tabs

Declare LgTab when tabs are known at initial render. Use a relative URI without a leading / to open a Lagoon page, or ChildContent for static local content.

TabDemoPage.razor

@inherits LgPage

<LgTabContainer AllowClose="true"
                AllowDragDrop="true"
                ShowTabList="true"
                DefaultActiveTabKey="dashboard"
                PreloadTabContent="false">
    <BeforeHeaderContent>
        <LgLabel Text="#Workspace" CssClass="me-2" />
    </BeforeHeaderContent>

    <AfterHeaderContent>
        <LgButton Text="#OpenSettingsTab" IconName="@IconNames.Admin" OnClick="OpenSettingsTabAsync" />
    </AfterHeaderContent>

    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Closable="false">
        <LgLabel Text="#DashboardContent" />
    </LgTab>

    <LgTab Key="orders"
           Title="#OrdersTab"
           IconName="@IconNames.All.Cart3"
           Uri="orders"
           Closable="true"
           OnReload="ReloadOrdersAsync" />

    <LgTab Key="help"
           Title="#HelpTab"
           Tooltip="#HelpTooltip"
           Uri="help"
           UseIFrame="true"
           Draggable="false" />
</LgTabContainer>

TabDemoPage.razor.cs

public partial class TabDemoPage : LgPage
{
    // Reloads the tab data when the user requests a refresh of its content.
    private async Task ReloadOrdersAsync()
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#OrdersReloaded");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Open a tab from code

Reference the container with @ref, then call OpenTabAsync(string uri, bool closable = true). If the URI is already open, the corresponding tab is reactivated.

DynamicTabsPage.razor

@inherits LgPage

<LgButton Text="#OpenSettingsTab" IconName="@IconNames.Admin" OnClick="OpenSettingsTabAsync" />

<LgTabContainer @ref="_tabContainer" ShowTabList="true">
    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" />
</LgTabContainer>

DynamicTabsPage.razor.cs

public partial class DynamicTabsPage : LgPage
{
    // Reference to the container: needed to open or reactivate a tab from an external button.
    private LgTabContainer _tabContainer;

    // Opens the settings tab with a relative URI; the closable parameter allows it to be closed.
    private Task OpenSettingsTabAsync(ActionEventArgs args)
    {
        return _tabContainer.OpenTabAsync("settings", closable: true);
    }
}

Drive the active tab and respond to events

@bind-ActiveTabKey synchronizes the active key with the code-behind. Events are declared on the container tag; they are not methods to override.

BoundTabsPage.razor

@inherits LgPage

<LgTabContainer @bind-ActiveTabKey="_activeTabKey"
                AllowClose="true"
                AllowDragDrop="true"
                OnActivateTab="OnActivateTabAsync"
                OnClosingTab="OnClosingTabAsync"
                OnCloseTab="OnCloseTabAsync"
                OnDropTab="OnDropTabAsync">
    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" Closable="false" />
    <LgTab Key="orders" Title="#OrdersTab" IconName="@IconNames.All.Cart3" Uri="orders" Closable="true" />
</LgTabContainer>

BoundTabsPage.razor.cs

public partial class BoundTabsPage : LgPage
{
    // Active tab key: modify it to switch tabs from code.
    private string _activeTabKey = "dashboard";

    // Triggered after activation: useful for loading additional data related to the tab.
    private Task OnActivateTabAsync(ActivateTabEventArgs args)
    {
        _activeTabKey = args.Tab.Key;
        return Task.CompletedTask;
    }

    // Triggered before closing: cancel to protect a pinned or unsaved tab.
    private Task OnClosingTabAsync(ClosingTabEventArgs args)
    {
        if (args.Key == "dashboard")
        {
            args.Cancel = true;
        }
        return Task.CompletedTask;
    }

    // Triggered after closing: persist the state if the tab order or list needs to be restored.
    private Task OnCloseTabAsync(CloseTabEventArgs args)
    {
        string closedTabKey = args.Key;
        return Task.CompletedTask;
    }

    // Triggered after drag-and-drop: DropIndex gives the new position of the moved tab.
    private Task OnDropTabAsync(DropTabEventArgs args)
    {
        int dropIndex = args.DropIndex;
        return Task.CompletedTask;
    }
}

Customize dynamic tab keys

GetTabKeyFromUri allows you to group multiple URIs under the same tab key, for example to reuse an order detail tab regardless of the requested ID.

TabKeyPage.razor

@inherits LgPage

<LgTabContainer GetTabKeyFromUri="BuildTabKeyFromUri"
                ReloadDisabled="true">
    <LgTab Key="orders" Title="#OrdersTab" IconName="@IconNames.All.Cart3" Uri="orders" />
</LgTabContainer>

TabKeyPage.razor.cs

public partial class TabKeyPage : LgPage
{
    // Builds a stable key to avoid opening a new tab on each ID variation.
    private static string BuildTabKeyFromUri(string uri)
    {
        return uri.StartsWith("orders/detail/", StringComparison.OrdinalIgnoreCase) ? "OrderDetail" : uri;
    }
}

Properties

All [Parameter] properties of LgTabContainer, including inherited ones.

Name	Type	Default	Declared in	Description
BeforeHeaderContent	RenderFragment	null	LgTabContainer	Content rendered before the tab header.
AfterHeaderContent	RenderFragment	null	LgTabContainer	Content rendered after the tab header.
AllowClose	bool	false	LgTabContainer	Allows closing tabs.
AllowDragDrop	bool	false	LgTabContainer	Allows moving tabs via drag-and-drop.
ShowTabList	bool	false	LgTabContainer	Displays a menu listing open tabs.
ChildContent	RenderFragment	null	LgCustomTabContainer	Declaration of LgTab contained in the component.
ActiveTabKey	string	null	LgCustomTabContainer	Key of the active tab. Usable with @bind-ActiveTabKey.
ActiveTabKeyChanged	EventCallback<string>	—	LgCustomTabContainer	Binding callback for ActiveTabKey.
CssClass	string	null	LgCustomTabContainer	Additional CSS classes for the container.
DefaultActiveTabKey	string	null	LgCustomTabContainer	Key of the tab activated by default.
DefaultLayout	Type	null	LgCustomTabContainer	Layout applied to pages opened in tabs if they do not declare one.
GetTabKeyFromUri	Func<string, string>	null	LgCustomTabContainer	Function customizing key generation from the URI.
PreloadTabContent	bool	false	LgCustomTabContainer	Preloads tab content when created.
OnActivateTab	EventCallback<ActivateTabEventArgs>	—	LgCustomTabContainer	Triggered after tab activation.
OnClosingTab	EventCallback<ClosingTabEventArgs>	—	LgCustomTabContainer	Triggered before tab closing. Allows canceling via Cancel.
OnCloseTab	EventCallback<CloseTabEventArgs>	—	LgCustomTabContainer	Triggered after effective tab closing.
ReloadDisabled	bool	false	LgCustomTabContainer	Disables reloading of the active tab.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Associated tab: LgTab

Name	Type	Default	Declared in	Description
Closable	bool	false	LgTab	Makes the tab individually closable.
Draggable	bool	true	LgTab	Allows moving this tab.
ChildContent	RenderFragment	null	LgCustomTab	Static tab content.
CssClass	string	null	LgCustomTab	Additional CSS classes for the button and panel.
Disabled	bool	false	LgCustomTab	Disables the tab.
IconName	string	null	LgCustomTab	Icon displayed. If absent, Link.IconName is used.
Key	string	null	LgCustomTab	Unique tab identifier. If absent, Lagoon generates the key from Uri or from an internal identifier.
Link	LgPageLink	null	LgCustomTab	Typed link to a page; can provide title, icon, and URI.
OnReload	EventCallback	—	LgCustomTab	Callback triggered when a reload is requested on the tab.
PreloadContent	bool?	null	LgCustomTab	Preloading specific to this tab; overrides PreloadTabContent.
Title	string	null	LgCustomTab	Title displayed on the tab.
Tooltip	string	null	LgCustomTab	Tooltip for the tab button.
TooltipIsHtml	bool	false	LgCustomTab	Indicates if the tooltip is in HTML format.
Uri	string	null	LgCustomTab	Blazor or external URI loaded in the tab.
UseIFrame	bool	false	LgCustomTab	Loads content via an IFrame.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

Event	Type	Description
OnActivateTab	EventCallback<ActivateTabEventArgs>	Triggered after activation; args.Tab.Key and args.Tab.Uri expose the active tab.
OnClosingTab	EventCallback<ClosingTabEventArgs>	Triggered before closing; args.Cancel = true blocks closing.
OnCloseTab	EventCallback<CloseTabEventArgs>	Triggered after tab closing.
OnDropTab	EventCallback<DropTabEventArgs>	Triggered after moving a tab when AllowDragDrop is enabled.
OnReload	EventCallback	Triggered on the concerned LgTab when a reload is requested.

Public methods

Method	Signature	Description
OpenTabAsync	Task OpenTabAsync(string uri, bool closable = true)	Opens a tab from a URI and activates it immediately.

Associated types

ActivateTabEventArgs

Property	Type	Description
Tab	ITab	Activated tab. ITab exposes Key and Uri.

ClosingTabEventArgs

Property	Type	Description
Key	string	Key of the tab being closed.
Cancel	bool	Set to true to prevent closing.

CloseTabEventArgs

Property	Type	Description
Key	string	Key of the closed tab.

DropTabEventArgs

Property	Type	Description
Key	string	Key of the moved tab.
DropIndex	int	New position of the tab.

Accessibility

• Provide an explicit Title or AriaLabel if the tab displays only an icon.
• Use Tooltip to clarify the role of compact tabs or those with truncated text.
• Avoid preventing closing without clear visual signal when AllowClose is globally enabled.

Related components

• LgSideTabContainer — variant with side navigation.
• LgMenuConfiguration — can feed TabContainerToolbar.
• LgBreadcrumbTrail — complements contextual navigation in pages opened in tabs.