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
- Header - This is at the top of the
SideDrawer
and can be used to define aHeadline
,Subheadline
and anicon
. The header also supports anOnPress
event which can be used to invoke an action or a rule. - 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. - Item - This is an object representing an item in a section. An item can be represented using a
title
and anicon
. Each item supports aPageToOpen
property which defines a target page to be rendered on click and anOnPress
event to invoke an action or a rule. IfPageToOpen
is not defined in the item, the first non-modal page defined in a navigation action inOnPress
event is the item target page. IfPageToOpen
is not defined and there is not a non-modal page defined inOnPress
event, there is not a target page in the item. TheOnPress
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.