Getting Started with the Telerik SideDrawer Control in Xamarin.Forms
Tags: xamarin, telerik, xamarinforms
Published: 2022-05-20 16:17:00

---
title: Getting Started with the Telerik SideDrawer Control in Xamarin.Forms
published: true
date: 2019-11-15 17:29:37 UTC
tags: xamarin,telerik,xamarinforms
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*Ms0uhyyDlBrSvgi4SEmXVg.png)

It is normal to see a side menu in every application that allows the user to navigate to other sections quickly and as a Xamarin developer, we know that there are several ways to implement this option, some complex and others not so much.

Considering this, Telerik decided to create the SideDrawer control that allows its integration in a simple way, and that in addition to this allows developers to embed any content within the sliding panel, from text and icons to sliders and filters. The best thing about this is that it is compatible with Xamarin.iOS, Xamarin.Android, the Universal Windows Platform and Xamarin.Forms

**Various Customization Options**

In addition, this control is highly customizable, since we can customize the side where we want the menu to appear, this from any of the four sides of the screen. It also has several effects and transition modes, some of them include:

Push, Reveal, Reverse Slide Out, Slide Along, Slide In On Top, Scale Up, Fade In.

**Let’s Start!**

1. First of all we need install Telerik in your Visual Studio:  
[For Mac](https://docs.telerik.com/devtools/xamarin/installation-and-deployment/mac/toolbox-extension-mac) [For Windows](https://docs.telerik.com/devtools/xamarin/installation-and-deployment/windows/toolbox-extension)
2. Add Telerik NugetPackage ([See the instructions here](https://docs.telerik.com/devtools/xamarin/installation-and-deployment/telerik-nuget-server?_ga=2.224542681.2131240681.1573516749-1615001638.1573516749))
3. Let’s continue with the implementation, add the namespace:
4. Then we add the control in the following simple way:

**SideDrawer on XAML**

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/00040bd76a70ae1f29d8e71f7b6b81d8/href">https://medium.com/media/00040bd76a70ae1f29d8e71f7b6b81d8/href</a></iframe>

**SideDrawer on CS**

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/4cef18abb4e7b5f85e0a30b1716c11cf/href">https://medium.com/media/4cef18abb4e7b5f85e0a30b1716c11cf/href</a></iframe>

Once implemented, let’s save and see how it works:

![](https://cdn-images-1.medium.com/max/379/0*3At5HVxSebNoeE4E)

**Effects and Transitions**

Remember that we have some effects that will make the menu more dynamic, here are some examples that we can use:

Location:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/4afea7d51f339b9d3a1a90746278518a/href">https://medium.com/media/4afea7d51f339b9d3a1a90746278518a/href</a></iframe>

Transitions:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/72d558679f2b07eeb415cd21aa86a711/href">https://medium.com/media/72d558679f2b07eeb415cd21aa86a711/href</a></iframe>

**Share Your Feedback**

For many of these we received feedback from you — extremely valuable and appreciated. Please, keep it coming, either by commenting below or by visiting our Feedback portal about Telerik UI for Xamarin. Let us know if you have any suggestions or if you need any particular features/controls.

And If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a [30-day free trial](https://www.telerik.com/xamarin-ui), offering all the functionalities and controls at your disposal at zero cost.

More Information: [XamarinUI/SideDrawer](https://www.telerik.com/xamarin-ui/sidedrawer)

Download the solution: [GitHub](https://github.com/LucioMSP/Xamarin.Forms.Examples/tree/master/TrkSideDrawer)

¡Thanks for reading!

* * *