React Navbar Tutorial - Beginner React JS Project
HTML-код
- Опубликовано: 4 июл 2020
- Learn how to create a React Navbar Menu in this beginner React JS project tutorial. We will make a navigation menu that slides out into a sidebar and utilities a hamburger menu icon that you can toggle on and off to open the menu. The navbar will be a navbar component and will include all the props and functions.
If you've ever wondered, "How do you build a navbar in react?" or "How do I create a navigation bar and sidebar in react?" then be sure to watch this video all the way to the end to see how I created my navbar.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Check out my playlist to see my HTML, CSS, & Javascript Tutorials
• How to Make a Website ...
How to create a Navbar with HTML and CSS
• How to Make a Responsi...
Udacity Front end Developer Nanodegree
• Udacity Front End Web ...
![[Lunch & Learn] Getting Started with DevOps & MLOps in 2024](http://i.ytimg.com/vi/h1yenXD_fZc/mqdefault.jpg)
![KFF Singapore Badminton Open 2024 | Alfian/Ardianto (INA) [7] vs. Liang/Wang (CHN) | QF](http://i.ytimg.com/vi/g0QGafkoT2o/mqdefault.jpg)
Thank you so much Brian for this ! I spent solid 4 days trying to find an easy to follow tutorial how react works and how to build a nav bar ! I genuinely wanted to cry and give up :D Your video is so easy to follow with no random unexplained surprises. I learned so much today, I gained more confidence in my knowledge of css and js and I finally understand how to make react work and structure :D thank you !
Bro thank God for you as a person, i'm learning react and it's been overwhelming just trying to understand some things, but you make me feel and learn so much in such a small amount of time. You're a kick-ass teacher and it motivates me to learn even more because you yourself started learning less than a year ago. So I guess it is also possible for someone like me
Thanks Kelvin! Yeah I noticed a lot of courses were teaching concepts that were too hard to understand, so I figured I just make the basic building blocks of a site and I just started with a navbar, then body section, then footer and it helped me learn it way easier and actually made sense vs building a random app that we would never actually use. Also, staying consistent is key!
finally found a seperate video on navbar react .Kudos to you!
You explane everything very clear from the begining to the end, help me a lot with my project thank you Brian.
This tutorial is so amazing, I subscribed to your channel before I was even halfway into the tutorial, thanks Bro.
Thanks Harris!
Awesome tutorial! Helped me a lot now while creating my final project for school! :)
This guy going off. Great Vid brother!
This tutorial is paced very well with the perfect amount of explanation
This is helping me so much with my first dev job, thank you man!
Thank you, Brian. This was a very informative and clean tutorial. Much appreciated.
Glad it was helpful!
Nice tutorial. In the mobile version, I've modified the .nav-menu class in Navbar.css because the nav-items were overlapping at the top. Changing the height to something larger than 500px fixed the problem but it's hardcoded. What I did was to justify the flex items to the top and then defined the height of the menu using vh units:
.nav-menu {
display: flex;
justify-content: flex-start; /* I added this */
flex-direction: column;
width: 100%;
height: 60vh; /* 500px */
position: absolute;
top: 80px;
left: -100%;
opacity: 1;
transition: all 0.5s ease;
}
nice! thanks for sharing
Hey Brian, Thank you for this tutorial, I actually enjoyed watching and listening, it really makes things simpler the way you explain in details. I've been studying React's ContextApi in order to really understand it and while watching the tutorial, I realized something.. the MenuItems file you used to store data for the items in the navbar works kinda the same way a ContextProvider file would - providing data to wherever it is needed, except in this case it's mainly for MenuItems. The difference is basically the set up of a context file(createContext()) - the tiny bit of difference that react tells us exists. I feel storing data this way still gets the job done without the use of ContextApi - please correct me if I'm wrong
You are awesome, clear and concise! Subscribed!
I really love your work...Appreciated !!.. Hope you will become the topmost
youtube channel soon.
Thanks Sri!
Great tutorial! It was easy to follow along and your explanations made sense. You actually don't need to set the top positioning of .navbar-logo and .menu-icon to 0 in your media queries. They'll be center aligned anyway, so you won't have to use any translate properties that way. The only thing you may need to set when not using top and translate is a margin-right of 20px on .menu-icon. Hope that makes sense. Anyway, thank you for the great tutorial! :)
Thanks Anton! yeah I refactored a lot of code since I posted this and made new videos using react hooks and styled components
This tutorial was perfect!! Creating my first react website with this navbar
Nice! feel free to checkout the new react navbar tutorial I made using hooks and router
you are killing it man :)
Already seen your react videos. So easy explanation. Easy and clear, thanks from Bangladesh.
Thanks Bipon!
Thanks for the clean tutorial, helped me out a bunch
Good job Brian, what I did to remove the ' Button ' component was put the component inside a ' div ' and gave a className, then inside the media query just target that class to set it to ' display: none '.
That is smart, thanks you helped me a lot.
Really enjoyed this tutorial.
quality content bro, keep it up! You are doing great!
Thanks bro!
Have to agree with everyone here! You are really good! Brilliant tutorial.
Thanks!
He's not good, he's fucking good
dude, this is fantastic. I really like how you explain the JS, and that CSS is magic!
Finally a freakin' competent tutorial full of useful knowledge! Hate the trend thats going on at the moment where they advertise programming as direct gate to unlimited wealth.... broken society :( Go on like that! You really simplify things without leaving important information out! :)
Thanks Felix! Yeah I noticed there's almost no tutorials for regular things that we all need for making websites, so I just figured I'd make my own version and share it
Really a lot of knowledge here, sometimes I wish you would explain some things better/more structured, because I seem a little confused here and there as a React beginner. Keep this awesome stuff up man!
Thanks Brian, very useful and helpful for beginners :-)
Easy and clare, thanks from Mexico.
Glad it was helpful!
this was great. thank you so much!
Nice work man💥
this is fun! Thanks Brian!
Thanks Aby! I just posted a new react navbar vid showing 3 different designs if you wanted to check that out
Thanks for this tutorial. I'm like 10 days deep in React :D not much... I know. I was able to remove that nav-links-mobile section all-together. It wasn't needed I guess. I moved sign up inside ul and styled that in media query.
Thank you very much. I learned a lot from you. It was a great video.
Thanks Zahra!
This is a very informative video.Thanks!
Thanks Ujjwal!
thanks boss! going to watch this tomorrow lol
I thought at the beginning that this tutorial was going to require some knowledge of Bootstrap but I am satisfied to have produced using the tutorial a nav similar to that of bootstrap
yeah all my videos are made from scratch using css
Thanks a ton for this
Great video! 😊 can you please do a continuation video for how you’d make a dropdown menu from this?
thank you bro, good job
Thank you!)🤝
Very Good, Thank you very much, from Brazil :)
Hi Brian,
Correct me if I'm wrong but in this tutorial, when you're setting the location of the .nav-menu (ts 50:00) to left: -100%, without overflow:hidden enabled, your navbar is floating off to the left in broad daylight. I just want to make sure because when i side scroll with your code, it's there in my implementation without any overflow css.
Definitely like!
Very Helpful
Good one bro. Thanks for sharing with us.
Thanks!
Great video!
thank you brian
What a cool-axx dude for doing this.
Hi Brian I have an HTML sidebar and I want to add a stretchable div/flex box that can be dragged from right to left - do you have any videos for this?
Dude, great video. Easy to follow along with, even while I was folding laundry lol. How long have you been learning doing web dev? I've been doing codecademy on and off for react about a week and I feel like I'm just now understanding a little. Good stuff though, subscribed.
Thanks William! its been about 5 months or so for learning code. I've been documenting everything since day one, so if you check out my earlier videos I show the first day I started learning code. I've made a bunch of Wordpress sites before knowing code, but only started coding recently
You should check out the free react course on scrimba by bob if you wanna get a really good intro course. It's also on youtube from freecodeacademy and has like 1.8 million views.
this is a great work broo
Appreciate it!
@@briandesign your videos help me a lot
Really good stuff
On your Button component add className to export const Button = ({ .. to pass it through, append ${className} inside the classname string, then add a class name to the Button when you call it,, then replace Button in CSS with .classname (to hide only this button)
This is the one where I start learning ReactJS and move on from HTML CSS, AWESOME tutorial !!
nice! this video is older and I use classes, but in all my new react website videos I use hooks which is more updated and recent
React isn't based on html and css. It's javascript. If you haven't coded in js yet, react should NOT be your next hurdle. Study js for months before starting react.
@@creaky2436 thanks for letting me know, though i do have a good hand on js :)
great work!
Thanks Jose!
At 50:00 why is he setting the .nav-menu for the mobile menu to 500px? When I had this set to 500px it cut off the margin for the sign up button and when I added or removed more items to the nav-links array the menu would either be too large or too small.
Great video! :)
Thanks!
Thanks for the video, when we declared the menu items and we placed (title, URL, and Cname ), how can I use the URL to navigate through the pages of my project. So under src, I created a file called pages and I created the pages with their respective files( ex, AboutUs.jsx AboutUs.css ), and I want those tabs to take me to various pages I created, any help?
Nice one, very helpful and I have already subscribed. Please share the code next time, it's hard to follow along without making mistakes. Thanks a lot, I enjoyed it.
a few asked and I linked the code in the comments section
Really really great man. No words to describe for this help. kindly help in one thing here. I don't know how to highlight the active tab. New to CSS and don't know how to pull it off.
do you have a link where I can see / download this code?
what is the plugin that adds the colored bars between your formated lines.
ThankS!!!
How would i add two buttons for example if i wanted add a button for sign in and sign up?
How would you add Internationalization to this project? Will you be populating the menu items from translation.json?
Is the font awesome CDN still available it looks like you have to pay for it now but I do see an option for a "
Thanks a lot for the tutorial.
Is it possible to make it slide from the top instead of the left?
did you use the router and link this video,when I click the item navbar go to another page ?
thank you very much! make more videos!
thanks great
Gracias!
:D
Hey Brian! i have another question: As a beginner in react, the basic principle I have about the framework 'is that you should make everything become a component (if possible), so analyzing the file MenuItems, it would not be better to create a component instead of repeating - Title, menu, Name... - multiple times? thanks in advance
think of the components as the structure of your website. So, navbar, hero section, services card, basically anything that can be displayed or reused across your site. The react docs states this "Components let you split the UI into independent, reusable pieces, and think about each piece in isolation."
But honestly I would just keep making projects and learning react and you'll start to understand everything.
thanks for this tutorial Brian!! can you tell me which extensions you use ?
Hey Brian ! Loved the tutorial and the teaching style. Is there a reason for not using React Router for your navbar ?
check out my new react navbar video with 3 designs. I use react hooks and router there
nice video!
thank you
can you tell which background theme you are using?
nice video. I would just recommend that u start from mobile view because in my browser the padding/margin of the logo for example seems to be a bit off. Thanks a lot tho!
ah yeah that was just a filler logo, so ideally you'd replace it with an actually image and then you can customize the sizing
Good one!
Thanks!
Gracias bro
Hey brian, In navbar. Js file I am trying to redirect this page to sign up form by clicking on signup button. But I am getting navbar. Js page along signup form.
Can you help..
what are u using theme for vs Code ? pls say
Awesome video... Can u help if I am trying to navigate to any try.js by just say services button in navbar...what should I do additionally
hi Brian ! this is excellent video! I'm really glad that I found it :)) just have one question, do you have an idea what lines of code should be added that you can close the menu by clicking somewhere else than on "x" ? and another question, when you click on "home" - what should I add to the code that the navbar will hide?
So if you check out my recent react website video I made a completely new navbar with a separate mobile menu dropdown that does the effect you're taking about. Also, I used react hooks to make it to vs in this vid I used classes.
But in short you'd need to add the toggle function that you have on the X onto the entire div at the top, so it triggers the function when you click anywhere on the menu. But with the new method I used in my recent react website vid, it is way easier and allows you to add more customization vs the way I did in this video
@@briandesign thanks! I found everything that I needed !
@@jwiesek awesome!
The tutorial is amazing but you know what would be even better? Having the code hosted on Git platforms. :)
github.com/briancodex/react-navbar-v1 it is
@Brian Design thanks, but you might be put github link on description
Hi there,
In 2022, fontawesome v6 there is no cdn. If i change for fontawesome v5 i can use cdn only when i have pro plan :(
when i call items.cnam in the class name and then I go to put .nav-Links in css but nothing change in the items when I put some css any souliton ?
Hey! Good tutorial! May I ask what vscode extension you're using for the colored bars on the tabbed spaces?
check out my vs code extensions video
@@briandesign good teached, and what kind of color did you fix for this code editor?
Hey man, I see you have a few navbar react tutorials. Which one do you recommend starting with? I imagine your most recent one?
Depends on how much react you already know. If you are just starting, then you can watch my earlier react website vids cause I use css for styling, but if you know styled components, then you should check my recent ones.
The recent ones I posted are more specific focus with animations, but my ones I posted like a month or so ago are more general websites designs
Check out my New React Navbar Dropdown Tutorial using Hooks & Router
ruclips.net/video/T2MhVxJxsL0/видео.html 👈
Check out my new React Website Tutorial that is fully responsive
ruclips.net/video/I2UBjN5ER4s/видео.html 👈
Bro really said, bee as in honey bee, his thought process is on a whole new level, it beats mediocrity for sure, he is like one of those guys, don't do what they think
Can i add this to an existing react js project ?
great video
Thanks!
Hey Brian, this tutorial is awsome. Love to watch more like this. A small suggestion from my side if you don't mind :- Please do it fast. For a such a small component, it took almost 1 hr. Patience hits out. Nevermind these are much elaborative but video is too slow to watch for a long time.
What is the plugin which you are using to auto type some of the sentences? That could be a lifesaver for me.
I know Im super late and you might have had an answer by now but if anyone needs it its called "React snippets".
I appreciate your videos, I've been working on a website for a gaming community & your videos have been extremely helpful. I've looked through this codes attempting to locate how to Change the "React" & Logo in the Top LH corner of the Navbar. I'd like to change them to the Logo for the Website I'm creating. I can't seem to ID the call for the logo anywhere in the src. Can you point me to where this could be accomplished? Thanks!
NM I found it >_<
Thanks again! I enjoy our long conversations LOL
omg you are very cool
how to change the react logo to a personal png or svg logo ?
Many Thanks for sharing bro!
I wish if you used Hooks bro, but thanks again!
Check my recent navbar 3 designs vid I used hooks. Basically every video after this one I used hooks
@@briandesign Many thanks for your response brother!! Amazing!
please continue make more React videos and I'll support your channel by keep clicking on the ads!
Thanks!
Nice tutorial, very straightforward, but I need to create two buttons instead of one, anyone know how I can do that with this procedure?