How-to-place-the-tab-header-vertically-in-.NET-MAUI-Tab-View-

This article explains how to place the tab header vertically in .NET MAUI Tab View.

You can achieve this by using the TabBarPlacement property of the SfTabView control. By setting this property to Left or Right, the tab bar is positioned vertically along the corresponding side of the view, allowing the tab headers to be displayed in a vertical layout and providing more space for content.

MainPage.Xaml

<tabView:SfTabView TabBarPlacement="Left" 
                   TabBarSize="70" 
                   TabHeaderPadding="0" 
                   TabWidthMode="SizeToContent">
       <tabView:SfTabView.Items>
           <tabView:SfTabItem Header="Call" x:Name="callItem"
                      ImagePosition="Top">
               <tabView:SfTabItem.ImageSource>
                   <FontImageSource Glyph="ﺶ" x:Name="call"
                              Color="{Binding Source={x:Reference callItem},Path=TextColor}"
                          FontFamily="MaterialDesignIcons"/>
               </tabView:SfTabItem.ImageSource>
               <Grid Padding="16">
                   <Label Text="Make and manage calls. View recent calls, dial new numbers, and quickly start a call from your contacts."
         FontSize="16" TextColor="#222" LineBreakMode="WordWrap"/>
               </Grid>
           </tabView:SfTabItem>
           <tabView:SfTabItem Header="Favourite" x:Name="favItem"
                      ImagePosition="Top">
               <tabView:SfTabItem.ImageSource>
                   <FontImageSource Glyph="" x:Name="fav"
                          Color="{Binding Source={x:Reference favItem},Path=TextColor}"
                          FontFamily="MaterialDesignIcons"/>
               </tabView:SfTabItem.ImageSource>
               <Grid Padding="16">
                   <Label Text="Your favorite contacts and shortcuts. Pin people you reach often for one‑tap calling or messaging."
         FontSize="16" TextColor="#222" LineBreakMode="WordWrap"/>
               </Grid>
           </tabView:SfTabItem>

           <tabView:SfTabItem Header="Contacts" x:Name="contactsItem"
                      ImagePosition="Top">
               <tabView:SfTabItem.ImageSource>
                   <FontImageSource Glyph="" x:Name="contacts"
                          Color="{Binding Source={x:Reference contactsItem},Path=TextColor}"
                          FontFamily="MaterialDesignIcons"/>
               </tabView:SfTabItem.ImageSource>
               <Grid Padding="16">
                   <Label Text="Browse and manage your contacts. Search, view details, and quickly add or edit entries in your address book."
         FontSize="16" TextColor="#222" LineBreakMode="WordWrap"/>
               </Grid>
           </tabView:SfTabItem>
       </tabView:SfTabView.Items>
   </tabView:SfTabView>