MudNavLink: Allow custom ActiveClass (#5619)

MudBlazor · Nov 8, 2022 · 4539f0f · 4539f0f
1 parent a36b2d7
commit 4539f0f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/MudBlazor.UnitTests/Components/NavLinkTests.cs b/src/MudBlazor.UnitTests/Components/NavLinkTests.cs
@@ -46,6 +46,15 @@ public async Task NavLink_CheckOnClickEvent()
             clicked.Should().BeTrue();
         }
 
+        [Test]
+        public async Task NavLink_Active()
+        {
+            const string activeClass = "Custom__nav_active_css";
+            var comp = Context.RenderComponent<MudNavLink>(Parameter(nameof(MudNavLink.ActiveClass), activeClass));
+            comp.Find(".mud-nav-link").Click();
+            comp.Markup.Should().Contain(activeClass);
+        }
+
         [Test]
         public async Task NavLink_Enabled_CheckNavigation()
         {

diff --git a/src/MudBlazor/Components/NavMenu/MudNavLink.razor b/src/MudBlazor/Components/NavMenu/MudNavLink.razor
@@ -9,7 +9,7 @@
                  class="@LinkClassname" 
                  @attributes="@Attributes"
                  Match="@Match" 
-                 ActiveClass="active">
+                 ActiveClass="@ActiveClass">
             @if (!string.IsNullOrEmpty(Icon))
             {
                 <MudIcon Icon="@Icon" Color="@IconColor" Class="@IconClassname"/>
@@ -23,7 +23,7 @@
     {
         <div @onclick="OnClickHandler"
              class="@LinkClassname"
-             ActiveClass="active">
+             ActiveClass="@ActiveClass">
             @if (!string.IsNullOrEmpty(Icon))
             {
                 <MudIcon Icon="@Icon" Color="@IconColor" Class="@IconClassname" />

diff --git a/src/MudBlazor/Components/NavMenu/MudNavLink.razor.cs b/src/MudBlazor/Components/NavMenu/MudNavLink.razor.cs
@@ -58,6 +58,13 @@ public partial class MudNavLink : MudBaseSelectItem
         [Category(CategoryTypes.NavMenu.ClickAction)]
         public string Target { get; set; }
 
+        /// <summary>
+        /// User class names when active, separated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.ComponentBase.Common)]
+        public string ActiveClass { get; set; } = "active";
+
         [CascadingParameter] INavigationEventReceiver NavigationEventReceiver { get; set; }
 
         protected Task HandleNavigation()