BlazorFluentUI V5.6.1.0
View BlazorFluentUI GitHub repo

Nav

Overview

A navigation pane (Nav) provides links to the main areas of an app or site.

Usage

Navigation
<Nav>
    <NavLinkGroup Name="First" CollapseByDefault="false">
        <BlazorFluentUI.Routing.NavLink Name="A Link" IconName="Airplane" Url="navPage#ALink" Id="ALink" NavMatchType="NavMatchType.AnchorIncluded" >
            <BlazorFluentUI.Routing.NavLink Name="A SubLink 1" NestedDepth="1" Url="navPage#ALink1" Id="ALink1" NavMatchType="NavMatchType.AnchorIncluded" />
            <BlazorFluentUI.Routing.NavLink Name="A SubLink 2" NestedDepth="1" Url="navPage#ALink2" Id="ALink2" NavMatchType="NavMatchType.AnchorIncluded" />
            <BlazorFluentUI.Routing.NavLink Name="A SubLink 3" NestedDepth="1" Url="navPage#ALink3" Id="ALink3" NavMatchType="NavMatchType.AnchorIncluded" />
        </BlazorFluentUI.Routing.NavLink>

        <BlazorFluentUI.Routing.NavLink Name="B Link" Url="navPage#BLink" NestedDepth="0" Id="BLink" NavMatchType="NavMatchType.AnchorIncluded">
            <BlazorFluentUI.Routing.NavLink Name="B SubLink 1" NestedDepth="1" Url="navPage#BLink1" Id="BLink1" NavMatchType="NavMatchType.AnchorIncluded">
<BlazorFluentUI.Routing.NavLink Name="B SubSubLink 1" NestedDepth="2" Url="navPage#BBLink1" Id="BBLink1" NavMatchType="NavMatchType.AnchorIncluded">
    <BlazorFluentUI.Routing.NavLink Name="B SubSubSubLink 1" NestedDepth="3" Url="navPage#BBBLink1" Id="BBBLink1" NavMatchType="NavMatchType.AnchorIncluded" />
    <BlazorFluentUI.Routing.NavLink Name="B SubSubSubLink 2" NestedDepth="3" Url="navPage#BBBLink2" Id="BBBLink2" NavMatchType="NavMatchType.AnchorIncluded" />
    <BlazorFluentUI.Routing.NavLink Name="B SubSubSubLink 3" NestedDepth="3" Url="navPage#BBBLink3" Id="BBBLink3" NavMatchType="NavMatchType.AnchorIncluded" />
</BlazorFluentUI.Routing.NavLink>
<BlazorFluentUI.Routing.NavLink Name="B SubSubLink 2" NestedDepth="2" Url="navPage#BBLink2" Id="BBLink2" NavMatchType="NavMatchType.AnchorIncluded" />
<BlazorFluentUI.Routing.NavLink Name="B SubSubLink 3" NestedDepth="2" Url="navPage#BBLink3" Id="BBLink3" NavMatchType="NavMatchType.AnchorIncluded" />
            </BlazorFluentUI.Routing.NavLink>
            <BlazorFluentUI.Routing.NavLink Name="B SubLink 2" NestedDepth="1" Url="navPage#BLink2" Id="BLink2" NavMatchType="NavMatchType.AnchorIncluded" />
            <BlazorFluentUI.Routing.NavLink Name="B SubLink 3" NestedDepth="1" Url="navPage#BLink3" Id="BLink3" NavMatchType="NavMatchType.AnchorIncluded" />
        </BlazorFluentUI.Routing.NavLink>
        <BlazorFluentUI.Routing.NavLink Name="C Link" Url="navPage#CLink" Id="CLink" NavMatchType="NavMatchType.AnchorIncluded" />

    </NavLinkGroup>
    <NavLinkGroup Name="Second" CollapseByDefault="true">
        <BlazorFluentUI.Routing.NavLink Name="D Link" Url="navPage#DLink" Id="DLink" NavMatchType="NavMatchType.AnchorIncluded" />
        <BlazorFluentUI.Routing.NavLink Name="E Link" Url="navPage#ELink" Id="ELink" NavMatchType="NavMatchType.AnchorIncluded" />
        <BlazorFluentUI.Routing.NavLink Name="F Link" Url="navPage#FLink" Id="FLink" NavMatchType="NavMatchType.AnchorIncluded" />
    </NavLinkGroup>
    <NavLinkGroup Name="Third" CollapseByDefault="true">
        <BlazorFluentUI.Routing.NavLink Name="G Link" Url="navPage#GLink" Id="GLink" NavMatchType="NavMatchType.AnchorIncluded" />
    </NavLinkGroup>
    <NavLinkGroup Name="Fouth" CollapseByDefault="true">
        <BlazorFluentUI.Routing.NavLink Name="H Link" Url="navPage#HLink" Id="HLink" NavMatchType="NavMatchType.AnchorIncluded" />
    </NavLinkGroup>
</Nav>