Search code examples
blazor-server-sidemudblazor

MudNavGroup expands toggles when I click on MudNavLink. How do I keep the group open


What needs to happen, is when I click on a MudNavLink the MudNavGroup should stay open. Just like it does on the MudBlazor Docs site. However, if I click on the link it toggles the group closed.

Is there a better way to get this behavior?

        <MudNavGroup Title="Exams" Icon="@Icons.Material.Filled.Settings" Expanded="@Exams"
                 @onclick="@(e => Exams = !Exams)">
        <MudNavLink Title="Find Exam" href="findExam" Icon="@Icons.Material.Filled.AdminPanelSettings" >Find an Exam</MudNavLink>
        <MudNavLink Title="Find Exam" href="ModifyRegistration" Icon="@Icons.Material.Filled.AdminPanelSettings" >Modify Registration</MudNavLink>
        <MudNavLink Title="Find Exam" href="RegistrationForExam" Icon="@Icons.Material.Filled.AdminPanelSettings" >Registration For Exam</MudNavLink>
    </MudNavGroup>
    
    <MudNavGroup Title="Laurel Information" Icon="@Icons.Material.Filled.Settings" Expanded="@Info"
                 @onclick="@(e => Info = !Info)">
        <MudNavLink Href="/Officers" Icon="@Icons.Material.Filled.Receipt" >Credits</MudNavLink>
        <MudNavLink Href="/Coordinators" Icon="@Icons.Material.Filled.Receipt" >Coordinators</MudNavLink>
        <MudNavLink Href="/Webmaster" Icon="@Icons.Material.Filled.Receipt" >Webmasters</MudNavLink>
        <MudNavLink Href="/Credits" Icon="@Icons.Material.Filled.Receipt" >Webmasters</MudNavLink>
    </MudNavGroup>

Solution

  • Expanded is a two way boolean property Docs. So you need to prefix it with a @bind- so that the states of the boolean values are preserved.

    And the @onclick is already embedded into the component so you can remove that.

    If you want to run your own custom logic when it's clicked then you can use Expanded and ExpandedChanged instead of @bind-Expanded

    <MudNavGroup @bind-Expanded="@Exams" Title="Exams" Icon="@Icons.Material.Filled.Settings">
        <MudNavLink Title="Find Exam" href="findExam" Icon="@Icons.Material.Filled.AdminPanelSettings" >Find an Exam</MudNavLink>
        <MudNavLink Title="Find Exam" href="ModifyRegistration" Icon="@Icons.Material.Filled.AdminPanelSettings" >Modify Registration</MudNavLink>
        <MudNavLink Title="Find Exam" href="RegistrationForExam" Icon="@Icons.Material.Filled.AdminPanelSettings" >Registration For Exam</MudNavLink>
    </MudNavGroup>
        
    <MudNavGroup @bind-Expanded="@Info" Title="Laurel Information" Icon="@Icons.Material.Filled.Settings">
        <MudNavLink Href="/Officers" Icon="@Icons.Material.Filled.Receipt" >Credits</MudNavLink>
        <MudNavLink Href="/Coordinators" Icon="@Icons.Material.Filled.Receipt" >Coordinators</MudNavLink>
        <MudNavLink Href="/Webmaster" Icon="@Icons.Material.Filled.Receipt" >Webmasters</MudNavLink>
        <MudNavLink Href="/Credits" Icon="@Icons.Material.Filled.Receipt" >Webmasters</MudNavLink>
    </MudNavGroup>