LgBreadcrumbTrail

LgBreadcrumbTrail displays a breadcrumb to locate the user in navigation. Items can be declared inline with LgBreadcrumbTrailItem or provided by code via BreadcrumbTrailItemList.

<LgBreadcrumbTrail>
    <LgBreadcrumbTrailItem Text="#Home" Uri="dashboard" />
    <LgBreadcrumbTrailItem Text="#Orders" IsActive="true" />
</LgBreadcrumbTrail>

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

Active last item

Mark the last LgBreadcrumbTrailItem with IsActive="true" to indicate the current page and avoid redundant navigation.

Usage

Demonstration

Try this component in the Lagoon showcase.

Declare the breadcrumb inline

Each LgBreadcrumbTrailItem can take several forms: a navigation link (Uri), a typed link to a Lagoon page (Link), an element triggering an action (OnClick), a simple label, or the current item (IsActive).

OrderDetailPage.razor

@inherits LgPage

<LgBreadcrumbTrail>
    <LgBreadcrumbTrailItem Text="#Home" Uri="dashboard" IconName="@IconNames.HouseFill" />
    <LgBreadcrumbTrailItem Link="OrdersPage.Link()" />
    <LgBreadcrumbTrailItem Text="#ShowInfo" OnClick="OnShowInfoAsync" IconName="@IconNames.All.ChatSquareDots" />
    <LgBreadcrumbTrailItem Text="#OrderDetail" IsActive="true" />
</LgBreadcrumbTrail>

OrderDetailPage.razor.cs

public partial class OrderDetailPage : LgPage
{
    // Action triggered by the breadcrumb item (an item can execute code instead of navigating).
    private Task OnShowInfoAsync(ActionEventArgs args)
    {
        ShowInformation("#OrderInfoMessage");
        return Task.CompletedTask;
    }
}

Typed link

Prefer Link="OrdersPage.Link()" over a hardcoded Uri: the label, icon, and URL then come directly from the page definition (see LgPageLink), which avoids broken links.

Build the list by code with Items

When items depend on dynamically loaded data, build the list by code via BreadcrumbTrailItemList. This class (inheriting from List<BreadcrumbTrailItem>) exposes helpers for each item type:

Method	Item type created
Add(LgPageLink link)	Typed link to a Lagoon page.
Add(string text, string iconName = null)	Simple label (non-navigable).
AddUri(string uri, string text, string iconName = null)	Navigation link to a URI.
AddAction(Action onClickHandler, string text, string icon = null)	Item executing an action on click.
Add(BreadcrumbTrailItem item)	Fully customized item.

OrderDetailPage.razor

@inherits LgPage

<LgBreadcrumbTrail Items="_items" CssClass="mb-3" />

OrderDetailPage.razor.cs

public partial class OrderDetailPage : LgPage
{
    private BreadcrumbTrailItemList _items;

    // Builds the breadcrumb by code: useful when items depend on dynamically loaded data.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        _items = new BreadcrumbTrailItemList();
        _items.AddUri("dashboard", "#Home", IconNames.HouseFill);   // navigation link
        _items.Add(OrdersPage.Link());                              // typed link to a page
        _items.AddAction(ShowOrderInfo, "#ShowInfo", IconNames.All.ChatSquareDots); // action on click
        _items.Add("#OrderDetail");                                 // current label (non-navigable)
    }

    // Action referenced by AddAction: executed when clicking the corresponding item.
    private void ShowOrderInfo()
    {
        ShowInformation("#OrderInfoMessage");
    }
}

Properties

All [Parameter] properties of LgBreadcrumbTrail.

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgBreadcrumbTrail	Items declared inline in the breadcrumb.
CssClass	string	null	LgBreadcrumbTrail	Additional CSS classes.
Items	BreadcrumbTrailItemList	null	LgBreadcrumbTrail	Programmatic list of items.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Associated item: LgBreadcrumbTrailItem

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgBreadcrumbTrailItem	Additional HTML attributes applied to the rendered item.
ConfirmationMessage	string	null	LgBreadcrumbTrailItem	Confirmation message displayed before the action.
CssClass	string	null	LgBreadcrumbTrailItem	Additional CSS classes.
IconName	string	null	LgBreadcrumbTrailItem	Displayed icon. If absent, Link.IconName is used.
IsActive	bool	false	LgBreadcrumbTrailItem	Marks the current item.
Link	LgPageLink	null	LgBreadcrumbTrailItem	Typed link to a Lagoon page. Can provide text, icon, and URI.
OnClick	EventCallback<ActionEventArgs>	—	LgBreadcrumbTrailItem	Callback executed on click.
Target	string	null	LgBreadcrumbTrailItem	Target window for navigation.
Text	string	null	LgBreadcrumbTrailItem	Displayed label. If absent, Link.Title is used.
Uri	string	null	LgBreadcrumbTrailItem	Navigation URI.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered when clicking a LgBreadcrumbTrailItem.

Associated types

BreadcrumbTrailItem

Property	Type	Description
IconName	string	Item icon.
Link	LgPageLink	Typed link to a page.
OnClick	Action	Action executed on click when building the list by code.
Text	string	Item label.
Uri	string	Navigation URI.

BreadcrumbTrailItemList

BreadcrumbTrailItemList inherits from List<BreadcrumbTrailItem> and provides helpers like Add(LgPageLink), Add(string text, string iconName = null), AddUri(...), and AddAction(...).

Accessibility

• Provide an AriaLabel on the LgBreadcrumbTrail if the navigation context is not explicit on screen.
• Mark the last item with IsActive="true" to avoid unnecessary navigation to the current page.
• Keep labels short and ordered from most general to most specific.

Related components

• LgMenuConfiguration — global application navigation.
• LgTabContainer — horizontal tab navigation.
• LgSideTabContainer — side tab navigation.