React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation
HTML-код
- Опубликовано: 6 июн 2024
- 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
www.codavilla.com/posts/build...
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Regular React Sidebar without dropdown
• React Sidebar Navigati...
React Website with smooth scroll
• React Website using St...
React Navbar 3 Designs
• React Navbar Tutorial ...
Your tutorials are really amazing, they add a lot of value, you deserve many more subscribers!
Managed to get this working using only two components and recursion! Thank you so much for this! Amazing!
Please share through videos, I'm really struggling here understanding React and the whole web syntax coming from a backend Java developer
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.
I'm using your sidenav on my project. Thanks mate! what a great Guru
Love you dudeeee! Omg im just starting to create this app for my company and I had no idea to do the drop box and dude! THANK YOU! After days, I finally figured out
You are really great! I am doing my react project with the help of your tutorials. Thanks a lot lot. Please continue uploading amazing videos!
Thanks, will do!
@@briandesign hello one question, can you change the background of the button or just style the button when its opened, and when closed it returns back to what it is?
That's exactly what i need right now! Thanks u so much! Keep it uppppp
Thank you... i recently started learning react!! it has given big boost to my learning :) :)
Keep it up!
Thank you so much brother for this wonderful tutorial, I was looking for the same from long time for dashboard kind of layout
No problem!
This tutorial saved me !!!! Thank you so much ! I just subscribed
me too hehe :D
Good job Brian. I love your content. Keep going bro.
Thanks Brian!
I love using styled-components as well..they make working with css so easy and dynamic
Yeah styled components are awesome
My fav react tutor! ⭐
Very Good, this made a lot of sense
Really nice! I love that you can easily add menu items by changing the data file.
I learned alot from you. Thank you very much ❤️
Great tutorials, it's very useful for me
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 :)
Many thanks! You helped a lot
Excelent video, thank you very much!
Fue de mucha ayuda. Saludos desde Argentina !
Great job, i love this video, thank you 😍😍
Thanks Son
Great Man ! Please Do a carousel (auto) with styled components !
Awesome work and really easy to follow along with and learn!
I'm wondering if you can make the components behind the Sidebar to be able to shrink and grow in width to avoid content being lost behind when opened?
Thank you sir, it was just what I was looking for. This was an excellent tutorial and is much appreciated. Can I ask how you would have all of the items that have sub items expand initially?
Thanks for the tutorial
Thanks for the great video! I did this just today - happened to auto'ly import the latest version of react-router-dom. The Switch made me run around for a while as I wasn't expecting something as key as that might get moved-out/deprecated. Anyone who may face this issue, please use Routes instead of Switch.
Amazing vide0
Thanks ♥
I learned so much by watching you! Thank you very much for this. Question: What if you wanted to put an image in for an icon? Even harder question, what if you had a button with a pseudo::before and you wanted to put an icon in that?
Thank You So much
Thanks, bro!
Mano se vc soubesse quantas pessoas vc ajuda e como seus vídeos ajudam no nosso desenvolvimento. Muito obrigado mano, vc é demais. Queria até fazer um pedido, um vídeo criando um site com Next.Js
Greetings, thank you very much for the content.
A question:
I have a top navigation bar and this side navigation bar overlaps, how can I make the side one start just below the top one?
Thanks Brian for this awesome video. Any tricks if I want to keep the sidebar always Open and Show the content in the Right pane. What changes it would need in that case? Really appreciate your help.
Great Job Sir, literally best content 🙌🏼
Create my first web look by watching your video. 😋
Needed this type of tutorial for my Admin dashboard, can you make video on that too? dashboard functionalities with react (e.g. sidebar, topbar, login navbar topbar change with name , logout)
who disliked this video bruh dude like this guy is awsome awsome awsome quality showes.
they must have been watching this upside down and thought it was the thumbs up button
you are amazing bro
Obrigado seu lindo! S2
Thank you so much for this great tutorial it's amazing and helpful.
I have question please, how can I add nasted navbar menu? I just try to add it but it gets tricky when I want to add the mapping.
If you can help me with this please.
Thank you
thanks a lot!, it was very helpful!!, how can i do that the sidebar will not hide the content of the page when we expand the navbar? thanks
How would you go about adding one more nesting item, into an existing nested item.
thanks so much for this vid! it helped a ton!! i was wondering though, how can we get a submenus submenu to display? I noticed some other comments were asking a similar question but I didnt see a response.
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
Great video Brian, it will be nice if after selecting a child component (Link) the sidebar should disapare to the left, it will make the navigation better. Thanks anyway.
Amazing video. Quick question, I wanna put some text on the top bar, where should I do it?
Great tutorial, only suggestion i would like to make: duplicate the hover border-left in the non hover state, with same background color as your background, so u don't get that jittery text on hover, plus i like to add "use-select: none", so you never get that ugly text highlight.
hey brian thankyou for awesome video, i have question, what if we add multi level menu on sidebar? example overview -> reports -> reports a, b, c
Nice tutorial. Really helped me a lot. Thanks. Is there a way to display sub-menus in deeper levels, I mean, an item having sub-menu which itself is a sub-menu. This can go to may be 3-4 levels. You are showing only two levels - main menu and sub-menu. Appreciate your quick reply.
Benny
Very nice
Thanks!
Welcome!
I'd create an "active" and "inactive" style and just change with a template string and short circuiting. So whenever you click the button it changes the style, without referring directly to 0% or 100%. It gives more control when you're trying to style it on a CSS. But thats just me, I've learned your way and its nice although I feel like I can get lost on my own code. Maybe its my coding ocd.
Hello nice tutorial! keep it up 😎 i think i have a bug im trying to open the dropdown from Reports menu when im in another url (example, the Team's url that not have dropdown) but this make a redirect to Reports url and doesnt open the dropdown, i have to been in this reports url if i want to open the dropdown, any suggestion? thanks
Awesome video +++++++++++++++++ 🙂
Thanks for the video, only one thing, the sidebar is not responsive right?
Hi, Brian! Can you please have a video on uploading image files & storing textual data on firebase with Reactjs? It’ll be really helpful. Thanks! :)
Brother which color theme do you use for Vscode?
This was a great tutorial. Enjoyed and really easy to follow. I want the sidebar to be at the same z index as the regular page. so when expanded, it shrinks the main content instead of covering it. Any suggestions?
you would need to set the value of the of the width of the div using react so that it changes the on the fly
Cool video.
@25:55 shouldn't you avoid that in favour of setSidebar((currState) => !currState)?
Great tutorial! I have a question which is about how to add a URL(external link) in the object list (the SidebarData.js) and access it in the Submenu component?
Oops. Never mind. It just simply need to change the DropdownLink from (= styled(Link) ``;) to (= styled.a ``;) and add href={item.path} in the component like
How can we keep submenu open when every-time we load app?
Thank you so much for the tutorial.
hey bro, amazing tutorial, but how can I make disappear the sidebar when I click on tab of sidebar?? Thx
Hi, can you please show an example of multilevel sidebar navigation up to 3 level in react. :)
Thank you for that great video but I would like to have a collapsable dropdown. Would you mind showing me how to do it please
Very usefull
Thanks a lot
Great tutorial! Do you know any way to make it so that when you click on the tabs to open the drop down menus it stays on the same page and opens the submenu instead of going to its own page?
Just remove the link from the main menu and turn it into a div
Hey Brian!
Thanks for this video! Extremely helpful. I wanted to ask how to keep showing the selected subnav option even after refreshing the page?
Say I clicked on reports1 and now I refresh the page. How do I keep the SideMenu and Submenu open with 'Report1' selected?
@Robson Silveira can you pls tell me how u did it, with code if possible many thanks!
Thaks for sharing friend
Anytime!
@@briandesign love your content cuz u so damn good
@@CrookzArtwork thanks!
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?
add this in css and it will work
{ overflow : auto;
}
How would you close one dropdown when the other is open?
how do i change the position of the icon. the icons are above the label
buenas como puedo hacer esa barra con next js ?
How can one highlight the selected menu item to know the current page?
How to highlight active menu in same sidebar. I tried with id =active but its not working
Hi, How to close other open submenu when clicking to another menu. tnx
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
the video was great thanks a lot but one thing that i wanna say please little more explain when you are typing your code for some person like me who is beginner . :)
nice job .How Can i make responsive this sidebar?
Could you make a portfolio website please :) btw nice video!
Forsure!
❤️
How to prevend the menu of closing right after click?
35:47 what's key for?
Well done. can you create a React Dashboard Tutorial using Reactstrap
I can add it to my video list
Definately something I'd like to see!
@@briandesign that'll be great, waiting for that
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
check out my react website videos, I cover a lot of the things you mentioned
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
if i want submenu in submenu how i can do that ??
i have problem when i open sidebar the page will be hide , what can i do to fix problem?
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.
Thank good videos. Please scroll sidebar.
Hey is there a way to make it so that the navbar at the top is fixed to the top of the screen so you can't scroll down and it disappear?
nvm got it I hate css
Goood video dude.....but normalize stating the dependencies required so we wouldn't have to go back and forth stopping and restarting the server.
Traducir por voz
128 / 5000
Resultados de traducción
To start I love your videos, I would like if you can make one with React Sidebar Navbar Footer and of course responsive. 🙏
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
Please which theme are you using, please everything in detail. Thanks in advance
ruclips.net/video/6etaWaiMkvM/видео.html I made a vid here
Thanks
Hi Brian...Great tutorial and great learning. One problem I am facing. When the number of menu items is high and doesn't fit in a page, the items don't scroll down. Am I doing something wrong or can you or anyone else help me with a solution please? Many thanks!!!
b.c its position is fixed. try to make it absolute or in real case the content will be longer than the navbar so I think it's not a problem I think so
@@sonynguyen4954 Wrong, add a scrollbox in your css.
내가 원하는게 딱 잇네 ㅠㅠㅠㅠ
what if function instead of path? example: logout button you put a sidebar. instead using path, function logout triggred when you push the logout button in a sidebar
pls tell me if u fix PLS 🙏
what is name of his theme ?
Ecommerce pls with backend if possible mate.
I'm busy doing this in a Typescript and React with Node.js project but for some reason the Key and Item. Specifically speaking about the "item." does not pick up on the title/icon etc from the object data. Not sure why and now, I am stuck... everything till then has worked amazingly, until i hit this... sigh.
Nevermind - i figured things out haha :P