React Navbar Tutorial - Beginner React JS Project

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 :)

Check out my playlist to see my HTML, CSS, & Javascript Tutorials

How to create a Navbar with HTML and CSS

Udacity Front end Developer Nanodegree

[briandesign]

Check out my New React Navbar Dropdown Tutorial using Hooks & Router
Check out my new React Website Tutorial that is fully responsive

[FPVNOVAA]

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

[karinacabanikova]

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 !

[sebastianestay]

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;
}

[sscoder]

finally found a seperate video on navbar react .Kudos to you!

[harrisngwenya]

This tutorial is so amazing, I subscribed to your channel before I was even halfway into the tutorial, thanks Bro.

[felixpohlmann]

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! :)

[jonathangemme]

This is helping me so much with my first dev job, thank you man!

[santiagopoggi]

You explane everything very clear from the begining to the end, help me a lot with my project thank you Brian.

[ved]

This is the one where I start learning ReactJS and move on from HTML CSS, AWESOME tutorial !!

[jorkendavsam]

This tutorial is paced very well with the perfect amount of explanation

[rapolo]

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 '.

[Nrzgarcia]

This tutorial was perfect!! Creating my first react website with this navbar

[Vickyks]

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 <Button>sign up</Button> inside ul and styled that in media query.

[md.wahidulislam]

Thank you, Brian. This was a very informative and clean tutorial. Much appreciated.

[AirNorthOne]

You are awesome, clear and concise! Subscribed!

[ChristopherPhillipsDev]

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.

[usabnd]

Have to agree with everyone here! You are really good! Brilliant tutorial.

[SriRam-fntx]

I really love your work...Appreciated !!.. Hope you will become the topmost
youtube channel soon.

[NoureddineBahi]

عمل ممتاز...شكرا تحية لك من المغرب من إفريقيا