Skip to content

BottomNavigation

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

BottomNavigation 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. BottomNavigation should be used when the top level destinations need to be accessible from anywhere in the app.

BottomNavigation can have up to 5 tab items.

The tab pages of the BottomNavigation 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.

BottomNavigation supports inner navigation (navigation on tab page level), outer navigation (navigation on parent page level by using NavigationAction.OuterNavigation flag). While the outer navigation is supported, it is recommended to use a full modal page display.

Toolbar control defined in Parent Page with BottomNavigation control would be ignored. BottomNavigation has nested Tabs support. It is not recommended to display BottomNavigation as nested control of BottomNavigation.

BottomNavigation Properties

Property Type Required
Items TabItem Optional
Styles TabStripStyle Optional
_Name string Optional
_Type const Required

Items

List of tab items defined for the tab control.

  • type: TabItem[]

All array items must be of the type: TabItem


Styles


_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.BottomNavigation"

Examples

{
  "_Type": "Page",
  "Controls": [{
    "Items": [{
      "_Name": "ActionsTab",
      "Caption": "Actions",
      "Image": "res://action_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ActionExamples.page",
      "_Type": "Control.Type.TabItem"
    },
    {
      "_Name": "ControlsTab",
      "Caption": "Controls",
      "Image": "res://control_icon",
      "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
      "PageToOpen" : "/MDKDevApp/Pages/Examples/ControlExamples.page",
      "ResetIfPressedWhenActive": true,
      "_Type": "Control.Type.TabItem"
    }],
    "_Type": "Control.Type.BottomNavigation",
    "_Name": "BottomNavigationControl"
  }]
}