React Navbar Tutorial - Beginner React JS Project

Подписаться 116 тыс.

Просмотров 329 тыс.

50% 1

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

Опубликовано:

15 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 438

@FPVNOVAA 4 года назад

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

@briandesign 4 года назад

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!

@sebastianestay 4 года назад

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

@briandesign 4 года назад

nice! thanks for sharing

@karinacabanikova5489 3 года назад

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 !

@briandesign 4 года назад

Check out my New React Navbar Dropdown Tutorial using Hooks & Router ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T2MhVxJxsL0.html 👈 Check out my new React Website Tutorial that is fully responsive ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-I2UBjN5ER4s.html 👈

@ChristopherPhillipsDev 2 года назад

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.

@rapolo01 3 года назад

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

@joshdu93 2 года назад

That is smart, thanks you helped me a lot.

@harrisngwenya4120 4 года назад

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

@briandesign 4 года назад

Thanks Harris!

@felixpohlmann6258 4 года назад

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

@briandesign 4 года назад

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

@Vickyks27 2 года назад

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.

@sscoder96 3 года назад

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

@fulstak 4 года назад

.btn:hover{ transition:all .3s ease-out; transition:250ms } First question: Do not you think it is redundant the second transition property? Second question:Isn't correct that transition property goes to unhovered selector? Thanks up front

@briandesign 4 года назад

yeah you could just add it to one line and if you want a smooth transition in and out, you would want to add transition to both the original button and the hover state.

@jonathangemme8226 2 года назад

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

@santiagopoggi6003 3 года назад

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

@ved0321 3 года назад

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

@briandesign 3 года назад

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

@ved0321 3 года назад

@cmartinez89 thanks for letting me know, though i do have a good hand on js :)

@miniwolfy9782 2 года назад

Navbar isn't showing when i click the icon, i think I'm missing a script file or something, using React.JS

@jorkendavsam 2 года назад

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

@ryrillo 3 года назад

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.

@makanmusty 3 года назад

do you have a link where I can see / download this code?

@Hakunamataaa 2 года назад

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

@javadmohammadi3943 3 года назад

did you use the router and link this video,when I click the item navbar go to another page ?

@sapphiresky9603 2 года назад

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?

@poto1126 2 года назад

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 "

@Nrzgarcia1071 4 года назад

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

@briandesign 4 года назад

Nice! feel free to checkout the new react navbar tutorial I made using hooks and router

@sunilkalikayi1093 2 года назад

can you tell which background theme you are using?

@webosta2841 2 года назад

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

@NoureddineBahi Год назад

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

@priyanshuagrawal8899 2 года назад

Hey Brian, Can I get code of this tutorial?

@ProgrammingWithOsku 3 года назад

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 ?

@somethingclever_8 3 года назад

do you happen to have the code saved in github or anything? I'm following along but something is different and i keep having to go back in the video.

@WirelessBhai 2 года назад

yup, did you get the code ?

@prettylegit0101 3 года назад

//i'm still a noob at react. isn't react moving away from classes since function can have components now?

@ruchikaseksaria7846 3 года назад

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

@Amolang991 2 года назад

is the "nav" tag at 10:25 official tag of react? because I searched what is "nav" tag in google and nothing shows up.

@WirelessBhai 2 года назад

it's from html, so basically yeah we have it in jsx

@leslyjerez2937 Год назад

Awsome tutorial but i came across this error for that says ./src/App.js module not found: Can't resolve './components/Navbar/Navbar

@adinilca6097 Год назад

Hi, I don't know why, but css does not select my menu items..

@studyglobalfaisalabad6289 3 года назад

Hy i have a problem in this when I code in button.js so error come SYLE, onclick is not define can u help me plz

@tadachaipanya6647 3 года назад

const STYLES, not SYLE

@suatbayrak2703 4 года назад

hello brian, i got a question for you. Why did we write those codes are in Button.js ? where we used them ?? we didnt passed anything as props

@briandesign 4 года назад

so we can reuse the button component in other part of our site instead of just the navbar, so if you wanted the button on your main section you would just import the button component. I ended up refactoring a lot of the code in this video and showed a cleaner and easier way to do a navbar in my react website tutorials, so if you wanted to check those out, feel free to see how I made a navbar in those vids

@MrViciousway 2 года назад

Hopefully you see this first(unlike me) He's Creating a Class Component instead of using React Hooks, which was what I was looking for 😭 Not going back to Class components and don't feel like refactoring everything he's doing as I go. So Good luck! I'll keep searching lol

@briandesign 2 года назад

this was my older version, check my react website videos and you'll see it's all with hooks

@trakyrichard 3 года назад

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

@briandesign 3 года назад

yeah all my videos are made from scratch using css

@mbilal02 4 года назад

I want the help of this hamburger menu in the function component. It works fine when I clicked on fa fa-bars it converts to fa fa-times but when I clicked on fa fa-times then it is not converted to the fa fa-bars. I don't know why? Please take a look. //Code// const [icon, setIcon] = useState(false); const handleClick = () => { setIcon({ icon: !icon }); };

@briandesign 4 года назад

did you import both at the top of the file?

@mbilal02 4 года назад

yes

@mbilal02 4 года назад

will you help me?

@andrewrosas5352 Год назад

Hello I have followed this video and done exactly what he has done but once I reach where he first shows the nav bar around 25 min all my code runs and the react page is just blank. I do not know what it could be that would make it wrong and how to change it

@maliabadziukh711 Год назад

Have you figured it out? I have the same issue

@andrewrosas5352 Год назад

@@maliabadziukh711 no I’ve been watching other videos on it but still can’t seem to figure it out.

@michealcheaib780 2 года назад

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?

@AirNorthOne 2 года назад

You are awesome, clear and concise! Subscribed!

@evimikrouli6354 2 года назад

thanks for this tutorial Brian!! can you tell me which extensions you use ?

@ibrahimkhalid8281 2 года назад

Great tutorial bro, good luck 🤞 I wonder why you created the button component while you can just create it in the Navbar.js file. Just like you did in the Mobile version ?

@ChristopherPhillipsDev 2 года назад

Because then it's reusable in other areas of an app and not just for the navbar.

@arigatogosaimust4938 3 года назад

I have some problems with the menu button. It’s not work but idk what wrong? 😭

@Hytension 3 года назад

what is the plugin that adds the colored bars between your formated lines.

@basterbuddy2769 2 года назад

Please how can i implement material ui's imports into this code. It doesnt work. thanks! onClick={this.handleClick}>

@user-tw7lc1hz9i 3 года назад

Around 42 I don't get anything he types in Button.js, what lessons should I read in order to understand all of that code?

@briandesign 3 года назад

Check my recent react navbar video with hooks. It’s much easier to follow and I show 3 different designs

@SriRam-fn6tx 4 года назад

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

@briandesign 4 года назад

Thanks Sri!

@sreekanthduraiswamysriniva7787 3 года назад

What is the plugin which you are using to auto type some of the sentences? That could be a lifesaver for me.

@raimonhubbard9075 3 года назад

I know Im super late and you might have had an answer by now but if anyone needs it its called "React snippets".

@samueljohndavies 3 года назад

How do I know get it so once I’ve clicked say ‘Home’ it sends me to a new webpage?

@yeager6646 3 года назад

what are u using theme for vs Code ? pls say

@keyinji164 2 года назад

Thanks a lot for the tutorial. Is it possible to make it slide from the top instead of the left?

@yerassylnurlanov5374 3 года назад

how we can realise this navbar by functions not classes. If u have link, please share. Thank u:)

@DGLN9 3 года назад

Can i add this to an existing react js project ?

@nirut9014 3 года назад

How would i add two buttons for example if i wanted add a button for sign in and sign up?

@ajibolaoki5064 3 года назад

for some reason the button isn't picking up the button.css styling and the navbar isn't entirely picking up the navbar.styling

@PapoDeGamerBR 4 года назад

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

@briandesign 4 года назад

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.

@md.wahidulislam416 3 года назад

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

@briandesign 3 года назад

Glad it was helpful!

@wazdm9187 3 года назад

Colors not showing up on the site although I followed what you did. Kindly help, anyone.

@AGriffith 2 года назад

you are killing it man :)

@harishg1135 Год назад

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

@seanjohnson220 3 года назад

Is there a link to your source code?

@danielj631 4 года назад

My nav bar looks great but when I add in the custom button it seems like the button is stretching horizontally through the whole page, i have copied your code line by line and form github to make sure I dont have any mistakes? Any ideas why it might be causing this?

@briandesign 4 года назад

you could wrap your button in a then just add display flex; justify-content: center; then width: 400px or whatever size you want. It's most likely taking the width of a parent container rn

@antonb8687 3 года назад

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

@briandesign 3 года назад

Thanks Anton! yeah I refactored a lot of code since I posted this and made new videos using react hooks and styled components

@chukwudaluayika8324 4 года назад

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

@jyothsnapal7161 3 года назад

How would you add Internationalization to this project? Will you be populating the menu items from translation.json?

@Markenzo 3 года назад

I get this error. What I can do? src\components\Navbar\Navbar.js Line 6:5: 'state' is not defined no-undef Line 8:5: 'handleClick' is not defined no-undef very good tutorial

@cozmonarian 3 года назад

Did you find a solution?

@Markenzo 3 года назад

@@cozmonarian no, search on stackoverflow, but apparently I have all the correct code

@cozmonarian 3 года назад

Got solved stackoverflow.com/questions/66388828/having-an-issue-toggling-the-navbar-icons-from-times-to-bar

@emrahozen217 2 года назад

@@cozmonarian I'm getting this error too, the solution has been removed can you help me

@heavydirtysoul1491 3 года назад

You also have that 5k issue in your VSC. "The git repository at 'c:\Users\User' has too many active changes, only a subset of Git features will be enabled." How to fix it? 🤔

@agat1 3 года назад

Me to :(

@pawelonsky4168 Год назад

What is your vscode theme?

@Tharealkeeters 4 года назад

How would you make it so if you clicked anywhere outside of the navbar it would close the navbar?

@briandesign 4 года назад

you'd have to wrap it in a div that has a height of 100vh, then you'd just create a function to open/close it. It's similar to a modal pop up and how you click outside of it to close it, so if you looked up modal tutorials you could prob refactor their code to work with your navbar

@saimaahmed130 3 года назад

Hey, I'm getting this error: "TypeError: Cannot read property 'map' of undefined" I followed the directions thoroughly but I guess it wants me to define MenuItems, what could be the problem?

@briandesign 3 года назад

check the line in your code where the error states to make sure you don't have a typo

@nathanjeffrey4637 3 года назад

I'm getting the same error with no visible typos. I wonder if there was some kind of change?? Maybe I missed something earlier?

@nathanjeffrey4637 3 года назад

your may have forgotten export at the beginning of your MenuItems.js component

@saimaahmed130 3 года назад

@@nathanjeffrey4637 that is exactly what it was! This is my first time using React so I'm learning as I go ofc. Thank you so much for the amazing tutorials

@moritzhessenberger3765 3 года назад

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!

@parhamd7333 3 года назад

you create with react hock Brian?

@charminarchaupal 3 года назад

why did you use .btn--primary? Why two dashes?

@briandesign 3 года назад

Just preference, doesn’t change anything if you use one or no dashes

@muhammadabdullah-jv1dn 4 года назад

hi Brain, There is a problem I am getting the error of map is not defined.can you solve this..?

@briandesign 4 года назад

check my github github.com/briancodex/react-navbar-v1 and see if your code is missing anything

@angele.t.2528 4 года назад

Easy and clare, thanks from Mexico.

@briandesign 4 года назад

Glad it was helpful!

@dimalavrenov3916 Год назад

Nice work man💥

@Zoli5 3 года назад

Thanks for the clean tutorial, helped me out a bunch

@TheRajmoney 4 года назад

in .nav-menu why do we use the 70vw? shouldn't we align title to the left, and links to the right? rather than increasing the width. its glitchy when i use longer text.

@briandesign 4 года назад

check out my newer react website videos and I refactored a lot of code for the navbar and I used hooks too in the new vids

@TheRajmoney 4 года назад

@@briandesign will do.

@CodeYourselfToDeath 2 года назад

nice tutorial. when did you add the button href for the computer size (regular size) button? I seem to have missed it? side note: address to the repo/files would've been useful

@CodeYourselfToDeath 2 года назад

I used a tag and set the href. Was that shown here and I missed it? or did you go about it another way?

@MrDC-tp8dy 3 года назад

Bro I tried this it works but I'm getting overflow on mobile even I also tried css property overflow but still not working

@tracythorn9040 3 года назад

This guy going off. Great Vid brother!

@usabnd 4 года назад

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

@briandesign 4 года назад

Thanks!

@kenthankgod2619 2 года назад

He's not good, he's fucking good

@ncliphd4162 3 года назад

If I am trying to get rid of the button in the navBar by using: Button{ display: none;} nothing happends. Anyone an idea why?

@ncliphd4162 3 года назад

I fixed it; If someone else has the same problem try in your css-file: .btn{display: none;) instead of .Button{display: none;}

@kenthefley2226 4 года назад

Just curious why you didn't use the useState hook with functional components. Seems like classes are being phased out because they require a lot more code.

@briandesign 4 года назад

This was one of my first ever react vids, so this is the only one I used classes. Every vid after this I used react hooks. I made an update navbar vid too, so it shows useState and react hooks

@kenthefley2226 4 года назад

@@briandesign Ah sorry. I actually saw that after I commented. Nice work. I just found your channel. I look forward to going through your other tutorials. Subscribed.

@achonwachris8431 4 года назад

Hi, let me tell you that I have been on this course for over 48hrs now from one error to another is really hard for me. I think you should push all you coding tutorial to GitHub and put the link in description it will help me.

@briandesign 4 года назад

I posted the github link in the comments

@imamritanshu 4 года назад

bro when we use this navbar in smaller screen it is not fixed when we fixed its shows some issue please help me to resolve it

@imamritanshu 4 года назад

bro its urgent kindly reply me asap!!!!

@briandesign 4 года назад

are there any errors in the console? Also, I made a new react navbar using react hooks in my react website tutorials, so if you wanna check those out they might be easier to follow.

@imamritanshu 4 года назад

@@briandesign bro there is no error in console its just when I fixed navbar for smaller screen toggle nav-links gets distorted

@briandesign 4 года назад

@@imamritanshu you might have to customize the css then to make it fit

@nihelboujelben2478 3 года назад

Easy and clear video, but can you help me how to add search bar

@Raggii 3 года назад

How do I do this on the right-hand side???

@vagnerfonseca100 3 года назад

How cold I change the color of the bar? for an exemplo, when I click on the bar, and the button become a X, I would like to change the color of the icon X

@briandesign 3 года назад

you could create a function that updates the style of the icon, so if it's clicked then it would add an active class that changes the color

@vagnerfonseca100 3 года назад

ok cheers!!

@vagnerfonseca100 3 года назад

@@briandesign perfect I will try it, if I can ask another question, how can I do, for the menu, instead of come from left side, come for the up to down?

@briandesign 3 года назад

you can change the values from left to just top and '-100%' to '0%' so it's just css styling for that

@soklin 3 года назад

Source Code: github.com/briancodex/react-navbar-v1

@bipon68 4 года назад

Already seen your react videos. So easy explanation. Easy and clear, thanks from Bangladesh.

@briandesign 4 года назад

Thanks Bipon!

@sadafzillani9691 2 года назад

I have copied you whole code line by line but there are many problems which you haven't solved. Like if i hover the mouse in the white area under the navbar the menu items are there which shouldn't be there unless we click the menu bar button when screen size is reduced.

@rizkhad9688 4 года назад

Can you write the sign like "*" in the app.css. I cant find it on my keyboard and google. Thank you

@briandesign 4 года назад

I don''t understand what you mean? you just wrote it in the comments?

@rizkhad9688 4 года назад

@@briandesign I thought it's another sign, because when I put *{}. It goes error. But when I put *App{}, the error gone.

@philpchukwu8547 4 года назад

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.

@briandesign 4 года назад

a few asked and I linked the code in the comments section

@No-tt2tz 4 года назад

So we will have different file for Navbar? Similarly we'll have different one for footer and main,etc? Can't i make navbar in the main index page? Can anyone explain?

@briandesign 4 года назад

depends how you wanna structure your project, but check out my recent react website vid and you'll see how I put everything together there

@No-tt2tz 4 года назад

@@briandesign I was trying to make a simple navbar with tag in react (without applying any classes or bootstrap) but it isnt working...dunno why! But the same code is working in html file without react and all