Skip to main content

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.

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:

<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