New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Sticky Tab in the TabStrip


Product Grid for Progress® Telerik® UI for ASP.NET MVC


How can I make the first tab of the TabStrip sticky? It must remain always visible when I scroll the tabs.


Use the HtmlAttributes configuration option, to set a custom class (always-visible in the example below) to the first tab. Then use the class as a selector in a CSS rule that customizes the default positioning of the tab.

<div class="container" style="width: 400px">
        .Items(items =>
            items.Add().Text("Sticky tab").HtmlAttributes(new { @class = "always-visible" })
                        <p>Tab 1 content...</p>

            items.Add().Text("Tab 2")
                        <p>Tab 2 content...</p>

            items.Add().Text("Tab 3")
                        <p>Tab 3 content...</p>

            items.Add().Text("Tab 4")
                        <p>Tab 4 content...</p>

            items.Add().Text("Tab 5")
                        <p>Tab 5 content...</p>


    .always-visible {
        position: sticky !important;
        left: 0 !important;
        background-color: white;
        z-index: 22000;

More ASP.NET MVC TabStrip Resources

See Also

In this article