LgSideTabContainer

LgSideTabContainer offers tab navigation with a resizable side panel. LgSideTab describes each side panel entry and can display a custom button via ButtonContent.

<LgSideTabContainer>
    <LgSideTab Key="summary" Title="#Summary" />
</LgSideTabContainer>

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

Persistent side panel

Use StoreKey to remember the side panel width in the browser and retrieve the same layout across sessions.

Usage

Demo

Try this component in the Lagoon showcase.

Build a resizable side navigation

StoreKey remembers the side panel width in the browser. HeadMinSize, HeadMaxSize, Locked, and Collapsable control panel resizing and collapsing.

SideTabsPage.razor

@inherits LgPage

<LgSideTabContainer @bind-ActiveTabKey="_activeTabKey"
                    Collapsable="true"
                    HeadMinSize="220px"
                    HeadMaxSize="360px"
                    HeadCssClass="app-side-tabs"
                    MainCssClass="app-side-tabs-content"
                    StoreKey="orders-side-tabs"
                    DefaultActiveTabKey="summary"
                    OnActivateTab="OnActivateTabAsync"
                    OnClosingTab="OnClosingTabAsync"
                    OnCloseTab="OnCloseTabAsync">
    <LgSideTab Key="summary"
               Title="#Summary"
               IconName="@IconNames.All.ListUl"
               Uri="orders/summary" />

    <LgSideTab Key="history"
               Title="#History"
               IconName="@IconNames.All.ClockHistory"
               Uri="orders/history"
               PreloadContent="true" />

    <LgSideTab Key="documents"
               Title="#Documents"
               AriaLabel="#Documents"
               Uri="orders/documents">
        <ButtonContent>
            <LgIcon IconName="@IconNames.All.Paperclip" />
        </ButtonContent>
    </LgSideTab>
</LgSideTabContainer>

SideTabsPage.razor.cs

public partial class SideTabsPage : LgPage
{
    // Active tab key bound to the container: synchronizes side navigation with code.
    private string _activeTabKey = "summary";

    // Triggered after activation: useful for remembering the last viewed panel.
    private Task OnActivateTabAsync(ActivateTabEventArgs args)
    {
        _activeTabKey = args.Tab.Key;
        return Task.CompletedTask;
    }

    // Triggered before closing: cancel if the panel contains changes to preserve.
    private Task OnClosingTabAsync(ClosingTabEventArgs args)
    {
        args.Cancel = false;
        return Task.CompletedTask;
    }

    // Triggered after actual closing: clean up local state associated with the panel.
    private Task OnCloseTabAsync(CloseTabEventArgs args)
    {
        string closedTabKey = args.Key;
        return Task.CompletedTask;
    }
}

Preload content on opening

PreloadTabContent preloads all panels. PreloadContent overrides this behavior for a specific tab.

PreloadedSideTabsPage.razor

@inherits LgPage

<LgSideTabContainer PreloadTabContent="true" Locked="true" HeadMinSize="240px" HeadMaxSize="320px">
    <LgSideTab Key="summary" Title="#Summary" Uri="orders/summary" />
    <LgSideTab Key="statistics" Title="#Statistics" Uri="orders/statistics" PreloadContent="false" />
</LgSideTabContainer>

Group tabs or mix other components

The side panel content is a RenderFragment: you can organize LgSideTab components in an LgFrame, an LgAccordion, or add a supplementary navigation button.

GroupedSideTabsPage.razor

@inherits LgPage

<LgSideTabContainer StoreKey="grouped-orders-side-tabs">
    <LgFrame Title="#OrdersGroup" Collapsable="true" DefaultCollapsed="false">
        <LgSideTab Key="orders-open" Title="#OpenOrders" IconName="@IconNames.All.Cart3" Uri="orders/open" />
        <LgSideTab Key="orders-closed" Title="#ClosedOrders" IconName="@IconNames.All.Archive" Uri="orders/closed" />
    </LgFrame>

    <LgAccordion>
        <LgAccordionPane Title="#SupportGroup">
            <LgSideTab Key="faq" Title="#Faq" IconName="@IconNames.Question" Uri="help/faq" />
            <LgButton Text="#OpenDocumentation" Kind="ButtonKind.Link" Uri="help/documentation" />
        </LgAccordionPane>
    </LgAccordion>
</LgSideTabContainer>

Navigate to a tab from another page

Add a route with a tab key, then bind this value to ActiveTabKey. The external page can use the LgPageLink exposed by the tab page.

OrdersSideTabsPage.razor

@inherits LgPage

<LgSideTabContainer @bind-ActiveTabKey="_activeTabKey" DefaultActiveTabKey="summary">
    <LgSideTab Key="summary" Title="#Summary" IconName="@IconNames.All.ListUl" Uri="orders/summary" />
    <LgSideTab Key="history" Title="#History" IconName="@IconNames.All.ClockHistory" Uri="orders/history" />
    <LgSideTab Key="documents" Title="#Documents" IconName="@IconNames.All.Paperclip" Uri="orders/documents" />
</LgSideTabContainer>

OrdersSideTabsPage.razor.cs

[Route(ROUTE)]
[Route(ROUTE + "/{RequestedTabKey}")]
public partial class OrdersSideTabsPage : LgPage
{
    // Route of the tab page: reused to create links to a specific panel.
    private const string ROUTE = "orders-tabs";

    // Optional route parameter: holds the tab key to activate on arrival.
    [Parameter]
    public string RequestedTabKey { get; set; }

    // Active key bound to the container; initialized from the route or on the summary panel.
    private string _activeTabKey = "summary";

    // Creates a link to the page directly targeting the requested tab.
    public static LgPageLink Link(string tabKey)
    {
        return LgPageLink.Create($"{ROUTE}/{tabKey}", "#OrdersTabs", IconNames.All.ListUl);
    }

    // Synchronizes the route parameter with the container binding on each navigation.
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        _activeTabKey = string.IsNullOrEmpty(RequestedTabKey) ? "summary" : RequestedTabKey;
    }
}

OrdersOverviewPage.razor

@inherits LgPage

<LgButton Text="#OpenHistory" Kind="ButtonKind.Link" Link='@OrdersSideTabsPage.Link("history")' />

Tab URIs

As with LgTabContainer, use relative URIs without a leading / (Uri="orders/history" rather than Uri="/orders/history").

Properties

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

Name	Type	Default	Declared in	Description
Collapsable	bool	false	LgSideTabContainer	Allows collapsing the side panel.
HeadCssClass	string	null	LgSideTabContainer	CSS classes for the side panel.
HeadMaxSize	string	null	LgSideTabContainer	Maximum size of the side panel (e.g., "360px").
HeadMinSize	string	null	LgSideTabContainer	Minimum size of the side panel.
Locked	bool	false	LgSideTabContainer	Locks panel resizing.
MainCssClass	string	null	LgSideTabContainer	CSS classes for the main content area.
StoreKey	string	null	LgSideTabContainer	localStorage key used to remember panel width.
ChildContent	RenderFragment	null	LgCustomTabContainer	Declaration of LgSideTab components 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 default active tab.
DefaultLayout	Type	null	LgCustomTabContainer	Layout applied to open pages 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 upon creation.
OnActivateTab	EventCallback<ActivateTabEventArgs>	—	LgCustomTabContainer	Triggered after tab activation.
OnClosingTab	EventCallback<ClosingTabEventArgs>	—	LgCustomTabContainer	Triggered before tab closing.
OnCloseTab	EventCallback<CloseTabEventArgs>	—	LgCustomTabContainer	Triggered after actual 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: LgSideTab

Name	Type	Default	Declared in	Description
ButtonContent	RenderFragment	null	LgSideTab	Custom content for the side tab button.
ChildContent	RenderFragment	null	LgCustomTab	Static content for the panel.
CssClass	string	null	LgCustomTab	Additional CSS classes.
Disabled	bool	false	LgCustomTab	Disables the tab.
IconName	string	null	LgCustomTab	Displayed icon. If absent, Link.IconName is used.
Key	string	null	LgCustomTab	Unique tab identifier. If absent, Lagoon generates the key from Uri or an internal identifier.
Link	LgPageLink	null	LgCustomTab	Typed link to a Lagoon page.
OnReload	EventCallback	—	LgCustomTab	Callback triggered on reload.
PreloadContent	bool?	null	LgCustomTab	Preloading specific to this tab.
Title	string	null	LgCustomTab	Title of the tab button.
Tooltip	string	null	LgCustomTab	Tooltip for the tab button.
TooltipIsHtml	bool	false	LgCustomTab	Indicates whether the tooltip is in HTML format.
Uri	string	null	LgCustomTab	Blazor or external URI loaded in the panel.
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 identify the active tab.
OnClosingTab	EventCallback<ClosingTabEventArgs>	Triggered before closing; allows canceling via Cancel.
OnCloseTab	EventCallback<CloseTabEventArgs>	Triggered after actual closing.
OnReload	EventCallback	Triggered on the concerned LgSideTab on reload.

Accessibility

• Always provide a Title or AriaLabel to LgSideTab components, especially if ButtonContent contains only an icon.
• Verify that the panel remains usable when collapsed (Collapsable="true").
• Avoid dense content in ButtonContent to keep side navigation readable.

Related components

• LgTabContainer — horizontal variant.
• LgMenuConfiguration — complements global application navigation.
• LgBreadcrumbTrail — useful in the content displayed by panels.