DEV Community

Cover image for Create a Modern Dynamic Sidebar Menu in React Using Recursion

Create a Modern Dynamic Sidebar Menu in React Using Recursion

jsmanifest on November 17, 2019

Find me on medium In web pages, sidebars in web pages are amongst one of the most useful components that exist in the page due to their navigation...
Collapse
 
yerycs profile image
yerycs

Hello, Thanks for good post.
I want to handle another route in onClick function.
I can use windows.open() in javascript.
But it is not good way. I want to use react props.history.
How can I use it?
Thank you.

Collapse
 
utcobb profile image
Christopher • Edited

Hey there, how can i use this to link to other pages in my site? You never covered actually using the thing to get anywhere. Multiple people have asked about that in the comments and they were ignored. Would you mind clarifying how to go about that using this? Thanks!

Collapse
 
zeeshanamjad0495 profile image
ZeeshanAmjad0495 • Edited

Hi Chris, you can use React Router. Add routes to your list items and change the route on click. You can refer to this:
reactrouter.com/web/example/sidebar

Collapse
 
yannick_rest profile image
Yannick Rehberger

Well written article about Sidebars/Navbars in React.

Collapse
 
makampos profile image
Matheus de Campos

Thanks bro, I appreciate this content, very usefull for me!

Collapse
 
ponyjackal profile image
ponyjackal

Thanks
This is really helpful!!!

Collapse
 
drdougtheman profile image
drdougtheman

Thanks for the tutorial!

Collapse
 
jonathansh1115 profile image
Jonathan Tan • Edited

how do I make it onClick it will go to a page(eg example.com)?

Collapse
 
haphison98nd profile image
Hà Phi Sơn

Thanks you very much. Fortunately, I have read your article, which helped me solve the problem in the past 2 days

Collapse
 
kevindtimm profile image
Kevin D. Timm

You never included index.css?

Collapse
 
edenjamal profile image
Jamal Eden

Great article thanks. But what about the button that open and close sub items? Or sub items will be appear by default?

Collapse
 
woeps profile image
Christoph Wanasek

You could extend the SidebarItem component with a prop show: bool = true value, which toggles the rendering.
Then you just wire up the onClick of the "parent ListItem" to toggle the prop of it's "child ListItem".

Collapse
 
edenjamal profile image
Jamal Eden

Thanks a lot.

Collapse
 
nguoidang1996 profile image
Dang Ng

Thanks, But Can u description about event click item on menu or submenu ?

Collapse
 
clejton profile image
Cleiton de Freitas

hello friend, thank you very much for the post
how to implement dynamic urls, example: '/projects/:project_Id/companies'.
expected value: '/projects/5/companies'.

Collapse
 
jasimur profile image
Jasim Uddin

I get this error: TypeError: Cannot read property 'map' of undefined

Collapse
 
rinah profile image
rinahs

good ! how to make icon dynamique with this list