Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTabs.TabsPosition Property

Specifies where tab headers appear relative to content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(TabsPosition.Top)]
[Parameter]
public TabsPosition TabsPosition { get; set; }

#Property Value

Type Default Description
TabsPosition Top

An enumeration value.

Available values:

Name Description Illustration
Top

Tab headers are above content.

Top tab header position

Bottom

Tab headers are below content.

Bottom tab header position

Left

Tab headers are to the left of content.

Left tab header position

Right

Tab headers are to the right of content.

Right tab header position

#Remarks

This example positions tab headers below the component:

Razor
<DxTabs TabsPosition="TabsPosition.Bottom">
    <DxTabPage Text="Home">
        <div class="p-2">
            The Home tab's content
        </div>
    </DxTabPage>
    <DxTabPage Text="Products">
        <div class="p-2">
            The Products tab's content
        </div>
    </DxTabPage>
    <DxTabPage Text="Support">
        <div class="p-2">
            The Support tab's content
        </div>
    </DxTabPage>
</DxTabs>

Bottom tab header position

Run Demo: Tab Position

See Also