DxTabs.TabsPosition Property

Specifies where tab headers appear relative to content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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.
Bottom	Tab headers are below content.
Left	Tab headers are to the left of content.
Right	Tab headers are to the right of content.

Remarks

This example positions tab headers below the component:

<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>

Run Demo: Tab Position