New to Telerik UI for Blazor? Download free 30-day trial

TabStrip Scrollable Tabs

If the TabStrip dimensions exceed the width or height of the page, a browser-level scrollbar will appear.

To scroll the tabs only, set the Scrollable bool parameter of the TabStrip to true (defaults to false). You should also set the Width (for tabs with Position set to top and bottom) and Height (for tabs with Position set to left and right) to achieve the desired behavior.

Scroll the tabs only

<TelerikTabStrip Scrollable="true"
                 Width="300px"
                 TabPosition="Telerik.Blazor.TabPosition.Top">
        @{
        for (int i = 0; i < 10; i++)
        {
            <TabStripTab Title="@i.ToString()" @key="@i">
                Tab content.
            </TabStripTab>
        }
    }
</TelerikTabStrip>
<TelerikTabStrip Scrollable="true"
                 Width="300px"
                 TabPosition="Telerik.Blazor.TabPosition.Top">
    @{
        for (int i = 0; i < 10; i++)
        {
            <TabStripTab Title="@i.ToString()" @key="@i">
                Tab content.
            </TabStripTab>
        }
    }
</TelerikTabStrip>

See Also

In this article