Skip to content

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 sort of 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 combination:

  • 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.

Unsupported combination:

  • Bottom Navigation page inside another Bottom Navigation tabs
  • Bottom Navigation page inside Tabs page's tabs

Last update: November 18, 2021