Bottom Navigation and Tabs Page¶
Bottom Navigation Page¶
A Bottom Navigation Page is a term for a Page that contains a BottomNavigation.
Bottom Navigation control renders a list of tab items along with content for each tab.
The control will always render as a full screen control taking over the entire space of the page.
Bottom Navigation is mainly used for top level navigation, treated as navigation menu, where the separate tabs don't have shared context. When the tab item is tapped, user is taken to the top level navigation destination associated with the tab item. Bottom Navigation should be used when the top level destinations need to be accessible from anywhere in the app.
Bottom Navigation can have up to 5 tab items.
The tab pages of the Bottom Navigation would preserve its last state once the tab page is loaded, so that when user switch to another tab item and switch back to the previous tab item, they return to the last screen viewed.
Bottom Navigation only supports navigation on tab page level. Any navigation triggered from the tab page content would result in navigation on the tab page level. If user needs to display a new page and hide the Bottom Navigation tab bar, it is recommended to use a full modal page display.
It is not recommended to have both Bottom Navigation and Toolbar on the same parent page. Bottom Navigation has nested Tabs support. It is not recommended to display Bottom Navigation as nested control of Bottom Navigation.
Bottom Navigation is not supported in modal page, you should not open a Bottom Navigation Page as a modal as it will not render as expected.
Note
Bottom Navigation is only supported in iOS and Android mobile app. It is currently not supported in web version.
Tabs Page¶
A Tabs Page is a term for a Page that contains a Tabs.
Tabs control renders a list of tab items along with content for each tab.
It will always render as a full screen control taking over the entire space of the page.
Tabs is mainly used for organizing or allow navigation between group of content that are related and at the same level of hierarchy. Each tab page should contain content that is distinct from other tab pages in a set. Tabs is used to create sort of pager to browse between items that have the same context.
Tabs can support unlimited tab items. Tabs supports positioning of the tab bar (Top/Bottom), and Swipe gesture to switch between tab pages.
The tab pages of the Tabs would preserve its last state once the tab page is loaded, so that when user switch to another tab item and switch back to the previous tab item, they return to the last screen viewed.
Tabs does not support navigation on tab page level, any navigation action triggered from the tab page content would result in navigation on the parent page level.
It is not recommended to have both Tabs and Toolbar on the same parent page. Tabs has nested Tabs support. It is not recommended to display Bottom Navigation as nested control of Tabs.
Tabs is supported in modal page.
Difference Between Bottom Navigation and Tabs¶
Use the Bottom Navigation control for high level navigation where the separate tabs don’t have shared context. Use the Tabs control when you want to create a pager to browse between items that have the same context.
Listed below are the difference in behavior:
| Tabs | Bottom Navigation | |
|---|---|---|
| Semantic | Mid level navigation | High level navigation |
| Usage | Unlimited tabs with common function | 3 to 5 Tabs with different function |
| Transitions | Slide transition (No transition in Web application) | No transition |
| Gestures | Swipe gesture (No gesture in Web application) | No gesture |
| Position | Top/Bottom | Bottom |
| Context | Share parent page's context | Each tab page has their own context |
Nesting Tabs Page¶
You can include Tabs page in another Tabs page or Bottom Navigation page, creating nested tabs pages.
Supported combinations:
- Tabs page inside Bottom Navigation's tabs.
- Tabs page inside another Tabs page's tabs (Nested Tabs). It is not recommended for an app to nest Tabs page within another Tabs page. By doing so, reduces the usable space in the app and causes confusion to user.
Combinations that are not supported:
- Bottom Navigation page inside another Bottom Navigation tabs
- Bottom Navigation page inside Tabs page's tabs
Controls Above Tab Bar¶
Mobile Development Kit pages containing tabs have been enhanced to accommodate additional controls such as Section Button Table, Form Cell, Extensions, and more, that offer straightforward access to crucial features and information above the tab bar. While users have the flexibility to choose the type and number of controls to be placed above the tab bar, we highly recommend avoiding overcrowding, as it may reduce the tab page's body area on the screen.