Answers for "bootsrap 5 navigation bar"

asp net bootstrap 5 navigation bar

//If your bootstrap navbar breaks in ASP.NET when updating to bootstrap 5.

//So I first exported my navbar into a partial view and modified the code as follows
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        @Html.ActionLink( "Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" } )
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    @Html.ActionLink( "Home", "Index", "Home", new { @class = "nav-link" } )
                </li>
            </ul>
           
            //these are the register and login links, I have individual user atuh enabled
            @Html.Partial( "_LoginPartial" )
        </div>
    </div>
</nav>

//If you have the register and login buttons on the navbar,
//Then navigate to ~/views/shared/_LoginPartial.cshtml and modify the code:
@using Microsoft.AspNet.Identity
@if ( Request.IsAuthenticated )
{
    using ( Html.BeginForm( "LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right nav-link" } ) )
    {
        @Html.AntiForgeryToken()

        <ul class="nav navbar-nav navbar-right">
            <li>
                @Html.ActionLink( "Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" } )
            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link">Log off</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
            @Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" } )
        </li>
        <li class="nav-item">
            @Html.ActionLink( "Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" } )
        </li>
    </ul>
}


//Now, call the navbar partial view in the _Layout.cshtml. Otherwise you can just replace
//the navbar in layout.cshtml with the first batch of code above.

//Hope this helps!

Navbar Bootstrap 5

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>