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:
Paul Schneider 2026-06-20 19:48:20 +01:00
commit 325cb339fd
3 changed files with 45 additions and 6 deletions

View file

@ -1,12 +1,51 @@
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering; using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.Extensions.Localization; using Microsoft.Extensions.Localization;
namespace Yavsc.Server.Helpers namespace Yavsc.Server.Helpers
{ {
public static class PageHelpers public static class PageHelpers
{ {
/// <summary>
/// Returns "active" aria-current="page" when the current route matches the given
/// controller/action, otherwise an empty string. Use as an attribute value
/// inside a &lt;a class="nav-link @..."&gt; element.
/// Pass an empty controller (or "Home" with action "Index") to match the site root.
/// </summary>
public static IHtmlContent ActivePage(this ViewContext viewContext, string controller, string action = null)
{
var route = viewContext?.RouteData.Values;
if (route == null) return HtmlString.Empty;
var currentController = route["controller"] as string;
var currentAction = route["action"] as string;
// Normalize: empty or "Home" + ("Index" or null) both target the site root.
bool isHome = string.IsNullOrEmpty(controller)
|| (string.Equals(controller, "Home", StringComparison.Ordinal)
&& (action == null || string.Equals(action, "Index", StringComparison.Ordinal)));
bool isCurrent;
if (isHome)
{
isCurrent = string.IsNullOrEmpty(currentController)
|| string.Equals(currentController, "Home", StringComparison.Ordinal)
&& (currentAction == null || string.Equals(currentAction, "Index", StringComparison.Ordinal));
}
else
{
isCurrent = string.Equals(currentController, controller, StringComparison.Ordinal)
&& (action == null || string.Equals(currentAction, action, StringComparison.Ordinal));
}
return isCurrent
? (IHtmlContent)new HtmlString("active\" aria-current=\"page")
: HtmlString.Empty;
}
public static List<SelectListItem> CreateSelectListItems<T> (this IStringLocalizer<T> localisation, Type enumType, object selectedValue =null) public static List<SelectListItem> CreateSelectListItems<T> (this IStringLocalizer<T> localisation, Type enumType, object selectedValue =null)
{ {
string selectedName = (selectedValue != null) ? enumType.GetEnumName(selectedValue) : null; string selectedName = (selectedValue != null) ? enumType.GetEnumName(selectedValue) : null;

View file

@ -49,10 +49,10 @@
else else
{ {
<li class="dropdown-item"> <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>
<li class="dropdown-item"> <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> </li>
} }

View file

@ -13,10 +13,10 @@ background-attachment: fixed;">
</button> </button>
<div class="collapse navbar-collapse" id="navbar" > <div class="collapse navbar-collapse" id="navbar" >
<ul class="navbar-nav me-auto" > <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 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">@Localizer["Blogs"]</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">@Localizer["Contact"]</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">@Localizer["About"]</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" /> <partial name="_LoginPartial" />
</ul> </ul>
</div> </div>