React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation
HTML-код
- Опубликовано: 19 май 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
I'm using your sidenav on my project. Thanks mate! what a great Guru
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.
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?
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 :)
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!
Really nice! I love that you can easily add menu items by changing the data file.
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!
I love using styled-components as well..they make working with css so easy and dynamic
Yeah styled components are awesome
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!
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?
I learned alot from you. Thank you very much ❤️
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?
My fav react tutor! ⭐
Thanks this helped a lot! Great video!
Great Man ! Please Do a carousel (auto) with styled components !
Great tutorials, it's very useful for me
Very Good, this made a lot of sense
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.
Many thanks! You helped a lot
Fue de mucha ayuda. Saludos desde Argentina !
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)
Excelent video, thank you very much!
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?
Great job, i love this video, thank you 😍😍
Thanks Son
Thank You So much
Thanks for the tutorial
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
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.
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.
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.
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.
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! :)
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.
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.
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, bro!
you are amazing bro
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
Amazing vide0
Thanks ♥
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
Amazing video. Quick question, I wanna put some text on the top bar, where should I do it?
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
Obrigado seu lindo! S2
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
How would you go about adding one more nesting item, into an existing nested item.
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
Thank you
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
Hi, can you please show an example of multilevel sidebar navigation up to 3 level in react. :)
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
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
Cool video.
@25:55 shouldn't you avoid that in favour of setSidebar((currState) => !currState)?
Brother which color theme do you use for Vscode?
How can we keep submenu open when every-time we load app?
Thank you so much for the tutorial.
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
Thanks for the video, only one thing, the sidebar is not responsive right?
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
Very nice
Thanks!
Welcome!
hey bro, amazing tutorial, but how can I make disappear the sidebar when I click on tab of sidebar?? Thx
Could you make a portfolio website please :) btw nice video!
Forsure!
Awesome video +++++++++++++++++ 🙂
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!
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
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;
}
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
nice job .How Can i make responsive this sidebar?
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 . :)
Thaks for sharing friend
Anytime!
@@briandesign love your content cuz u so damn good
@@CrookzArtwork thanks!
How would you close one dropdown when the other is open?
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 do i change the position of the icon. the icons are above the label
35:47 what's key for?
buenas como puedo hacer esa barra con next js ?
Very usefull
Thanks a lot
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.
How can one highlight the selected menu item to know the current page?
How to prevend the menu of closing right after click?
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
Hi, How to close other open submenu when clicking to another menu. tnx
How to highlight active menu in same sidebar. I tried with id =active but its not working
if i want submenu in submenu how i can do that ??
Ecommerce pls with backend if possible mate.
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.
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
❤️
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
Thank good videos. Please scroll sidebar.
i have problem when i open sidebar the page will be hide , what can i do to fix problem?
Please which theme are you using, please everything in detail. Thanks in advance
ruclips.net/video/6etaWaiMkvM/видео.html I made a vid here
Thanks
what is name of his theme ?
Can you make another video where there is a halfway collapsable option? Where you only see icons on the left. Not the text. And the centre page should compress as we open the menu.
did you find any solution for compress the centre page
@@diwakarsoni3229 Not yet
Can you guys tell me what extension be used for color of tagged literature 18:00
check my video of my vs code extensions
@@briandesign I cant found it, code in tagged literature have green color like a string, it's hard to identify, it will be easy to have same color as CSS file. Help me
Is there a way to have it expand the drop-down without changing the route for the top level item? IE: You want to go to Report2, but you first navigated to Report then to Report2 when selected.
you can remove the link from Report and just turn it into a div, so it's basically just an open and close button, then all your routes would just be the sub menus
@@briandesign Fantastic, worked perfectly. Also, that was the fastest response on video comment I have ever seen.
@@Johnne1625 glad it worked! and thanks haha, I usually check for comments every few hours
@@briandesign thank you so much it worked, the only problem is the other menus that doesnt have submenus doesnt have link anymore pls help 🙏 also i tried to add some transition and smoothness on the dropdown but doesnt seem to be getting anywhere!
@@AtifKhan-cm8qv I'm having a similar issue, looks like the explanation is not clear enough from the video and comments.