Top Menu instead of side menu in Blazor from WebAssembly template in VS2019

user_2705468 0
Viewed 1957

I have read and studied a similar question Blazor template with menu across the top, however I am still not understanding why a simple top menu is not easier using the Blazor template in Visual Studio. I use this simple code in MainLayout.razor to test what the container will look like when i run the code:

@inherits LayoutComponentBase

<div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <!--<NavMenu />-->
    </nav>
</div>

I have even commented out NavMenu.razor, but still the navbar does not stretch all the way across the page.

enter image description here

Looks like the Blazor Template still does not support top navigation menu's by default ?

twitter-bootstrap visual-studio-2019 blazor
1 Answers

I see that your component NavMenu is commented out, please uncomment and see if it works, code should be like this:

<div class="container-fluid">
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <NavMenu />
    </nav>
</div>

If that's not the case, then follow below:

So this is not something related to Blazor, but HTML/CSS and as you are using Bootstrap you can get help from here: https://getbootstrap.com/docs/4.5/components/navbar/

Basically, you might need to change the HTML that is in the NavMenu component to match the HTML from the above bootstrap link, you can use any sample code from there, for example, this: https://getbootstrap.com/docs/4.5/components/navbar/#nav

user_11588450
Related