A tab is a selectable item that represents content or a page. Tabs group related destinations in a compact bar: choosing one makes its associated content the main display. A tab commonly combines an icon and label so people can recognize the destination before selecting it. section 7.4.5
Use tabs when an app has several peer destinations that people switch between regularly. In .NET MAUI, tabbed navigation is one of the main navigation paradigms, alongside hierarchical and flyout navigation. It suits multipage apps better than a single-page layout when the app needs clear, direct access to separate areas. section 7.4 section 7.6
A tab bar can be built in two different ways:
- Create a custom visual tab bar with layout controls. For example, place a Grid in the bottom row of a page, give it one column per tab, and put a centered VerticalStackLayout in each column. Each stack can contain Labels for an icon and its text. Copy the first tab’s structure for later tabs, changing the column, glyph, label, and colors. section 6.4.6
- Use navigation tabs. TabbedPage accepts multiple Page children and displays them as platform-native tabs, taking each tab’s icon and text from the page’s Icon and Title properties. section 7.4.5
- Use Shell when tabs are part of the app’s overall navigation structure. A TabBar contains Tab elements, and each Tab can contain ShellContent that points to a page. section 7.5.3
Build a two-tab Shell navigation bar
Start with a Shell containing a TabBar. Add one Tab titled Input with an input icon and a ShellContent whose ContentTemplate creates InputPage. Add a second Tab titled Reports with a report icon and a ShellContent for ReportPage. Run the app and select each tab to verify that both pages are created and reachable. section 7.5.3
Choose the navigation mechanism to fit the app. Shell is a strong fit for flyout navigation, tabbed navigation, or both because it maps the navigation hierarchy in one XAML file, resolves constructor dependencies, and supports routes and deep links. It is unnecessary for single-page or hierarchical-navigation apps, and it cannot fully customize the tab bar. Use a custom Grid-based bar when the required visual design is not supported by Shell. section 7.5 section 7.5.3
Shell tabs can form a hierarchy. Top-level tabs always appear at the bottom of the screen, regardless of platform. A page inside a tab can contain another level of tabs, shown at the top. This lets a larger app divide content into sections while retaining direct navigation to each section. section 7.5.2
Figure 7.15 Flyout Item 2 navigates to a Shell Section that has two tabs, accessible via a Balloons icon and a Cake icon, both displayed at the bottom of the screen. Within the Cake tab are three additional tabs, providing access to content at the next tier down. These tabs are Birthday, Wedding, and Christmas, accessible at the top of the screen.
Inspect the two-tier Shell arrangement: section tabs appear at the bottom, while tabs inside the selected section appear at the top. section 7.5.2
