# How to i create a side panel that slides out

**URL:** <https://forums.fusetools.com/t/how-to-i-create-a-side-panel-that-slides-out/2444>\
**Category:** How-to Discussions\
**Created:** [June 26, 2015, 4:22pm UTC](https://forums.fusetools.com/t/how-to-i-create-a-side-panel-that-slides-out/2444 "2015-06-26T16:22:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanmods](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@ryanmods](https://forums.fusetools.com/u/ryanmods)\
**Post date:** [June 26, 2015, 4:22pm UTC](https://forums.fusetools.com/t/how-to-i-create-a-side-panel-that-slides-out/2444/1 "2015-06-26T16:22:09Z")

</div>

i want to make a panel that slides out the left side when a button is pressed on the top right so that the user can navigate to a different page. if anyone can provide an example i would be immensly thankful.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [June 30, 2015, 4:15pm UTC](https://forums.fusetools.com/t/how-to-i-create-a-side-panel-that-slides-out/2444/2 "2015-06-30T16:15:19Z")

</div>

Hi there! Sorry for the delay. Here is a short example for you.

```auto
<App Theme="Basic">
    <EdgeNavigator HitTestMode="LocalBoundsAndChildren" ux:Name="navigator">
        <!-- Add a panel handled by the EdgeNavigator -->
        <Panel Width="150" EdgeNavigation.Edge="Left" ux:Name="menu">
            <Rectangle>
                <SolidColor Color="#f00" />
            </Rectangle>
        </Panel>

        <!-- The main content -->
        <Panel>
            <Panel>
                <Button Text="Side menu" Height="50" Alignment="Top">
                    <Clicked>
                        <Set Target="navigator.Active" Value="menu"/>
                    </Clicked>
                </Button>
                <TextBlock TextColor="#fff" Alignment="Center">
                    This is an example of EdgeNavigator!
                </TextBlock>
            </Panel>
        </Panel>
    </EdgeNavigator>
</App>

```

We are working on a more comprehensive example about this topic.