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
Only one page can contain this control in an application and this page has to be added as the
Application.app file. A
SideDrawer comprises of following elements
- Header - This is at the top of the
SideDrawerand can be used to define a
icon. The header also supports an
OnPressevent 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
SideDraweris separated by a separator line.
- Item - This is an object representing an item in a section. An item can be represented using a
icon. Each item supports a
PageToOpenproperty which defines a target page to be rendered on click and an
OnPressevent to invoke an action or a rule. If
PageToOpenis not defined in the item, the first non-modal page defined in a navigation action in
OnPressevent is the item target page. If
PageToOpenis not defined and there is not a non-modal page defined in
OnPressevent, there is not a target page in the item. The
OnPressevent 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.
Tabs cannot be used with a
Side Drawer is only supported in iOS and Android mobile app. It is currently not supported in web version.