diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
index a5d3354741..80385054cb 100644
--- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
+++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
@@ -20,6 +20,9 @@
Item 5.1
Item 6
+
+ Item 7.1
+
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
index 062c270a0f..6de18c086a 100644
--- a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
+++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
@@ -104,6 +104,10 @@ public FluentNavGroup()
private async Task ToggleExpandedAsync()
{
+ if (Disabled)
+ {
+ return;
+ }
if (!Owner.Expanded && Owner.CollapsedChildNavigation)
{
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.css b/src/Core/Components/NavMenu/FluentNavGroup.razor.css
index 8f388ddfad..fb0435c1ed 100644
--- a/src/Core/Components/NavMenu/FluentNavGroup.razor.css
+++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.css
@@ -14,16 +14,6 @@
min-width: 20px;
}
-::deep .fluent-nav-group.disabled {
- color: var(--neutral-fill-secondary-rest) !important;
- pointer-events: none;
-}
-
- ::deep .fluent-nav-group.disabled .fluent-nav-icon {
- fill: var(--neutral-stroke-rest) !important;
- }
-
-
/* Group expand/collapse */
::deep .expand-collapse-button {
position: absolute;
diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.css b/src/Core/Components/NavMenu/FluentNavMenu.razor.css
index c14341da69..6d3124dcc1 100644
--- a/src/Core/Components/NavMenu/FluentNavMenu.razor.css
+++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.css
@@ -1,7 +1,6 @@
/* NavMenu */
.fluent-nav-menu {
padding: 0 2px;
-
}
::deep .fluent-nav-item.expander:focus-within {
@@ -15,24 +14,33 @@
}
/* Hover and active highlighting */
- ::deep .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
+ ::deep .fluent-nav-item:not(.disabled) .positioning-region:hover:not(:has(.disabled)) {
cursor: pointer;
background: var(--neutral-fill-secondary-rest);
}
- /* Active item indicator */
- ::deep .fluent-nav-item .active .positioning-region::before {
- content: "";
- display: block;
- position: absolute;
- right: unset;
- width: 3px;
- height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
- background: var(--accent-fill-rest);
- border-radius: calc(var(--control-corner-radius) * 1px);
- margin: calc(var(--design-unit) * 2px) 2px;
- z-index: 5;
- }
+ /* Active item indicator */
+ ::deep .fluent-nav-item .active .positioning-region::before {
+ content: "";
+ display: block;
+ position: absolute;
+ right: unset;
+ width: 3px;
+ height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
+ background: var(--accent-fill-rest);
+ border-radius: calc(var(--control-corner-radius) * 1px);
+ margin: calc(var(--design-unit) * 2px) 2px;
+ z-index: 5;
+ }
+
+::deep .fluent-nav-group.disabled {
+ color: var(--neutral-fill-secondary-rest) !important;
+ pointer-events: none;
+}
+
+ ::deep .fluent-nav-group.disabled .fluent-nav-icon {
+ fill: var(--neutral-stroke-rest) !important;
+ }
[dir='rtl'] * ::deep .fluent-nav-item a.active .positioning-region::before {
left: unset;