nav: highlight active page with active class and aria-current
Add PageHelpers.ActivePage extension and apply it to top-level nav items and the Account/Register + Account/Signin items in _LoginPartial, so the current route gets the active class and aria-current="page" for accessibility.
This commit is contained in:
parent
f055ac45df
commit
325cb339fd
3 changed files with 45 additions and 6 deletions
|
|
@ -49,10 +49,10 @@
|
|||
else
|
||||
{
|
||||
<li class="dropdown-item">
|
||||
<a class="nav-link" asp-controller="Account" asp-action="Register" >Register</a>
|
||||
<a class="nav-link @PageHelpers.ActivePage(ViewContext, "Account", "Register")" asp-controller="Account" asp-action="Register" >Register</a>
|
||||
</li>
|
||||
<li class="dropdown-item">
|
||||
<a class="nav-link" asp-controller="Account" asp-action="Signin" asp-route-ReturnUrl="~/" asp-route-AllowRememberLogin="true" >Signin</a>
|
||||
<a class="nav-link @PageHelpers.ActivePage(ViewContext, "Account", "Signin")" asp-controller="Account" asp-action="Signin" asp-route-ReturnUrl="~/" asp-route-AllowRememberLogin="true" >Signin</a>
|
||||
</li>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ background-attachment: fixed;">
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbar" >
|
||||
<ul class="navbar-nav me-auto" >
|
||||
<li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Home</a></li>
|
||||
<li class="nav-item"><a asp-controller="Blogspot" asp-action="Index" class="nav-link">@Localizer["Blogs"]</a></li>
|
||||
<li class="nav-item"><a asp-controller="Home" asp-action="Contact" class="nav-link">@Localizer["Contact"]</a></li>
|
||||
<li class="nav-item"><a asp-controller="Home" asp-action="About" class="nav-link">@Localizer["About"]</a></li>
|
||||
<li class="nav-item"><a class="nav-link @PageHelpers.ActivePage(ViewContext, "")" href="/">@Localizer["Home"]</a></li>
|
||||
<li class="nav-item"><a asp-controller="Blogspot" asp-action="Index" class="nav-link @PageHelpers.ActivePage(ViewContext, "Blogspot")">@Localizer["Blogs"]</a></li>
|
||||
<li class="nav-item"><a asp-controller="Home" asp-action="Contact" class="nav-link @PageHelpers.ActivePage(ViewContext, "Home", "Contact")">@Localizer["Contact"]</a></li>
|
||||
<li class="nav-item"><a asp-controller="Home" asp-action="About" class="nav-link @PageHelpers.ActivePage(ViewContext, "Home", "About")">@Localizer["About"]</a></li>
|
||||
<partial name="_LoginPartial" />
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue