1. Home
  2. Forum
  3. Blazor
  4. SfMenu forces scroll up

SfMenu forces scroll up

Dear Support-Team, 

I use the the  Blazor Menu Bar Component in my fixed navbar.
The following issue occurs: When the page is scrolled down and I click a menu item, the page is scrolled up. ​
I expect the scroll to stay at the same position and the dropdown to rather be an overlay.

How to reproduce in a minimal example:

  1. Create a new project (.NET6)
  2. Install Syncfusion.Blazor.Theme,  Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Core from the nuget package manager
  3. Follow the Syncfusion documentation and prepare the component for usage
  4. Insert the following code:
NavMenu.razor
<nav class="navbar fixed-top navbar-expand-xl navbar-custom navbar-dark py-0 px-1">
    <div class="container-fluid px-0">
        <SfMenu ShowItemOnClick="true" CssClass="ms-auto" TValue="MenuItem" >
            <MenuItems>
                <MenuItem Text="DropdownMenu">
                    <MenuItems>
                        <MenuItem Text="Navlink One"></MenuItem>
                        <MenuItem Separator="true"></MenuItem>
                        <MenuItem Text="Navlink Two"></MenuItem>
                    </MenuItems>
                </MenuItem>
            </MenuItems>
        </SfMenu>
    </div>
</nav>>

MainLayout.razor

@inherits LayoutComponentBase

<PageTitle>SfMenuBugShowCase</PageTitle>

<div class="page">
    <div>
        <NavMenu />
    </div>

    <main>
        <article style="height: 2000px;" class="content px-4">
            @Body
        </article>
    </main>
</div>

Then scroll down a bit and click the menu item on the top right corner. This will trigger the page to scroll up.

How do I change the behaviour so that the dropdown is openend as an overlay and does not scroll the page?

Best regards, 

Henning Krause


11 Replies
GK Gayathri KarunaiAnandam Syncfusion Team December 10, 2021 03:05 AM UTC

Hi Henning, 

We have checked your reported query and code snippet. We are able to replicate the reported issue in our end. We need to validate more on this. So, we will update further update details within December 13th,2021 and we appreciate your patience until then. 

Regards, 
Gayathri K 


HK Henning Krause December 14, 2021 07:36 AM UTC

Hey  Gayathri, 

any updates yet? 

Best regards, 

Henning 


GK Gayathri KarunaiAnandam Syncfusion Team December 20, 2021 03:39 AM UTC

Hi Henning, 

Sorry for the inconvenience. 

We need to validate more on this issue. So, we will update further details within December 21st, 2021 and we appreciate your patience until then. 

Regards, 
Gayathri K 


HK Henning Krause December 23, 2021 07:12 AM UTC

Hey  Gayathri, 

any updates yet? 

Best regards, 

Henning 



GK Gayathri KarunaiAnandam Syncfusion Team December 27, 2021 04:45 PM UTC

Hi Henning, 

We have validated the issue. We can resolve the reported issue in sample side by applying position as like menu wrapper. Please check the below code snippet. 

Code Snippet: 

<style> 
        .e-menu-container.e-menu-popup.ms-auto{ 
            position:fixed; 
        } 
</style> 

For your convenience, please  check the below sample link. 


Please check and get back to us, if you need further assistance. 

Regards, 
Gayathri K 


CR Celso Rodriguez-Rosa January 14, 2022 08:52 PM UTC

Hello,


I have the same issue, and the position:fixed code didn't work.

Do you know a work around or an out of the box solution for this?


Thanks


GK Gayathri KarunaiAnandam Syncfusion Team January 18, 2022 01:10 PM UTC

Hi Celso, 

As posted in previous update, we can resolve the Menu forced scrolling issue by using the position:fixed Css style. We have prepared a video demonstration by using the previously provided sample. 


If you are still facing the issue, kindly share the below details. 

  • Menu component related code snippet.
  • Screenshot/video demonstration of the issue.
  • Syncfusion version you are using.
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.

Please share the above requested information, based on that we will check and update quickly. 

Regards, 
Gayathri K 


CR Celso Rodriguez-Rosa replied to Gayathri KarunaiAnandam January 18, 2022 07:44 PM UTC

Hello,


Thanks for your reply. The position:fixed breaks my full navigation and the dropdown list doesn't show up fully. I have a long list for a dropdown and I would like to scroll without the top navigation scrolling up.

The version I use is 19.4.0.38 and I use SfMenu and MenuTemplates. At the moment it is not possible to share a video of the error. I hope for a solution.

 Thank you.




GK Gayathri KarunaiAnandam Syncfusion Team February 3, 2022 05:21 AM UTC

Hi Celso, 
 
When we have menu popup in scrollable area, focus issue will be occurred. We can resolve this issue by changing scrollable area and by setting EnableScrolling as true to view the long menu. Please check the code snippet. 

<SfMenu ShowItemOnClick="true" EnableScrolling="true" CssClass="ms-auto" TValue="MenuItem"> 
            <MenuEvents TValue="MenuItem" OnOpen="@beforeOpenHandler"></MenuEvents> 
           </MenuItems> 
                </MenuItem> 
            </MenuItems> 
        </SfMenu> 
 
@code 
{ 
    private void beforeOpenHandler(BeforeOpenCloseMenuEventArgs<MenuItem> e) 
    { 
        if (e.ParentItem.Text == "DropdownMenu") 
            e.ScrollHeight = 320; 
    } 
} 
 
<style> 
    body { 
        position: relative; 
        overflow: hidden; 
    } 
    .page { 
        height: 100vh; 
    } 
 
    .page-header nav{ 
        height: 40px; 
        background-color: gray; 
    } 
 
    .page-content { 
        overflow-y: auto; 
        margin-top: 40px; 
        width: 100%; 
    } 
 
    .e-contextmenu-container.ms-auto { 
        z-index: 10001 !important; 
    } 
</style> 

For your convenience,please check the below sample link. 
 
 
Please check and get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


KN Knox Ngo June 9, 2025 02:57 PM UTC

```
:deep  .e-menu-container.e-menu-popup.ms-auto{ 
            position:fixed; 
        } 
```

I want to use style isolation in the razor.css file, is there any way to do that?

I tried deep but it was not successful.


SJ Saravanan Jayavel Syncfusion Team June 10, 2025 01:57 PM UTC

Hi Knox Ngo,


Based on the details you’ve shared, it seems that you are trying to apply custom styles to the menu items in the Menu Bar component. As a suggestion, we recommend referring to our documentation, which provides styling options and examples for customizing menu items:


Menu Bar Style and Appearance


We’ve also attached a sample for your reference that shows how to apply styles to menu items using standard CSS.


Sample: Attached as a zip file.


If our understanding doesn’t match your exact use case, please feel free to correct us. To assist you better, could you kindly share more details, such as:

  • Which specific item you are trying to style
  • Any screenshot or code snippet, if available
     

This will help us provide a more accurate solution tailored to your requirement.
 

Regards,

Saravanan J


Attachment: BlazorMenuBarSample_190bf890.zip

Loader.
Up arrow icon