.NET MAUI › Shell Navigation

How do you configure tabs and flyout items in Shell?

Intermediate

Answer

Use TabBar with Tab/ShellContent for bottom tabs, and FlyoutItem for flyout entries. Nesting Tabs inside a FlyoutItem creates top tabs. FlyoutBehavior controls whether the flyout is shown, disabled, or locked. Icons and titles are set per item.

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

Real-world example A social app shows Feed and Profile as bottom tabs while settings live in a flyout, all declared in AppShell.

Common follow-ups: How do you make top tabs? | What is FlyoutBehavior?

Tabs Flyout Navigation