TabBar vs Shell Tab in .NET MAUI

TabBar vs Shell Tab

Understanding how tabs work in Xamarin.Forms / .NET MAUI Shell

What is TabBar?

TabBar is a container that holds multiple tabs. It is part of the Shell navigation hierarchy and defines the primary sections of your app.

• Acts as a group container for tabs.
• Placed inside <Shell>.
• Each entry is typically a Tab or ShellContent.
• Ideal for top-level navigation between app sections.

Example:

<Shell>
    <TabBar>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="Settings" ContentTemplate="{DataTemplate local:SettingsPage}" />
    </TabBar>
</Shell>
    

What is a Shell Tab?

A Shell Tab (<Tab>) represents one section inside the TabBar. A tab can host one or more ShellContent pages and supports hierarchical navigation within that tab.

• Each tab is a distinct feature area (e.g., Home, Profile).
• Can contain multiple pages via ShellContent.
• Supports nested navigation stacks per tab.

Example:

<TabBar>
    <Tab Title="Home">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent ContentTemplate="{DataTemplate local:DetailsPage}" />
    </Tab>
    <Tab Title="Profile">
        <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
    </Tab>
</TabBar>
    

Hierarchy Overview

Shell
└── TabBar
    ├── Tab "Home"
    │   ├── ShellContent → HomePage
    │   └── ShellContent → DetailsPage
    └── Tab "Profile"
        └── ShellContent → ProfilePage
    

Key Differences

• TabBar = Container for tabs; defines the overall tabbed navigation area.
• Tab = Individual section inside TabBar; can have multiple pages.
• ShellContent = Actual pages shown when a tab is selected.

Enhanced Example (with icons & routes)

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp">

    <TabBar>
        <Tab Title="Home" Icon="home.png">
            <ShellContent Route="home" Title="Home"
                          ContentTemplate="{DataTemplate local:HomePage}" />
            <ShellContent Route="details" Title="Details"
                          ContentTemplate="{DataTemplate local:DetailsPage}" />
        </Tab>

        <Tab Title="Profile" Icon="user.png">
            <ShellContent Route="profile" Title="Profile"
                          ContentTemplate="{DataTemplate local:ProfilePage}" />
        </Tab>
    </TabBar>

</Shell>
    

Design Tips

• Use TabBar for top-level app areas (e.g., Dashboard, Search, Profile).
• Group related pages into a single Tab to keep navigation focused.
• Keep tab labels concise; prefer clear icons with text.
• Each tab maintains its own navigation stack—avoid cross-tab push unless using routes intentionally.
• For more complex structures, you can nest Flyout items with TabBar inside Shell.