🎟️ Grab your ticket for NativeScript Developer Day! Coming in April to Amsterdam. Learn more here.

NativeScript Core

RadSideDrawer Location

Depending on the application scenario, RadSideDrawer can be configured to display at a specific location on the screen. This also changes the way the transition animation is applied. There are four available drawer locations:

Changing the drawer location is done by setting one of the four possible values to the drawerLocation property. The four location options are defined by the SideDrawerLocation enum. Setting the drawerLocation property can be done both programmatically and via XML:

public onTopLocationTap(args) {

private setDrawerLocation(location: drawerModule.SideDrawerLocation) {
    let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));
    if (!sideDrawer) {

    if (sideDrawer.android) {
        if (location === drawerModule.SideDrawerLocation.Top || location === drawerModule.SideDrawerLocation.Bottom) {
        } else {
    sideDrawer.drawerLocation = location;
<nsDrawer:RadSideDrawer id="sideDrawer" drawerLocation="Left" drawerContentSize="280">



    <StackLayout class="mainContent">
      <Label text="{{drawerPositionText}}" textWrap="true" class="drawerContentText"/>
            <Button text="Left" tap="{{ onLeftLocationTap }}" class="drawerContentButton"/>
            <Button text="Top" tap="{{ onTopLocationTap }}" class="drawerContentButton"/>
            <Button text="Right" tap="{{ onRightLocationTap }}" class="drawerContentButton"/>
            <Button text="Bottom" tap="{{ onBottomLocationTap }}" class="drawerContentButton"/>


Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.