diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
index c618664d14..a5d3354741 100644
--- a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
+++ b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
@@ -2,18 +2,31 @@
 
 <FluentStack Orientation="Orientation.Horizontal" Width="100%">
     <div>
-        <FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true" Title="Collapsible demo">
+        <FluentNavMenu @bind-Expanded="@Expanded" Width="250" Collapsible="true" CollapsedChildNavigation="@EnableCollapsedChildNavigation" Title="Collapsible demo">
             <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())" Tooltip="Item 1 tooltip">Item 1</FluentNavLink>
-            <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())" Tooltip="Item 2 tooltip">Item 2</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())" Disabled="true" Tooltip="Item 2 tooltip">Item 2</FluentNavLink>
             <FluentNavGroup Title="Item 3" Tooltip="Item 3 tooltip" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
                 <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 3.1 tooltip">Item 3.1</FluentNavLink>
-                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Tooltip="Item 3.2 tooltip">Item 3.2</FluentNavLink>
-            </FluentNavGroup> 
-            <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com" Tooltip="Item 4 tooltip1">Item 4</FluentNavLink>
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Disabled="true" Tooltip="Item 3.2 tooltip">Item 3.2</FluentNavLink>
+                <FluentNavGroup Title="Item 3.3" Tooltip="Item 3.3 tooltip" Icon="@(new Icons.Regular.Size24.LeafThree())">
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Earth())" Href="https://microsoft.com" Tooltip="Item 3.3.1 tooltip">https://microsoft.com</FluentNavLink>
+                </FluentNavGroup>
+                <FluentNavGroup Title="Item 3.4" Tooltip="Item 3.4 tooltip" Icon="@(new Icons.Regular.Size24.TreeDeciduous())" Disabled="true">
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Earth())" Href="https://microsoft.com" Tooltip="Item 3.4.1 tooltip">https://microsoft.com</FluentNavLink>
+                </FluentNavGroup>
+            </FluentNavGroup>
+            <FluentNavLink Tooltip="Item 4 tooltip">Item 4</FluentNavLink>
+            <FluentNavGroup Title="Item 5" Tooltip="Item 5 tooltip">
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 5.1 tooltip">Item 5.1</FluentNavLink>
+            </FluentNavGroup>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com" Tooltip="Item 6 tooltip">Item 6</FluentNavLink>
         </FluentNavMenu>
     </div>
     <div style="width: 100%;">
-        
+        <div style="margin-bottom: 12px;">
+            <FluentSwitch @bind-Value="EnableCollapsedChildNavigation" CheckedMessage="Disable collapsed child navigation" UncheckedMessage="Enable collapsed child navigation"></FluentSwitch>
+        </div>
+        <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
             Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
             Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
@@ -23,11 +36,12 @@
             Sed maximus, urna in fringilla posuere, enim urna bibendum justo, vel molestie nibh orci nec lectus.
             Etiam a varius justo. Aenean nisl ante, interdum eget vulputate eget, iaculis ut massa.
             Suspendisse maximus sed purus id molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        
+        </div>
     </div>
 </FluentStack>
 
 @code
 {
     bool Expanded = true;
-}
\ No newline at end of file
+    bool EnableCollapsedChildNavigation = true;
+}
diff --git a/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor b/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor
index aacdd286d3..206a726339 100644
--- a/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor
+++ b/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor
@@ -52,7 +52,13 @@
 
 <DemoSection Component="typeof(NavMenuCollapsible)" Title="Collapsible navigation">
     <Description>
-        More complete example which shows how the menu works together with a text section when it collapses. 
+        <p>
+            More complete example which shows how the menu works together with a text section when it collapses.
+            When <code>CollapsedChildNavigation</code> is set to true, clicking on a <code>FluentNavGroup</code> opens a menu containing all links included in that group.
+        </p>
+        <p>
+            Note that menu items without an icon are not visible when the menu is collapsed.
+        </p>
     </Description>
 </DemoSection>
 
diff --git a/src/Core/Components/Menu/FluentMenu.razor b/src/Core/Components/Menu/FluentMenu.razor
index 4f7026af9f..f6bf390b1e 100644
--- a/src/Core/Components/Menu/FluentMenu.razor
+++ b/src/Core/Components/Menu/FluentMenu.razor
@@ -8,9 +8,9 @@
             <FluentOverlay @bind-Visible="@Open" OnClose="@CloseAsync" Transparent="true" FullScreen="true" />
             <FluentAnchoredRegion Anchor="@Anchor"
                                   HorizontalDefaultPosition="@HorizontalPosition"
-                                  VerticalDefaultPosition="@VerticalPosition.Bottom"
-                                  HorizontalInset="true"
-                                  VerticalInset="false"
+                                  VerticalDefaultPosition="@VerticalPosition"
+                                  HorizontalInset="@HorizontalInset"
+                                  VerticalInset="@VerticalInset"
                                   HorizontalViewportLock="true"
                                   HorizontalThreshold="@HorizontalThreshold"
                                   VerticalThreshold="@VerticalThreshold"
diff --git a/src/Core/Components/Menu/FluentMenu.razor.cs b/src/Core/Components/Menu/FluentMenu.razor.cs
index 6d69f19cf0..f570966de3 100644
--- a/src/Core/Components/Menu/FluentMenu.razor.cs
+++ b/src/Core/Components/Menu/FluentMenu.razor.cs
@@ -63,11 +63,30 @@ public partial class FluentMenu : FluentComponentBase, IDisposable
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
-    /// Gets or sets the menu position (left or right).
+    /// Gets or sets the horizontal menu position.
     /// </summary>
     [Parameter]
     public HorizontalPosition HorizontalPosition { get; set; } = HorizontalPosition.Unset;
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the region overlaps the anchor on the horizontal axis. 
+    /// Default is false which places the region adjacent to the anchor element.
+    /// </summary>
+    [Parameter]
+    public bool HorizontalInset { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the vertical menu position.
+    /// </summary>
+    [Parameter]
+    public VerticalPosition VerticalPosition { get; set; } = VerticalPosition.Bottom;
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the region overlaps the anchor on the vertical axis.
+    /// </summary>
+    [Parameter]
+    public bool VerticalInset { get; set; } = false;
+
     /// <summary>
     /// Gets or sets the width of this menu.
     /// </summary>
diff --git a/src/Core/Components/Menu/FluentMenuItem.razor.cs b/src/Core/Components/Menu/FluentMenuItem.razor.cs
index d205b1e8c6..e1d5defcbf 100644
--- a/src/Core/Components/Menu/FluentMenuItem.razor.cs
+++ b/src/Core/Components/Menu/FluentMenuItem.razor.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -56,7 +57,7 @@ public partial class FluentMenuItem : FluentComponentBase, IDisposable
     /// Event raised when the user click on this item.
     /// </summary>
     [Parameter]
-    public EventCallback OnClick { get; set; }
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
 
     public FluentMenuItem()
     {
@@ -69,7 +70,7 @@ protected override void OnInitialized()
     }
 
     /// <summary />
-    protected async Task OnClickHandlerAsync()
+    protected async Task OnClickHandlerAsync(MouseEventArgs ev)
     {
         if (Disabled)
         {
@@ -81,7 +82,7 @@ protected async Task OnClickHandlerAsync()
             await Owner.CloseAsync();
         }
 
-        await OnClick.InvokeAsync();
+        await OnClick.InvokeAsync(ev);
     }
 
     protected string? GetRole()
diff --git a/src/Core/Components/NavMenu/FluentNavBase.cs b/src/Core/Components/NavMenu/FluentNavBase.cs
index 9497dcd06b..b3eff5dab8 100644
--- a/src/Core/Components/NavMenu/FluentNavBase.cs
+++ b/src/Core/Components/NavMenu/FluentNavBase.cs
@@ -70,6 +70,9 @@ public abstract class FluentNavBase : FluentComponentBase
     [CascadingParameter]
     public FluentNavMenu Owner { get; set; } = default!;
 
+    [CascadingParameter]
+    public FluentMenu? SubMenu { get; set; }
+
     /// <summary>
     /// Returns <see langword="true"/> if the item has an <see cref="Icon"/> set.
     /// </summary>
@@ -106,7 +109,7 @@ protected async Task OnClickHandlerAsync(MouseEventArgs ev)
         }
         else
         {
-            if (!Owner.Expanded)
+            if (!Owner.Expanded && !Owner.CollapsedChildNavigation && SubMenu == null)
             {
                 await Owner.ExpandedChanged.InvokeAsync(true);
             }
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor b/src/Core/Components/NavMenu/FluentNavGroup.razor
index 2f2d7faaad..55487de6c8 100644
--- a/src/Core/Components/NavMenu/FluentNavGroup.razor
+++ b/src/Core/Components/NavMenu/FluentNavGroup.razor
@@ -3,7 +3,7 @@
 @using Microsoft.AspNetCore.Components.Rendering
 @using Microsoft.AspNetCore.Components.Routing
 
-@if (Owner.Expanded || HasIcon)
+@if (Owner.Expanded || (HasIcon && (!Owner.CollapsedChildNavigation || SubMenu == null)))
 {
     <FluentKeyCode Anchor="@Id" OnKeyDown="@HandleExpanderKeyDownAsync" />
     <div id="@Id" @ref="@Element" @attributes="AdditionalAttributes" class="@ClassValue" disabled="@Disabled" style="@StyleValue" role="menuitem">
@@ -26,7 +26,7 @@
         else
         {
             <div class="fluent-nav-link notactive" tabindex="0">
-                <div class="positioning-region" @onclick="ToggleExpandedAsync"  title="@(Tooltip ?? Title)">
+                <div class="positioning-region" @onclick="ToggleExpandedAsync" title="@(Tooltip ?? Title)">
                     <div class="content-region">
                         @_renderContent
                         @_renderButton
@@ -41,7 +41,41 @@
             </FluentNavMenu>
         </FluentCollapsibleRegion>
     </div>
+
+    if (Owner.CollapsedChildNavigation && SubMenu == null)
+    {
+        <FluentMenu @bind-Open="_open"
+                    Anchor="@Id"
+                    HorizontalPosition="@HorizontalPosition.End"
+                    HorizontalInset="@false"
+                    VerticalPosition="@VerticalPosition.Bottom"
+                    VerticalInset="@true">
+            @ChildContent
+        </FluentMenu>
+    }
 }
+else if (!Owner.Expanded && Owner.CollapsedChildNavigation && SubMenu != null)
+{
+    <div>
+        <FluentMenuItem Disabled="@Disabled" OnClick="OnClickHandlerAsync">
+            <ChildContent>
+                @Title
+                @TitleTemplate
+
+                @if (Icon is not null)
+                {
+                    <span slot="start">
+                        <FluentIcon Value="@Icon" Width="20px" Color="@IconColor" Class="fluent-nav-icon" />
+                    </span>
+                }
+            </ChildContent>
+            <MenuItems>
+                @ChildContent
+            </MenuItems>
+        </FluentMenuItem>
+    </div>
+}
+
 
 @code {
     private string _data = "no-pagescript";
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
index 0b4ca0baaa..8290da8717 100644
--- a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
+++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
@@ -11,6 +11,7 @@ public partial class FluentNavGroup : FluentNavBase
 {
     private readonly RenderFragment _renderContent;
     private readonly RenderFragment _renderButton;
+    private bool _open;
 
     protected string? ClassValue =>
         new CssBuilder("fluent-nav-group")
@@ -128,7 +129,14 @@ private async Task SetExpandedAsync(bool value)
 
         if (!Owner.Expanded)
         {
-            await Owner.ExpandedChanged.InvokeAsync(true);
+            if (Owner.CollapsedChildNavigation)
+            {
+                _open = !_open;
+            }
+            else
+            {
+                await Owner.ExpandedChanged.InvokeAsync(true);
+            }
         }
         else
         {
diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor b/src/Core/Components/NavMenu/FluentNavLink.razor
index aafc3fcdcd..94e3f8146e 100644
--- a/src/Core/Components/NavMenu/FluentNavLink.razor
+++ b/src/Core/Components/NavMenu/FluentNavLink.razor
@@ -2,33 +2,58 @@
 @inherits FluentNavBase
 @using Microsoft.AspNetCore.Components.Rendering
 @using Microsoft.AspNetCore.Components.Routing
+@inject NavigationManager NavigationManager
 
-<div id="@Id" @attributes="AdditionalAttributes" class="@ClassValue" disabled="@Disabled" style="@Style" role="menuitem">
-    @if (!OnClick.HasDelegate && !string.IsNullOrEmpty(Href))
-    {
-        <NavLink class="@LinkClassValue"
-                 @attributes="@Attributes"
-                 Match="@Match"
-                 ActiveClass="@ActiveClass"
-                 title="@Tooltip">
-            <div class="positioning-region">
-                <div class="content-region">
-                    @_renderContent
+@if (Owner == null || Owner.Expanded || (HasIcon && (!Owner.CollapsedChildNavigation || SubMenu == null)))
+{
+    <div id="@Id" @attributes="AdditionalAttributes" class="@ClassValue" disabled="@Disabled" style="@Style" role="menuitem">
+        @if (!OnClick.HasDelegate && !string.IsNullOrEmpty(Href))
+        {
+            <NavLink class="@LinkClassValue"
+                     @attributes="@Attributes"
+                     Match="@Match"
+                     ActiveClass="@ActiveClass"
+                     title="@Tooltip">
+                <div class="positioning-region">
+                    <div class="content-region">
+                        @_renderContent
+                    </div>
                 </div>
-            </div>
-        </NavLink>
-    }
-    else
-    {
-        <div class="positioning-region" title="@Tooltip">
-            <div class="content-region">
-                <div class="@LinkClassValue" @onclick="OnClickHandlerAsync">
-                    @_renderContent
+            </NavLink>
+        }
+        else
+        {
+            <div class="positioning-region" title="@Tooltip">
+                <div class="content-region">
+                    <div class="@LinkClassValue" @onclick="OnClickHandlerAsync">
+                        @_renderContent
+                    </div>
                 </div>
             </div>
-        </div>
-    }
-</div>
+        }
+    </div>
+}
+else if (!Owner.Expanded && Owner.CollapsedChildNavigation && SubMenu != null)
+{
+    <div>
+        <FluentMenuItem Disabled="@Disabled" OnClick="OnClickHandlerAsync">
+            <NavLink class="@LinkClassValue"
+                     @attributes="@Attributes"
+                     Match="@Match"
+                     ActiveClass="@ActiveClass"
+                     title="@Tooltip">
+                @ChildContent
+            </NavLink>
+
+            @if (Icon is not null)
+            {
+                <span slot="start">
+                    <FluentIcon Value="@Icon" Color="@IconColor" Class="fluent-nav-icon" />
+                </span>
+            }
+        </FluentMenuItem>
+    </div>
+}
 
 @code {
     private void RenderContent(RenderTreeBuilder __builder)
@@ -44,7 +69,5 @@
         <div class="fluent-nav-text">
             @ChildContent
         </div>
-
-
     }
 }
diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor.css b/src/Core/Components/NavMenu/FluentNavLink.razor.css
index 974a0f5eb5..1a5624124b 100644
--- a/src/Core/Components/NavMenu/FluentNavLink.razor.css
+++ b/src/Core/Components/NavMenu/FluentNavLink.razor.css
@@ -6,18 +6,17 @@
     display: flex;
 }
 
-::deep .fluent-nav-icon {
-    
+::deep :not(fluent-menu-item) .fluent-nav-icon {
     min-width: 20px;
 }
 
-::deep .fluent-nav-link.disabled {
+::deep :not(fluent-menu-item) .fluent-nav-link.disabled {
     color: var(--neutral-fill-secondary-rest) !important;
-    cursor: not-allowed ;
+    cursor: not-allowed;
     pointer-events: none;
 }
 
 
-::deep .fluent-nav-link.disabled .fluent-nav-icon {
-    fill: var(--neutral-stroke-rest) !important;
-}
+    ::deep :not(fluent-menu-item) .fluent-nav-link.disabled .fluent-nav-icon {
+        fill: var(--neutral-stroke-rest) !important;
+    }
diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
index 2c83f4575e..187e7e497b 100644
--- a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
+++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
@@ -46,6 +46,12 @@ public partial class FluentNavMenu : FluentComponentBase
     [Parameter]
     public bool Collapsible { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether a menu with all child links is shown for <see cref="FluentNavGroup"/>s when the navigation menu is collapsed.
+    /// </summary>
+    [Parameter]
+    public bool CollapsedChildNavigation { get; set; } = false;
+
     /// <inheritdoc/>
     [Parameter]
     public bool Expanded { get; set; } = true;