Skip to content

Side Drawer

A SideDrawer is used for lateral navigation between app destinations or features. It is typically used when there are more than 5 destinations. For fewer than this no of destinations it is advisable to use BottomNavigation.

Only one page can contain this control in an application and this page has to be added as the MainPage in Application.app file. A SideDrawer comprises of following elements

  1. Header - This is at the top of the SideDrawer and can be used to define a Headline, Subheadline and an icon. The header also supports an OnPress event which can be used to invoke an action or a rule.
  2. Sections - Navigation items are logically grouped into sections. Each section contains a list of items where each of the item can navigate to a different page. Each section in the SideDrawer is separated by a separator line.
  3. Item - This is an object representing an item in a section. An item can be represented using a title and an icon. Each item supports a PageToOpen property which defines a target page to be rendered on click and an OnPress event to invoke an action or a rule. If PageToOpen is not defined in the item, the first non-modal page defined in a navigation action in OnPress event is the item target page. If PageToOpen is not defined and there is not a non-modal page defined in OnPress event, there is not a target page in the item. The OnPress event will be executed in current page.

SideDrawer can be launched by clicking on the hamburger icon in the ActionBar or through a swipe from the edge of the device. This swipe could be left to right or right to left depending on the app language. SideDrawer can be dismissed by either tapping on the hamburger icon, tapping on the Scrim or swiping to the left or right.

The first item in the first section of SideDrawer will define the landing page of the application. By default the navigation history of each item is preserved which means when a user switch to another item and switch back to the previous item, they return to the last screen viewed. This behavior can however be changed by defining a ClearHistory flag which would then clear the history when another item is selected.

Currently BottomNavigation and Tabs cannot be used with a SideDrawer control.

Note

Side Drawer is only supported in iOS and Android mobile app. It is currently not supported in web version.

Last update: November 18, 2021