React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation

Learn how to make a React Sidebar with Dropdown Menu. We will use react hooks and styled-components to create this sub navigation. You can navigate to other pages using react router. Feel free to refactor the code and let me know any ways to improve it!

Timeline
0:00 What we are building
3:44 Creating Components
7:24 Creating Data File
16:20 Creating Sidebar
30:06 Creating Sub Menu
47:38 Creating Pages/Routes

Access Source Code

If you want to follow me along my coding journey, be sure to subscribe :)

Regular React Sidebar without dropdown

React Website with smooth scroll

React Navbar 3 Designs

[oluwasegunhaziz]

Well done. can you create a React Dashboard Tutorial using Reactstrap

[michaelsylva]

i seem to have a bug mapping the subNav, u did make use of a "?" before the map function but now all subnavs become active when one is clicked

[ronsivan]

I would love to do a code along with a full React+SCSS web app tutorial
A tutorial about Authorization with Json Web Tokens (JWT) and Refresh tokens would be neat as well :)

[robertrodrigues]

Toop!! Muito obrigado pelos conhecimentos, confesso que pensei que fosse muito difícil e que não iria conseguir compreender e entender e também aprender, mas agora que conseguir finalizar, percebo que foi simples é muito fácil de entender, por mas que precisei traduzir a vídeo aula rsrs. Desejo todo sucesso e continue trazendo mais conteúdos bons, breve breve vai ser eu montando um canal também.

[thedeveloper]

how to add transition to when you click to open the dropdown? i really tried to make it smooth. also anyway to not go to the link when there is dropdown and u click the main root? cuz thats not how dropdowns work man.... there should only be link when u click the items on the dropdown or when theres no dropdown and u click the sidemenus

[vasifmammadov]

Class perfect, but to be honest I didn't like "styled. component" tool it is not readable and I confuse about which one is it.

[froyorex]

Goood video normalize stating the dependencies required so we wouldn't have to go back and forth stopping and restarting the server.

[duncankioi]

Hello, I need your help. I have a dropdown inside a dropdrown but Im having a challenge when I click one link of the second dropdown all the links of the second dropdown display there content instead of only one. And also when I try to display the items in flex they just display in a straight line.

[rachaelklein]

How would you go about adding one more nesting item, into an existing nested item.

[tanishsharma]

At 36:00, when I created all the sidebarData, sideMenu and all, and refresh the page, My data of sidebarData like Overview, reports and etc doesn't show up. Please help me and tell me where I could be wrong

[milanpandey]

How would you close one dropdown when the other is open?

[lucas-pe]

how to do with 3 menu options, example "Reports/Reports 3/Reports3-A" HELPPPP

[thetowerfantasymusic]

How do I close one dropdown when I open another ?

[Shakhzod_Yuldoshov]

can you upload some videos about, how to create websites using react + redux, please. You explain perfectly. Your videos are great.
I love your Videos. All of them are very useful, thank you for all of them. But I have an Idea.

if you launch the React course all of your subscribers will be so happy.
Course content:
1. JSX - (HTML + jS)
2. Redux; Flux
3. State; Props
4. Hooks
5. The component LifeCycleC (Mounting; Updating; unMounting);
6. ComponentDidMpunt
7. React-Router
8. Link
9. Route -> URL
10. brouserRouter
11. Switch

[susanbasnet]

hay how can we show only one dropdown menu at a time like if you have open report and now you want to open a message. you click on message and now your report will hide and only messages list will be show

[mathanjeya]

Great Man ! Please Do a carousel (auto) with styled components !

[DeepakSharma-vlxr]

Great video! Btw I tried this and added more elements to it(more than what can be displayed on screen at a time) but now I want a scroll functionality for this sidebar only, how I can do that?

[eddypenaranda]

Thanks for the video, only one thing, the sidebar is not responsive right?

[olgam]

This tutorial saved me !!!! Thank you so much ! I just subscribed <3

[atnguyenucchi]

i have problem when i open sidebar the page will be hide, what can i do to fix problem?