# How do I make a sidebar section?

**URL:** <https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911>\
**Category:** How do I?\
**Created:** [July 30, 2022, 9:27am UTC](https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911 "2022-07-30T09:27:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 30, 2022, 9:27am UTC](https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911/1 "2022-07-30T09:27:52Z")

</div>

I want to make an instance of the sidebar to make SPA, but cannot figure out how to make the section. I can make a div block of sidebar but cannot use it as an instance section. I cannot resize the width of the section or the arrangement of the body. If I make the sidebar position absolute and put it in the back I can’t click on the navigation buttons, If I make position absolute and put it infront I can’t click on my contents. Anyone can explain how and what did I got wrong?

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [July 30, 2022, 5:40pm UTC](https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911/2 "2022-07-30T17:40:09Z")

</div>

I found a workaround which by setting section to 0 height and the div block z-index turned around. not sure if that is the way to do it but it worked

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 8, 2022, 10:04am UTC](https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911/3 "2022-08-08T10:04:05Z")

</div>

The easiest way is to use the `Modal` section and play around with the settings of the Flexbox inside the Modal.

In the example below, I get rid of the Modal backdrop (since I want it to act as a Sidebar, not a Modal) and position it to the top left:

 ![CleanShot 2022-08-08 at 12.01.09@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2b7a8a1dddaa2de755f0da7547af0b5e13b111f4.png)

Then, on the Flexbox inside the Modal section, I will do the following:

- get rid of the corner radiuses,
- get rid of the shadows,
- get rid of the little cross icon in the top right that’s not suited to a sidebar,
- choose a width that suits me,
- change the height to 100vh so the sidebar takes up the entire viewport.

 ![CleanShot 2022-08-08 at 12.03.08@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a5760502bbe553cf3690ebdc444bbb23fd514272.png)

Does that help?

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\
**Post date:** [August 8, 2022, 10:11am UTC](https://community.weweb.io/t/how-do-i-make-a-sidebar-section/911/4 "2022-08-08T10:11:41Z")

</div>

That works, thank you Joyce!