Blazor Server Application - Toggle Navbar

Question

Hi,

I wonder if there is a way to toggle (hide/show) the side menu navbar? Can you please help me?

Something like this actually, https://getbootstrap.com/docs/5.0/components/navbar/ external content section. Or like this one; https://www.mudblazor.com/getting-started/wireframes/layout2. The question is can I use radzen, mudblazor, etc together?

Thanks in advance.

Answer 1

Hi @Cenk ,

I wonder if there is a way to toggle (hide/show) the side menu navbar? Can you please help me?

Something like this actually, https://getbootstrap.com/docs/5.0/components/navbar/ external content section. Or like this one; https://www.mudblazor.com/getting-started/wireframes/layout2.

I assume you are using the default Blazor server NavMenu.razor and MainLayout.razor component, then, you can modify the code as below:

NavMenu.razor:

MainLayour.razor:

Then, in the wwwroot/css/site.cs file add the following style: it is used to change the toggler icon and the color.

You can view the source code from here: 228005-sourcecode.txt

The result is like this:

The question is can I use radzen, mudblazor, etc together?

You can try to use them in the same project, if there is no error when running the application, it means you can use them together. But I'm not suggesting you use both, because using multiple third-party packages together might cause incompatibility or conflict issue.

---

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.

Answer 2

@Anonymous I want to use https://getbootstrap.com/docs/5.0/examples/sidebars/# collapsible for the sidebar. Which part of HTML should I get to use with the toggler with your sample?

One more thing, is it possible to make collapsing more smooth?

Answer 3

I copied sidebars.css and the related html tags but there are some problems with the outcome. Can you please help me?

I forgot that clicking the menu items triggers the toggler trigger. How can I only trigger the sidebar hide and show only with the toggler icon? @Anonymous