Skip to content


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 object Optional
_Name string Optional
_Type const Required


List of tab items defined for the tab control.

  • type: TabItem[]

All array items must be of the type: TabItem


Set styles for TabStrip

  • type: object with following properties.
Property Type Required Default
TabStrip string Optional


The string value is a style class name for TabStrip. A TabStrip style class has specific properties such as selected-item-color (for active tab item), un-selected-item-color (for inactive tab items) and highlight-color (for highlight line of active tab item on Tabs only).


  • type: string


  • type: const

The value of this property must be equal to:



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