We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tab header scrolling

I am currently facing with the SfTab control in my Blazor application. Specifically, I am trying to find a way to keep the headers of the tab fixed while the user scrolls through the content.

Currently, when a user scrolls through the tab content, the headers scroll along with the content, making it difficult for the user to know which tab they are currently viewing. I would like to find a way to keep the headers fixed at the top of the screen, similar to how the headers of a traditional web page would remain fixed as the user scrolls.

3 Replies 1 reply marked as answer

RV Ravikumar Venkatesan Syncfusion Team January 13, 2023 04:48 PM UTC

Hi Kunal,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion_blazor_tab_fixed_header-129749331

You can keep the Tab header fixed at the top of the screen with the help of the CSS style shown below.


<SfTab CssClass="sticky-header">




    .sticky-header.e-tab .e-tab-header {

background: white;

position: sticky;

top: 0;

z-index: 1000;




Ravikumar Venkatesan

Marked as answer

KU Kunal January 14, 2023 10:53 AM UTC

It worked, Thank you

MG Mugilraj Govindarajan Syncfusion Team January 16, 2023 08:44 AM UTC

Hi Kunal,


We are happy that our solution helped you. Let us know if you need any further assistance on this.

Mugilraj G

Live Chat Icon For mobile
Up arrow icon