Showing RadSideDrawer over the navigation bar/action bar

To show RadSideDrawer over the navigation bar or action bar, developers simply have to set the showOverNavigation property to true.
For example:

<RadSideDrawer showOverNavigation="true" tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
            <Label text="Promotions" class="sideLabel"></Label>
            <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Important" class="sideLabel"></Label>
            <Label text="Starred" class="sideLabel"></Label>
            <Label text="Sent Mail" class="sideLabel"></Label>
            <Label text="Drafts" class="sideLabel"></Label>
        </StackLayout>
        <Label text="Go to next page" (tap)="goToSecondPage()" class="mainContentButton drawerContentButton"></Label>
        <Label text="Close Drawer" (tap)="onCloseDrawerTap()" class="mainContentButton drawerContentButton"></Label>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="mainContentText"></Label>
        <Button text="OPEN DRAWER" (tap)="openDrawer()" class="mainContentButton"></Button>
        <Button text="GO TO NEXT PAGE" (tap)="goToSecondPage()" class="mainContentButton"></Button>
    </StackLayout>
</RadSideDrawer>

Figure 1. RadSideDrawer over navigation bar (ActionBar)

NativeScriptUI-Getting-Started-iOS NativeScriptUI-Getting-Started-Android

References

Want to see this scenario in action?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.

Related articles you might find useful: