# Tips for building a navigation rail?

**URL:** <https://community.appfarm.io/t/tips-for-building-a-navigation-rail/528>\
**Category:** Ask the community\
**Tags:** ui\
**Created:** [June 13, 2023, 8:23am UTC](https://community.appfarm.io/t/tips-for-building-a-navigation-rail/528 "2023-06-13T08:23:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/matt/32/188_2.png) [@matt](https://community.appfarm.io/u/matt)\
**Post date:** [June 13, 2023, 8:23am UTC](https://community.appfarm.io/t/tips-for-building-a-navigation-rail/528/1 "2023-06-13T08:23:12Z")

</div>

Instead of a drawer, we would like to use a navigation rail that can expand out into drawer size if needed. Has anyone done this before with Appfarm and could share any tips? I don’t see a standard UI component for this one yet.

We’re looking for pretty much exactly the same navigation rail that is used in Appfarm Create already:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/c7bb4e7c3946f61485d504c789cf9b5cfa36fbbe.png)

I wish we could just add an option to the existing drawer to allow it to collapse into a rail instead of being hidding, and we would be good to go!

---

<div class="post-metadata">

**Author:** ![Simona](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/simona/32/201_2.png) [@Simona](https://community.appfarm.io/u/Simona)\
**Post date:** [June 13, 2023, 12:30pm UTC](https://community.appfarm.io/t/tips-for-building-a-navigation-rail/528/2 "2023-06-13T12:30:54Z")

</div>

Hi Matt! There is no standard UI component for that yet, but I have registered a challenge on that. Until then, you can for example use two different drawers. You design one drawer as collapsed and the other drawer as expanded. You can add a button to change between collapsed and expanded. In my example I have set the collapsed drawer as main drawer in the app settings. Hope this workaround will help you 🙂

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/64a5dfd588edf82d5963d8b4945efea171f3afb4.png) ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/0917ceb2cda6fac7d0d5c5536877e073fe2247f8.png)

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/b256e7e6d22e92cf06840835fdf8c9e67abf4c43.png)  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/f75f9376ff224989a89dd8f2232db88f809b1a1a.png)

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/ae0467b7714ac994ca347d6e8e1133848f1f38f6.png)  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/1X/22ab005a22a57051818115ef2be1d1d6874d720b.png)