LgNavigationBox

LgNavigationBox is a navigation search area. It displays a list of pages (TPageLink : IPageLink) in a dropdown menu, filters results based on entered text, and navigates to the URI of the selected item.

<LgNavigationBox Items="_items" Placeholder="#menuSearchSetAria" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgSuggestBoxBase<TPageLink> → LgTextBox → LgInputRenderBase<string> → LgInputBase<string> → LgAriaComponentBase → LgComponentBase
• Interfaces: ILgDropDownComponent, IInputCommonProperties, ILgComponentPolicies, IInputBusy, ILgFocusableComponent
• NuGet package: Lagoon.UI

Local or remote data

Items provides a local list. ControllerUri allows loading results remotely with the same text filtering on the component side.

Usage

Demonstration

Try this component in the Lagoon showcase.

Local page list

For a list of pages known on the client side, provide Items. The component searches in the Title of each IPageLink and navigates to Uri on click or keyboard validation.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items"
                 Label="#SearchPage"
                 Placeholder="#SearchNavigationPlaceholder"
                 MinSearchCharacter="1"
                 MaxItemsInView="8" />

SearchPage.razor.cs

public partial class SearchPage : LgPage
{
    // Pages offered in local search; typed links avoid duplicate routes.
    private readonly List<LgPageLink> _items = new()
    {
        DashboardPage.Link(),
        OrdersPage.Link(),
        CustomersPage.Link(),
        ReportsPage.Link()
    };
}

Remote search with ControllerUri

When the list depends on permissions or server data, use ControllerUri. The component automatically posts a data request to {ControllerUri}/$qd with the entered text, pagination, and filtering on Title.

AppLayout.razor

@inherits LgComponentBase

<LgNavigationBox ControllerUri="api/navigation/pages"
                 Label="#Search"
                 Placeholder="#SearchNavigationPlaceholder"
                 MinSearchCharacter="2"
                 MaxItemsInView="10"
                 TextFilterCollation="CollationType.IgnoreCaseAndAccent" />

Endpoint contract

ControllerUri points to a queryable action. The component calls {ControllerUri}/$qd in POST via the Lagoon remote loader; the source action remains exposed as GET and decorated with [Queryable].

GET + POST $qd — Page search (ControllerUri)

NavigationController.cs

[ApiController]
[Route("api/navigation")]
public class NavigationController : LgControllerBase
{
    [HttpGet("pages")]
    [Queryable]
    public IQueryable<LgPageLink> GetPages()
    {
        // Build the complete list server-side to apply permissions or business rules before filtering.
        List<LgPageLink> pages = new()
        {
            DashboardPage.Link(),
            OrdersPage.Link(),
            CustomersPage.Link(),
            ReportsPage.Link()
        };

        // Return IQueryable to let [Queryable] apply the search text, pagination, and sorts.
        return pages.AsQueryable();
    }
}

Local or remote data

Items is simpler for a static list. ControllerUri becomes relevant if the list is large, dynamic, or filtered by permissions computed on the server side.

Filtering, collation, and result count

FilterTextSearchMode, TextFilterCollation, MinSearchCharacter, and MaxItemsInView allow adjustment of the search behavior.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items"
                 Placeholder="#SearchNavigationPlaceholder"
                 FilterTextSearchMode="FilterTextSearchMode.StartsWith"
                 TextFilterCollation="CollationType.IgnoreCaseAndAccent"
                 MinSearchCharacter="0"
                 MaxItemsInView="0" />

Parameter	Effect
MinSearchCharacter="0"	Opens the search even without input.
MaxItemsInView="0"	Displays all available results.
FilterTextSearchMode	Chooses Contains, StartsWith, or EndsWith.
TextFilterCollation	Manages case and accents during filtering.

Customize result rendering

ItemContent replaces the default rendering. If HighlightText is enabled, add the highlightable class to the element containing the text to highlight.

SearchPage.razor

@inherits LgPage

<LgNavigationBox Items="_items" HighlightText="true" Placeholder="#SearchNavigationPlaceholder">
    <ItemContent Context="item">
        <LgIcon IconName="@item.IconName" />
        <span class="highlightable">@item.Title.CheckTranslate()</span>
    </ItemContent>
</LgNavigationBox>

Without ItemContent, the component automatically displays the icon IconName and translated title Title in an internal LgHyperlink.

Properties

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

Name	Type	Default	Declared in	Description
ControllerUri	string	null	LgSuggestBoxBase<TItem>	URI of the controller used to load results remotely.
DropDownMaxHeight	int	-1	LgSuggestBoxBase<TItem>	Maximum height of the dropdown menu, in pixels. -1 uses available space.
FilterTextSearchMode	FilterTextSearchMode	FilterTextSearchMode.Contains	LgSuggestBoxBase<TItem>	Comparison mode used to filter the searched text.
HighlightText	bool	false	LgSuggestBoxBase<TItem>	Highlights found text in displayed results.
ItemContent	RenderFragment<TPageLink>	null	LgSuggestBoxBase<TItem>	Custom template for rendering a result.
Items	IEnumerable<TPageLink>	null	LgSuggestBoxBase<TItem>	Local source of offered pages.
MaxItemsInView	int	8	LgSuggestBoxBase<TItem>	Maximum number of displayed results. 0 shows all results.
MinSearchCharacter	int	0	LgSuggestBoxBase<TItem>	Minimum number of characters before starting the search.
TextFilterCollation	CollationType?	null	LgSuggestBoxBase<TItem>	Sensitivity to case and accents. If null, the value of App.BehaviorConfiguration.TextFilterCollation.Value is used at initialization.
AllowResize	bool	false	LgTextBox	Allows resizing when TextMode is TextBoxMode.Multiline.
AutoComplete	bool	false	LgTextBox	Enables browser autocompletion if true; otherwise the autocomplete="off" attribute is rendered.
AutoUnmask	bool	false	LgTextBox	Returns the value without the mask when InputMask is used.
ClearIncomplete	bool	false	LgTextBox	Clears the value if the input mask is incomplete.
DataList	List<string>	null	LgTextBox	List of values used to render a datalist associated with the input.
InputMask	string	null	LgTextBox	Input mask applied to the text field.
InputMaskKind	InputMaskKind	InputMaskKind.None	LgTextBox	Type of input mask.
MaxLength	int?	null	LgTextBox	Maximum number of characters. If not set, it is deduced from Container or the model's MaxLength attribute, otherwise 0.
MaxRows	int?	null	LgTextBox	Maximum number of lines when TextMode is TextBoxMode.Multiline.
MinRows	int?	null	LgTextBox	Minimum number of lines when TextMode is TextBoxMode.Multiline.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	null	LgTextBox	Callback called before value change; it can cancel the change.
OnChangeDisabled	bool	false	LgTextBox	Disables the native onchange handler of the field.
OnFocus	EventCallback<FocusEventArgs>	—	LgTextBox	Callback triggered when the field receives focus.
OnInput	EventCallback<ChangeEventArgs>	—	LgTextBox	Callback triggered on input (oninput).
OnKeyUp	EventCallback<KeyboardEventArgs>	—	LgTextBox	Callback triggered on key release.
Placeholder	string	null	LgTextBox	Placeholder of the search field.
Rows	int?	null	LgTextBox	Number of lines when TextMode is TextBoxMode.Multiline.
TextMode	TextBoxMode?	null	LgTextBox	Text field mode. null renders a simple text field.
Prefix	string	IconNames.All.Search	LgInputRenderBase<TValue>	Prefix displayed before the field. The LgNavigationBox constructor sets it to the search icon.
PrefixType	InputLabelType	InputLabelType.IconName	LgInputRenderBase<TValue>	Type of prefix rendering.
Suffix	string	null	LgInputRenderBase<TValue>	Suffix displayed after the field.
SuffixType	InputLabelType	InputLabelType.Text	LgInputRenderBase<TValue>	Type of suffix rendering.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase<TValue>	Additional HTML attributes applied to the main container (captures unmapped values).
AutoFocus	bool	false	LgInputBase<TValue>	Gives focus to the field on first render.
ConfirmationMessage	string	null	LgInputBase<TValue>	Confirmation message displayed before applying a new value.
Container	IInputContainer<string>	null	LgInputBase<TValue>	Internal container used notably by LgGridView cells.
CssClass	string	null	LgInputBase<TValue>	Additional CSS classes of the form group.
Disabled	bool	false	LgInputBase<TValue>	Disables the field.
DisplayName	string	null	LgInputBase<TValue>	Display name used in validation and parsing messages.
HideValidationMessage	bool	false	LgInputBase<TValue>	Hides inline validation messages.
Label	string	null	LgInputBase<TValue>	Label of the field.
LabelContent	RenderFragment	null	LgInputBase<TValue>	Custom label content.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase<TValue>	Callback called after applying a new value.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase<TValue>	Callback called when the reset button restores the value to default.
PolicyEdit	string	null	LgInputBase<TValue>	Policy required to edit the field.
PolicyVisible	string	null	LgInputBase<TValue>	Policy required to display the field.
ReadOnly	bool	false	LgInputBase<TValue>	Renders the field as read-only.
Required	bool?	null	LgInputBase<TValue>	Indicates whether the field is required. If null, the information is deduced from the model's [Required] attribute.
ResetButton	bool?	null	LgInputBase<TValue>	Shows the reset button. If null, application configuration is used.
ResetText	string	null	LgInputBase<TValue>	Text of the reset button; application configuration is used if not set.
ResetTextAriaLabel	string	null	LgInputBase<TValue>	ARIA label of the reset button; application configuration is used if not set.
Tooltip	string	null	LgInputBase<TValue>	Tooltip of the field.
TooltipIsHtml	bool	false	LgInputBase<TValue>	Indicates whether Tooltip content is in HTML format.
Value	string	null	LgInputBase<TValue>	Field value, usable with @bind-Value.
ValueChanged	EventCallback<string>	—	LgInputBase<TValue>	Callback for two-way binding of Value.
ValueExpression	Expression<Func<string>>	null	LgInputBase<TValue>	Expression identifying the bound value, used by Blazor validation.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Cascading parameters

LgNavigationBox also consumes parameters automatically provided by ancestor components: CascadedEditContext (EditContext), EditFormConfiguration (LgEditFormConfiguration), ParentAuthorizeView (LgAuthorizeView), InputBusyReference (InputBusyReference), and ContextProvider (IComponentContextProvider, inherited from LgComponentBase).

Events

Event	Type	Description
ValueChanged	EventCallback<string>	Callback generated by @bind-Value when the value changes.
OnChange	EventCallback<ChangeEventArgs>	Triggered after a new value is applied.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	Called before value change; the change can be canceled.
OnFocus	EventCallback<FocusEventArgs>	Triggered when the field receives focus.
OnInput	EventCallback<ChangeEventArgs>	Triggered during input and used by the search.
OnKeyUp	EventCallback<KeyboardEventArgs>	Triggered on key release.
OnReset	EventCallback<ChangeEventArgs>	Triggered when the reset button restores the value to default.

Associated enumerations

FilterTextSearchMode

Value	Description
Contains	The searched text is contained in the value.
StartsWith	The value starts with the searched text.
EndsWith	The value ends with the searched text.

CollationType

Value	Description
CaseSensitive	Sensitive to case and accents.
IgnoreCase	Insensitive to case, sensitive to accents.
IgnoreCaseAndAccent	Insensitive to case and accents.

InputLabelType

Value	Description
IconName	The prefix or suffix is a Lagoon icon name.
Text	The prefix or suffix is plain text.

InputMaskKind

Value	Description
None	No mask.
Mask	Mask based on 9, a and *.
Regex	Mask based on a regular expression.
Email	Email input mask.

TextBoxMode

Value	Description
Multiline	Renders a multiline text area.
Password	Renders a password field.

Accessibility

• Provide Label, AriaLabel, or AriaLabelledBy to name the search field.
• The constructor configures a search icon prefix IconNames.All.Search; keep an accessible label because the icon alone is not sufficient.
• The attributes aria-required, aria-readonly, aria-invalid, and aria-describedby are managed by the input base according to validation and field state.

Related components

• LgHyperlink — component used to render navigation results.
• LgNavLink — navigation link with automatic active state.
• LgButton — alternative to trigger navigation from a button action.