Is there an easy way to move the tab items to the bottom?

[sjs]

I am using SfTabs control for Blazor in a .NET MAUI Blazor Hybrid mobile app.  I wanted to create a tab style navigation bar at the bottom of the page.  However in the online demo it shows that it is possible to move the tabs to the bottom using 'HeaderPlacement' property.  However this property is not available to the Blazor web control. 

What is the way to accomplish the same thing in my case?

[Vijay Ravi]

Hi sjs, 
 

In .NET MAUI Blazor, the SfTabView component provides the TabBarPlacement property to change the position of the tab header to the bottom. You can use this property to modify the tab header position. In SfTabView for .NET MAUI Blazor, the TabBarPlacement property serves as a replacement for the HeaderPlacement property. Refer the below shared documentation to achieve your requirement.

TabBarPlacement UG in .Net MAUI: https://help.syncfusion.com/maui/tabview/tab-bar-customization#bottom

 

Don't hesitate to get in touch if you require further help or more information.

 

Regards,

Vijay

[sjs]

I'm not using Syncfusion.Maui.TabView.  I am using Syncfusion.Blazor.Navigations SFTab.  In the Blazor component there is no property called "TabBarPlacement" available to change the tab bar placement as indicated in the demo.  

[Swathi Ravi]

Dear Customer,

Thank you for reaching out, and I apologize for any confusion regarding the placement of the tab header in the Syncfusion.Blazor.Navigations SFTab component.

To position the tab header at the bottom, you can set the HeaderPlacement property to Bottom. This will allow you to achieve the desired layout. For more details, please refer to our documentation on tab orientation here, and you can also view a live demo here.

Sample: https://blazorplayground.syncfusion.com/VXLfXusRetxLmBuv

If you have any further questions or need additional assistance, please feel free to ask. We are here to help!

Regards,

Swathi