Different navbar on pages

Phrone 21 Reputation points
2022-04-01T15:00:08.87+00:00

Hello,
I have a Blazor Server application where my navbar (TopMenu) is added to MainLayout.razor.

@inherits LayoutComponentBase

<PageTitle>My Site</PageTitle>

<div class="page">
    <TopMenu />
    ...
</div>

Now I have one page where I want to have a different navbar. Lets say "TopMenu2".

How can I do this?

Developer technologies | .NET | Blazor
0 comments No comments
{count} votes

Accepted answer
  1. Anonymous
    2022-04-04T02:28:05.47+00:00

    Hi @Phrone ,

    Now I have one page where I want to have a different navbar. Lets say "TopMenu2".

    How can I do this?

    In the MainLayout.razor component, you could use NavigationManager to get the current request url, then use an @if statement to check whether it is in the specified page, and then show the different menu. Code like this:

    @inherits LayoutComponentBase  
    @inject NavigationManager MyNavigationManager    
    <div class="page">  
        <div class="sidebar">  
      
            @if (MyNavigationManager.Uri.Contains("counter"))  
            {  
                <NavMenu2 />  
            }  
            else  
            {  
                <NavMenu />  
            }  
        </div>  
      
        <main>  
            <div class="top-row px-4 auth">  
                <LoginDisplay />  
                <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>  
            </div>  
      
            <article class="content px-4">  
                @Body  
            </article>  
        </main>  
    </div>  
    

    The result like this:

    189529-1.gif


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Phrone 21 Reputation points
    2022-04-04T06:01:36.883+00:00

    Thanks @Anonymous , it works great.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.