ant-design-blazor/components/menu/SubMenu.razor

@namespace AntDesign
@inherits AntDomComponentBase
@using AntDesign.Internal

@{
    string prefixCls = $"{RootMenu.PrefixCls}-submenu";
}

@if (RootMenu.InternalMode == MenuMode.Inline)
{
    <li class="@ClassMapper.Class" role="menuitem" @key="Key" style="position:relative;@Style" @ref="Ref">
        <div class="@(prefixCls)-title" style="padding-left: @(PaddingLeft)px; " role="button" @onclick="HandleOnTitleClick" aria-haspopup="true">
            @if (TitleTemplate != null)
            {
                @TitleTemplate
            }
            else if (Title != null)
            {
                <span>@Title</span>
            }
            <i class="@(prefixCls)-arrow"></i>
        </div>
        <ul direction="ltr" class="@SubMenuMapper.Class" role="menu" aria-expanded="@IsOpen">
            <CascadingValue Value="this" IsFixed="@true">
                @ChildContent
            </CascadingValue>
        </ul>
    </li>
}
else
{
    if (Placement == null)
    {
        Placement = (RootMenu.Mode == MenuMode.Horizontal && Parent == null) ? PlacementType.BottomLeft : PlacementType.RightTop;
    }

    <CascadingValue Value="this" Name="SubMenu" IsFixed="@true">
        <SubMenuTrigger @ref="_overlayTrigger"
                        TriggerClass="@ClassMapper.Class"
                        Visible="IsOpen"
                        ComplexAutoCloseAndVisible="true"
						BoundaryAdjustMode="@TriggerBoundaryAdjustMode.None"
                        Disabled="Disabled"
                        Placement="Placement"
                        OnVisibleChange="OnOverlayVisibleChange"
                        OnOverlayHiding="OnOverlayHiding"
                        Trigger="new[] { RootMenu?.TriggerSubMenuAction }"
                        PlacementCls="@($"{prefixCls}-placement-{Placement.Name} {prefixCls}-popup")"
                        OverlayEnterCls="@($"{prefixCls}-{RootMenu.Theme} ")"
                        OverlayLeaveCls="@($"{prefixCls}-{RootMenu.Theme} ")"
                        OverlayHiddenCls="@($"{RootMenu.PrefixCls}-hidden")">
            <ChildContent>
                <div class="@(prefixCls)-title" role="button">
                    @if (TitleTemplate != null)
                    {
                        @TitleTemplate
                    }
                    else if (Title != null)
                    {
                        <span>@Title</span>
                    }
                    @GetArrow()
                </div>
            </ChildContent>
            <Overlay>
                <ul direction="ltr" class="@(SubMenuMapper.Class)" style="@_popupMinWidthStyle" role="menu">
                    <CascadingValue Value="this" IsFixed="@true">
                        @ChildContent
                    </CascadingValue>
                </ul>
            </Overlay>
        </SubMenuTrigger>
    </CascadingValue>
}

<style>

    .ant-menu.ant-menu-sub.ant-menu-vertical.ant-menu-submenu-popup {
        top: 0;
        left: 100%;
    }

    .ant-menu-submenu.ant-menu-submenu-horizontal > .ant-menu.ant-menu-sub.ant-menu-vertical.ant-menu-submenu-popup {
        top: 50px;
        left: initial;
        min-width: 100%
    }
</style>

@code
{
    private RenderFragment GetArrow()
    {
        string prefixCls = $"{RootMenu.PrefixCls}-submenu";
        if (RootMenu.PrefixCls.Contains("dropdown"))
        {
            return@<span class="@(prefixCls)-arrow">
        <span role="img" aria-label="right" class="anticon anticon-right @(prefixCls)-arrow-icon">
            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
            </svg>
        </span>
    </span>;
 }

 return @<i class="@(prefixCls)-arrow"></i>;
}
}