React Navbar Dropdown Menu Responsive Tutorial - Beginner React JS Project
HTML-код
- Опубликовано: 5 авг 2020
- Learn how to make a React Navbar Dropdown Menu in this tutorial. I used React Hooks and React Router to create this navbar. When you click on any menu item it will navigate to that link and update the page
It is mobile responsive and has a hamburger menu that showcases the navbar whenever you click on it. Feel free to refactor the code and add any changes
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Source code
github.com/briancodex/react-n...
Codeacademy Pro Review
• Codecademy Pro Review ...
Check out my new React Website that is fully responsive Tutorial
ruclips.net/video/I2UBjN5ER4s/видео.html
Thank you so much Brian, i have one question please, i want to put the dropdown in three places and iv'e changed the events names to make it work but they all still come down when i hover on one of them
hello Brian thanks for this vidio i am really profit, but i have a problem the dropdown-menu is not display for ( max-width 960px) can u fix it ? thank u
Everything is gud, except there are some versions conflict with MaterialUI table.
Have u updated the code?
Being a beginner react developer your videos are just like a diamond...thank you very much brian. and lots of respect...
Thanks Romak
Man, thank you so much for the video, simply one of the best that I have ever seen regarding React, keep rocking!
Glad you enjoyed it!
I came here to get a sense of how the onMouseEnter dropdowns were created in general. Your video explained it very well and with clean code. I was able to create one for one of my projects. Thank you keep up the great work!
Awesome, thank you!
Total beginner - I learned a lot. Thanks for the handson instruction!
I was looking for a simple but good react navbar for my project and i have to say thanks, its simple and it is in plain CSS!
Loved yout tutorials. Easy to understand. Untill your multi-level drop down video comes, will try it by myself. Hints are welcome. :-)
Great tutorial thanks so much! Quick tip: Cmd + W will close your current tab inside most applications (including VS Code)
This tutorial is great. I was using react-strap and their navbar was being wonky. I'm using styled-components and styled-icons with your tutorial. So far so good!
Hey can you give me an hint. Iam using styled component and i want to implement a navbar with dropdown menu
@@jhonyalberto4814 Are you building from scratch or using a frame work?
great tutorial! Super well explained. It helped me a lot. Thanks 🌻
Great content man! Love your teaching style!
Thanks Tudor!
thank for your videos, this is a gem for beginner like me!
thanks what an amazing full functional video,go on man
Just saved my life, thanks man!
Thank you sir... Your tutorial helped me alot for my project!!
Thank you very much for this video, it helped me a lot!
Great video and awesome channel dude!
Thank you so much for the tutorial ! Really helpfull !
Thanks!
I'm actually following your videos to learn how to design the website, i would love it if you do more with React and CSS combined
I'm creating a new react vid right now and I spent way more time on designing this one, so you'll see it once I post
@@briandesign Thanks mate, appreciate the efforts, ton of content to learn from your videos.
I don't like CSS, but your videos always help me with this, thanks. haha
Does that menu scroll with the content when navigating down the website? Pretty much like a sticky footer, but sticky navbar behavior?
bro... i did it thanks to you ;) ! now i just need to figure out an organized file structure.
awesome!
I enjoyed the tutorial simple explanation used dope
Thanks bud you're a Life saver!❤🔥🔥
Hello Brian. Quick question, I noticed after adding the code in drop down js file, I'm unable to select anything in the menu. Any suggestions on how I can achieve this?
Thank you so much for this video !!
Appreciate it!
Perfeito, irmão. Parabéns!
you did a _setDropdown(false)_ when the window is less than 960 width. Why is that? How can we leverage the menu items in Mobile, this tutorial is incomplete if a page loses content arbitrarily just cause the user is on a mobile device
Nice Work Brian , it will be great if u make a tutorial regarding the Sidebar with the Navbar u already did
I'll most likely make a new tutorial showing how to do the sidebar soon
Can you tell me why when hover on menu bar, main background is little more brighten, then return to previous state?
do u have solution for navbar dropdown in mobile window size? seems like it was not shown in this window
Thanks too much! Great class!
Love these videos!
Glad you like them!
A great tutorial, thanks
Thank you for this nice tutorial! I am trying to add to your project a second dropdown nav-item with anchors inside the homepage using an update of the MenuItems.js file. But, i'm facing some difficulties... Would you be so kind as to take some time to help me? Many thanks in advance for your answer and help.
How would be page folder be in components? Page all file is like a page, there wrap more than component. Please give a answer
Hey brian, I'm having an issue with this navbar. When I enable bootstrap in my react app, navbar drop-down doesn't work. Can you help me how to fix this issue please?
Could you please correct the source code to make the "Services' responsive mobile menu become multiple levels, thanks.
To all the new people watching this video, here is a solution to this:
Add the following in Dropdown.css
@media screen and (max-width: 960px){
.dropdown-menu{
width: 100%;
position:absolute;
top:170px;
list-style: none;
text-align: center;
}
It will resize our sub-menu elements.
Then add the following constant in Navbar.js that can be used to expand and retract the dropdown menu.
const extendElement = () => {
dropdown ? setDropdown(false) : setDropdown(true);
}
Then add onClick={extendElement} to our element that has a dropdown menu, in the video it is "services" (and remove closeMobileMenu, otherwise the mobile menu will be closed rather than dropdown being expanded):
//
There is still one issue. If you click an element in the dropdown-menu while in mobile, the navbar does not close down. To fix this, we pass closeMobileMenu down as a prop to our Dropdown function.
//
Then in that same element, change the navbar so that it reads as the following:
{dropdown && }
This passes the constant closeMobileMenu as a prop to our Dropdown function and renames it to onCloseMobileMenu.
Then in Dropdown.js, change the function header to "function Dropdown(props)", and then change the declaration to the following:
There is still a small issue where the icon "fa-caret-down" is not displayed in the mobile menu. Remove the code section:
.fa-caret-down {
display: none;
}
from both Dropdown.css and Navbar.css and it will be displayed correctly.
Credit goes to Me and @Lepsza Wersja
@@ReugreWins Thank you so much❤️
@@ReugreWins Thank you. You would know how to put more levels. For example:
Services --> Design --> Area 1
Area 2
Area 3
@@ReugreWins Thank you so so much!
Thanks for the tutorial - On mobile view, your nested navigation links to *Services* disappear. How can we have that nested navigation functionality just like you do on desktop view?
Yes i also need this..please give some idea
In your Navbar.js go to onMouseEnter function and change both the setDropdown to true. That should make the nested links to Services appear and disappear on mobile view. But after that I don’t know how to make the entire mobile view navbar disappear when I click one of these links. If you have fixed this part please help. Thanks in advance .
In mobile view how the service sub menu display?
dropdown isn't working on mobile?
hover property is not working on my mobile devices. what should i do? pls anyone reply and thanks.
Thanks for the help.
Thanks for the tutorial dude :) , but could the navbar set an active page to highlight the navbar item on our current page?
I suppose this is just for practice reasons since using React for such a simple task that could easily be achieved using basic css and just a little vanilla JS, is an overkill?
what text editor are you using?
Osm video bro keep rocking in react and create react Helmet tutorial also
Very useful video
can you please suggest how to do it the drop down menu for contact us ?
C'mon man, the mobile dropdown is the reason why I decided to follow this tutorial
Hi Brian, Can you please make a tutorial on reusable dropdown menu. I have like 5 dropdown menus in navbar. How to make MenuItems component reusable?
thanks so much!! this was super helpful - quick question, if we wanted 2 buttons on the right, how would we go about that? Button.js would not allow multiple links returned
you'd most likely have to create another button and customize the css to make sure it fits
why arent my bars changing to the times on click? i can do everything on click
@Brian Design, I’m trying to make the nested drop down work on my mobile, I’ve managed to do that but I can’t exit the drop down after that. I have to manually press the “fa-times” icon to view the page. How can I make this work automatically? Any help bruv
how did you do it? please help
Thank you very much for your video, its great. But i dont know how to add item for multiple dropdown in MenuItems
Everything is gud, except there are some versions mismatch with MaterialUI table.
Have u updated accordingly?
Thank you!
Thank you from Germany!
Thanks Arash!
I am having trouble following you, like my images are not being rendered
Can you help me ?
Hey Brian, quick question, if we had more than one dropdown on a navbar, what would be the best way to deal with that? To create a new dropdown file for each menu item and then map through each data? Or would there be a way to somehow map through each data from one dropdown file. I hope that makes sense! Thanks for the video.
Did you get the answer for this?
I have the same question...
what is the .NavItems in the navbar CSS?
Greattt tutorial btw!
Thanks!
please make a tutorial for register account and login form from this project
How to open service tab on mobile view on click?
Hello, thanks very much, I will add some dropdown on each menu item, how do I accomplish it plz
TNQ so muchhhhhhhh man..., dear Brian The place of a store(E-commerce) website designed with react is empty on your course page
So great !!!
hi, am trying to create multiple dropdowns, but when i mouse hover on one dropdown, it displays sub-menus of all dropdowns, i jus want it to display sub-menus of one particular dropdown when i mousehover on that particular dropdown in REACTJS. pls help me.
maybe you could add a class than hides all sub menus and then when you hover over a specific dropdown sub menu, it will only show that menu, but hide the rest. I really wouldn't know how to explain it over a youtube comment, but I could make a tutorial in the future showing it for additional dropdown menus
@@briandesign could u pls make a video for multiple dropdowns submenus(mouseover and mouseleave). It will really help me n my company people.. it's our kind request.
Hi, you can use useState as much as many times as you need, you just add two more methods like this:
const [dropdown1, setDropdown1] = useState(false);
const onMouseEnter1 = () => {
if (window.innerWidth < 960) {
setDropdown1(false);
} else {
setDropdown1(true);
}
};
const onMouseLeave1 = () => {
if (window.innerWidth < 960) {
setDropdown1(false);
} else {
setDropdown1(false);
}
};
then you create another component of Dropdown and then you call it like this:
{dropdown1 && }
@@ermirakajtazi5841 what's about MenuItems? i dont know how to add other items for multiple dropdown, its display same dropdown. Thanks so much bro
@@ermirakajtazi5841 i have try this method and succesfully but my code very dirty
Thanks a lot! Is compatible with react 17?
Hi Sir I am from Coimbatore,Tamilnadu, India.I love your video. Will you please make more videos
Thanks!
No problem!
Cool...What if want 2 or more drop-down?
Hello. Can you please tell me how to animate services dropdown?
Great Videoo !!!!
Thanks Alkis
How to add one more dropdown in navigation
Its amazing
Thanks for the video but I have a problem with opening the submenu. After I imported bootstrap script, it doesnt open anymore. I tried all ways but no solutions. Can you help me, please?
I don't use bootstrap, so wouldn't know
how to educe the progress bar in git
why dropdown is not working for mobile screen?
my hamburger menu is not visible can you plese help me
If you do it with animation well be perfect
you are the man,
Gracias !
Thanks Derlis
Thank you but under 960px unavaible the dropdown menu points. It's not Seo friendly. Same possibility should be all of view. How implemented for this Navbar google analytics, react helmet and open graph? I think seo is very important nowdays but nobady make appropriate video. Thank you
yeah I just wanted to show the starter point for this design. I noticed a lot of other big websites have a completely different component for mobile view that would just popup and display when you click on the hamburger icon. That's something you could create and replace, instead of using what I did.
Or you could just change the code with the window.innerWidth < 960px and just remove that part or set the state to true, but then you'd have to add custom CSS because when you hover over the services section in mobile the dropdown would cover the other menu items. I haven't messed with react helmet or open graph, so not sure.
there is a problem coming while try to create multiple dropDown
крутой тренинг, такой все делаешь на расслабоне, сзади репчика только не хватает
¡Hi! Thank you very much for this tutorial, it contains the information I was looking for explained in a simple and understandable way.
It only has one but, I am stuck in the onMouseEnter & onMouseLeave event of the Services dropdown as changing the state to false / true throws me an infinite loop error, any suggestions that could cause it? 46:07 timestamp
In the tutorial it works fine, and by google I have not found much information on the subject
Thanks Daniel! check my github code and see if you typed everything correctly. I'm not sure why it would cause that unless I was able to see your code
@@briandesign Thanks for answering! I have checked the code against mine and the only difference was in the Dropdown.js, which had the onClick without the arrow function.
I have changed it and now it works like a charm.
I look forward to the video that you have commented to ramvvram of the complete react tutorial.
Once again, thank you very much!
Glad it worked! I just posted my new video of the react website, so feel free to check it out
hey brian, how do you hide the sign-up button once the user logs in?
add .btn.signedIn {
display:none
} in button.css
and in Navbar.js, change the class as !isSignedIn? 'btn' : 'btn signedIn'
the icon change isn't working that way! I had to use svg files instead!
fas didn't work for me I had to use fa instead. so fa fa-bars
Dropdown not working on mobile
1000th subscriber
aye thanks Srithan!
can make a react mega menu?
ide icon theme name?
Can you make video on quokka js react
Brian why did u add state and click event inside Dropdown component ?Kindly let me know .I tried doing it without click and state and the app runs fine .
import React from "react";
import "./Dropdown.css";
import { Link } from "react-router-dom";
import { MenuItems } from "./MenuItems";
function Dropdown() {
return (
{MenuItems.map((item) => {
return (
{item.title}
);
})}
);
}
export default Dropdown;
on mobile view whenever you click on the menu items, does it still make the mobile menu disappear and show the page? Or does it just stay there?
@@briandesign It disappears and shows the page.Just like before.
@@dheerajnaik6467 oh it's for desktop view and whenever you click on any dropdown option, it will disappear. If you don't include it, try to click on the dropdown items and it will just stay showing if you're on desktop view
Awesome tutorial, but I'm struggle with one thing. Once view comes to mobile size, there is no possibility to extend Services. So if someone will use this app on mobile, he has no access to Services content. How can I make it extendable on mobile ??
Exactly!
I resolved problem with extending Nav element in mobile view.
Firstly we have to add in Dropdown.css:
@media screen and (max-width: 960px){
.dropdown-menu{
width: 100%;
position:absolute;
top:170px;
list-style: none;
text-align: center;
}
It will resize our sub-menu elements.
Then we have to create click feature to Nav Element:
const extendElement = () =>{
dropdown ? setDropdown(false) : setDropdown(true);
}
and add this Click feature to our LI with Nav Element:
You can find whole code on github but it's a bit modified as I use two extendable Nav Elements:
github.com/franky90/ReactWorkoutProgrammer/tree/master/src/components
Code Above you will find in components:
Navbar.jsx , Dropdown.css.
Ahh and we have to remove function "closeMobileMenu" which closes our Nav Element after click on it. We want to keep menu open:
//
Lepsza Wersja Awesome it work thanks also to you you save me a lot of time😎
@@Cheikyvand you welcome, happy to help
i am a backend developer, came here to create my own websites and yea i suck at doing front-end
Nice
Thanks KAMAL
Your code is good ..but i my drop down is not opening while hover and even dropdown is not opening mobile for you...you just made that to closemobilemenu on click but actually at services we want to open the dropdown in mobile view
Thanks . Can you create tutorial on react full? Or show how to create basic web app with it.
I working on making a website with react right now, so I'll post the video whenever I get done
@@briandesign Great.. Im in the process of learning it but finding it difficult - its mostly basic cuz of jsx but some concepts in react i still dont understand