# How do I create the type of sidebar dropdown in the image?

**URL:** <https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150>\
**Category:** Ask the community\
**Created:** [July 27, 2024, 6:02am UTC](https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150 "2024-07-27T06:02:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Webworks](https://avatars.discourse-cdn.com/v4/letter/w/74df32/32.png) [@Webworks](https://community.penpot.app/u/Webworks)\
**Post date:** [July 27, 2024, 6:02am UTC](https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150/1 "2024-07-27T06:02:29Z")

</div>

I want to create the type of sidebar dropdown in the image in Penport. Kindly assist on how to achieve it.

 ![dropdown](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/c540ee1236881957497771c1dd60d0db3d74a736.jpeg)

---

<div class="post-metadata">

**Author:** ![Webworks](https://avatars.discourse-cdn.com/v4/letter/w/74df32/32.png) [@Webworks](https://community.penpot.app/u/Webworks)\
**Post date:** [August 2, 2024, 8:11am UTC](https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150/2 "2024-08-02T08:11:47Z")

</div>

Still looking for help. Kindly assist.

---

<div class="post-metadata">

**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\
**Post date:** [August 2, 2024, 8:34am UTC](https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150/3 "2024-08-02T08:34:02Z")

</div>

Are you looking to prototype this behaviour? It’s pretty complex… you might be able to “fake it” with a workaround using overlays…

---

<div class="post-metadata">

**Author:** ![josel](https://avatars.discourse-cdn.com/v4/letter/j/e9a140/32.png) [@josel](https://community.penpot.app/u/josel)\
**Post date:** [September 17, 2024, 3:52am UTC](https://community.penpot.app/t/how-do-i-create-the-type-of-sidebar-dropdown-in-the-image/6150/4 "2024-09-17T03:52:38Z")

</div>

As @LauraKalbag mentioned, you’ll be able to do it with overlays.  
ie-

- Duplicate your sidebar board.
- Modify the ‘Listing’ entry in this new board so that it is in the collapsed state.
- On the old board, create an onclick interaction in the expanded icon in the Listing entry.
- Configure this interaction to as follows:
  - Open an overlay with the destination being your new board.
  - Manually position the new board to overlap your old board.

To close the new board, repeat the process by creating an onclick interaction in the collapsed icon in the Listing entry. Configure this to be a ‘close overlay’ with the destination being the new board.

This is a tedious process especially if you want to display expanded and collapsed state of other dropdown entries.

I would love to know if there is an easier way to do it.