Skip to main content
All docs
V25.1
  • DxTabs.TabsPosition Property

    Specifies where tab headers appear relative to content.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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