Adds IsActivePage Taghelper our-is-active-page="selected"

Author: Warren Buckley

Our.Umbraco.TagHelpers/IsActivePageTagHelper.cs

@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Umbraco.Cms.Core.Web;
+using Umbraco.Extensions;
+
+namespace Our.Umbraco.TagHelpers
+{
+    /// <summary>
+    /// An attribute TagHelper that only works with <a> tags
+    /// 
+    /// Applying the attribute our-is-active-page="navi-active"
+    /// Will apply the CSS class name navi-active to the class attribute
+    /// if the value in the href of the <a> compared to the page being rendered
+    /// is the current page or part of an ancestor
+    /// </summary>
+    [HtmlTargetElement("a", Attributes = "our-is-active-page")]
+    public class IsActivePageTagHelper : TagHelper
+    {
+        private IUmbracoContextAccessor _umbracoContextAccessor;
+
+        public IsActivePageTagHelper(IUmbracoContextAccessor umbracoContextAccessor)
+        {
+            _umbracoContextAccessor = umbracoContextAccessor;
+        }
+
+        /// <summary>
+        /// The CSS class name you wish to append to the class attribute
+        /// on an <a> tag when the page is active/selected
+        /// </summary>
+        [HtmlAttributeName("our-is-active-page")]
+        public string ActiveClassName { get; set; }
+        
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            // Remove the attribute 
+            // We don't want it in the markup we send down to the page
+            if(output.Attributes.TryGetAttribute("our-is-active-page", out TagHelperAttribute tagHelperAttr))
+            {
+                output.Attributes.Remove(tagHelperAttr);
+            }
+
+            var ctx = _umbracoContextAccessor.GetRequiredUmbracoContext();
+
+            // On the <a> try to find the href attribute and its value
+            var href = output.Attributes["href"]?.Value.ToString();
+            if (string.IsNullOrEmpty(href))
+            {
+                return;
+            }
+
+            // Clean href values of any querystrings
+            // As we won't be able to query GetByRoute for an Umbraco node with them
+            href = href.Substring(0, href.IndexOf("?") > 0 ? href.IndexOf("?") : href.Length);
+
+            // Get the node based of the value in the HREF
+            var nodeOfLink = ctx.Content.GetByRoute(href);
+            if(nodeOfLink == null)
+            {
+                return;
+            }
+
+            // Get the current node of the page that is rendering
+            var currentPageRendering = ctx.PublishedRequest.PublishedContent;
+
+            // Check if thelink we are rendering is current page or an ancestor
+            if(nodeOfLink.IsAncestorOrSelf(currentPageRendering))
+            {
+                // Is active page
+                // Check if the <a> has a class attribute already
+                if(output.Attributes.TryGetAttribute("class", out TagHelperAttribute classAttribute))
+                {
+                    var existingClasses = classAttribute.Value.ToString();
+                    output.Attributes.SetAttribute("class", existingClasses + " nav-link--active");
+                }
+                else
+                {
+                    // No class attribute exists so add a new one
+                    output.Attributes.SetAttribute("class", "nav-link--active");
+                }
+            }
+        }
+    }
+}

README.md

@@ -292,6 +292,21 @@ If you want the edit link to open in a new tab, just add the `target="_blank"` a
 <our-edit-link target="_blank">Edit</our-edit-link>
 ```
 
+## `our-is-active-page`
+This is a tag helper attribute that can be applied to `<a>` element in the razor template or partial. It will use the value inside the attribute and append it to the class attribute of the `<a>`.
+If the link inside the href attribute can be found by its route as a content node, if so then it will check with the current page being rendered if its the same node or an ancestor.
+
+This allows for the navigation item to still have the class added to it when a child or grandchildren page is the currently page being rendered.
+
+### Simple Example
+```cshtml
+@foreach (var item in Model.Root().Children)
+{
+    <a href="@item.Url()" class="nav-link" our-is-active-page="navi-link--active">@item.Name</a>
+}
+```
+
+
 ## Video 📺
 [![How to create ASP.NET TagHelpers for Umbraco](https://user-images.githubusercontent.com/1389894/138666925-15475216-239f-439d-b989-c67995e5df71.png)](https://www.youtube.com/watch?v=3fkDs0NwIE8)