Skip to main content

DxTabs.ScrollMode Property

Specifies how users navigate between tabs when they do not fit the container’s width.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor


public TabsScrollMode ScrollMode { get; set; }

Property Value

Type Default Description
TabsScrollMode Auto

A TabsScrollMode enumeration value.

Available values:

Name Description Illustration

This scroll mode automatically adapts to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.

See the illustrations below.


The container displays tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons; hover the cursor over a tab with the Shift key pressed and scroll the mouse wheel; or swipe (mobile devices only).

Tabs - NavButtons Scroll Mode


The container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.

Tabs - Swipe Scroll Mode


Users cannot scroll tabs. The tabs that do not fit the container’s width are moved to a new line.

Tabs - NoScroll Scroll Mode


The example below demonstrates how to switch to NavButtons navigation mode.

<DxTabs ScrollMode="TabsScrollMode.NavButtons">
    @foreach (var employee in Employees) {
        <DxTabPage Text="@(employee.FirstName + ' ' +  employee.LastName)">
                <h5>@employee.Title @employee.FirstName @employee.LastName</h5>
                <p><b>Birthday:</b> @employee.BirthDate.ToShortDateString()</p>

@code {
    IEnumerable<Employee> Employees;

    protected override async Task OnInitializedAsync() {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);

Run Demo: Tabs - Scroll Mode Watch Video: Get Started with Tabs

See Also