ProductUI Nav list - PrimerBlazor

Basic Navigation List

<PrimerNavList>
    <PrimerNavListItem Href="javascript:void(0);" State="NavListItemState.Active">
        <PrimerNavListLeadingVisual>
            <PrimerIcon Icon="IconName.Person16" Size="IconSize.Small" />
        </PrimerNavListLeadingVisual>
        <PrimerNavListLabel>Profile</PrimerNavListLabel>
    </PrimerNavListItem>

    <PrimerNavListDivider />

    <PrimerNavListDivider Title="Settings" />

    <PrimerNavListItem Href="javascript:void(0);">
        <PrimerNavListLeadingVisual>
            <PrimerIcon Icon="IconName.Gear16" Size="IconSize.Small" />
        </PrimerNavListLeadingVisual>
        <PrimerNavListLabel>Account Settings</PrimerNavListLabel>
    </PrimerNavListItem>
</PrimerNavList>

Navigation List with Toggles

<PrimerNavList>
    <PrimerNavListItem IsButton="true" IsToggle="true"
                        IsOpen="@GetToggleState("manage")"
                        IsOpenChanged="@(v => toggleStates["manage"] = v)">
        <PrimerNavListLeadingVisual>
            <PrimerIcon Icon="IconName.Gear16" Size="IconSize.Small" />
        </PrimerNavListLeadingVisual>
        <PrimerNavListLabel>Manage</PrimerNavListLabel>
        <PrimerNavListTrailingVisual>
            <PrimerIcon Icon="@(GetToggleState("manage") ? IconName.ChevronUp16 : IconName.ChevronDown16)" />
        </PrimerNavListTrailingVisual>

        <PrimerNavListSubGroup>
            <PrimerNavListItem Href="javascript:void(0);">
                <PrimerNavListLeadingVisual>
                    <PrimerIcon Icon="IconName.Rocket16" Size="IconSize.Small" />
                </PrimerNavListLeadingVisual>
                <PrimerNavListLabel>User Profile</PrimerNavListLabel>
            </PrimerNavListItem>
            <PrimerNavListItem Href="javascript:void(0);">
                <PrimerNavListLeadingVisual>
                    <PrimerIcon Icon="IconName.ShieldCheck16" Size="IconSize.Small" />
                </PrimerNavListLeadingVisual>
                <PrimerNavListLabel>Security</PrimerNavListLabel>
            </PrimerNavListItem>
        </PrimerNavListSubGroup>
    </PrimerNavListItem>
</PrimerNavList>

NavList Options

Available options for NavList components

Name	Description	Default Value	CSS Class
Href	Navigation link URL	"#"	-
Target	Link target (_self, _blank)	"_self"	-
IsButton	Render item as button	false	-
IsToggle	Make item expandable/collapsible	false	-
IsOpen	Expand state when toggle	false	-
State	Navigation item visual state	Default	ActionList-item--navActive / navInactive
LeadingVisual	Optional leading icon or avatar	-	ActionList-item-visual--leading
TrailingVisual	Optional trailing icon	-	ActionList-item-visual--trailing
Label	Main label text	-	ActionList-item-label
SubGroup	Child list group	-	ActionList--subGroup
Divider	Section divider	-	ActionList-sectionDivider

private Dictionary<string, bool> toggleStates = new();

private bool GetToggleState(string key) => toggleStates.TryGetValue(key, out var value) && value;