Creating a Navigation Bar with Next.js & Tailwind CSS: A Step-by-Step Guide

hey what's up guys today I'm going to show you how to make a navigation bar using Tailwind CSS and xjs okay so the very first step we're going to do is we're going to create an xjs project I'm going to do that by using my command terminal and we're going to CD into the folder where I usually keep all of my projects and you can follow along with this process if you go to Tailwind CSS um in their Docs so the very first step is we're going to create a next application and we're going to do the latest version which is next js13 we're going to go the terminal we've copied paste it we're going to name the project nav bar practice and then enter it's going to ask you a few questions here and prompt you if you want to use typescript I'm just going to put no if I like to use ESL I'll put no as well would I like to use the source directory or it's going to be do you want to use the app directory the app directory is the new thing for next.js13 or the source directory is what everybody's used to so I'm just going to put yes for this since this isn't an xjs13 tutorial it's just a navigation bar and how to create it so what I like to use the experimental app directory I'm just going to put no and I'm just going to press enter again it's going to create my next JS project it was a success so we're going to CD into the project which I call it nav bar practice and then I'm gonna do code space period and this will enter me into my vs code editor right here okay after the Project's been created we're going to install tail and CSS you could just follow the docs step by step I'm going to do them real quick so we're gonna be on step two we're gonna copy and install Tailwind CSS the code I'm going to upload on my terminal inside of here copy paste it enter so for us for installing the Tailwind CSS then we're going to initialize Tailwind enter and this is going to create a tail whale Tailwind config file right here on the left side and then that's what we're going to go in next we're going to go in here and we're going to add stuff in the content array so we can just copy and paste all this light blue stuff here and we are using the source directory directory so make sure you do copy and paste that as well so we're just going to replace it right here and then paste perfect you can keep the app directory it's not a big deal it's not going to break your um project or code and then next we're going to go on the global.css file and we're going to actually initialize Tailwind CSS inside of CSS files and so that we actually could use it in our application so everything in the global CSS we're going to delete then we're just going to copy and paste these three lines of code here after we're done with that the tail 1 CSS process is done so we're going to test it out we're going to run the dev and development so we're going to do npm run Dev is going to open up on a local host usually 3 000 of Mines 3001 because I already have something else run you're going to see this page it usually doesn't look like this but since we deleted some stuff from the global CSS file that's why some of the stuff looks missing and we're going to test the Tailwind CSS but first let's go into the pages folder and then we're going to go in the index.js and we're going to remove everything here we could even remove the head it's not a big deal all we're going to have is the fragrance so make sure you keep the two fragments the opening and closing and then we can go back to the Tailwind CSS file and we could copy and paste this to test our code to make sure it is actually installed correctly so there you go so the Tailwind CSS the syntax is actually inside of the jsx but as shown instead of actually creating a class name all the stuff we want is right here so it's easy to view and if you're new to Tailwind CSS it does look like it's going to clutter up your code but you do get used to it and I feel like it is a lot easier and better to code because you can actually see what's going on with every class instead of going from file to file so this does look like it works um if I remove underline as you can see in the code underline was removed so the CSS is working correctly okay now let's set up the app and actually the nambar component inside of our project um go to the base layer of your files and folders and we're going to create a new folder and we're going to call it components and then inside of the components we're going to create a new file called navbar Dot jsx and now I'm gonna do r-a-f-c-e which is going to create a react functional Arrow component instead of typing the code itself and then I'm going to go back inside of the index.js and this is going to act as our home page we don't need the Styles anymore so we can remove that import we don't need the image right now at least we could leave the next font Google to enter that's just next Js and then we're just going to remove the hello world we'll remove the H1 as well and then we're gonna import that component navbar inside of the index.js and now it's going to pop up right here and it auto imported for me so if it didn't Auto Import for you make sure you import the nav bar now we're ready to design and create our responsive navbar in Tailwind CSS and xjs okay so let's actually start getting into customizing creating the navigation bar so all we have right here is a single div we're going to take that out and we're going to put a nav HTML element and then we're going to start styling this and this is going to be the Baseline of our navigation bar so first we're going to add fixed because we want to always fixed at the top of the um screen no matter how we scroll the width is going to be four the height will be 24. and so we could actually see the navigation bar we're gonna have a shadow of XL and if we look over here to the right I gotta spell it right we look over here to the right you could actually see the navigation bar taking its shape um tail one CSS is also mobile responsive first so we're gonna check mobile tablet and desktop but Tailwind is pretty good with sizing them how they should be without us doing much legwork and we're gonna have just a background of white even though it's already white just to make sure okay so the navigation bar we're gonna have right here on the left a logo and then on this right side over here we're just gonna have the menu list it's going to be a simple navigation bar you can style it how you want but that's how we're going to create this navigation bar and then when we're on the mobile phone we're gonna have a hamburger menu here at the top right the logo is still at the top left and then when you click the hamburger menu a different menu is going to pop up from left to right and it's going to have the menu list items as well and then you should be able to close it with the X so let's create this and kind of set up the Baseline so first we're going to have a div that's going to cover the left and right it's going to be on the outside of the left and right side then we need two divs inside of this so we could do div times two and this will be left side and then this will be right side and they're going to be on top of each other because nothing has been styled yet and if you do want to left side and right side right next to each other all you gotta do is just type in class name flex and it'll make it as a flex row automatic so we're going to style this div that's surrounding the left to right side so let's do that first first like I said we're going to add Flex so it's going to go side by side we're going to justify between which means we'll have one on the left and one on the right there you go another thing we're going to do is we're going to have the item Center but then also it's not going to move anything because we need to make sure it's taking up the full width and then the full height as well so the height full it should go to Center there you go and then with full as well after that we're gonna need padding because it's right here up against the side on the left side and right side so we need a px of two so it gives a little padding on there we could actually do PX of four and then on two XL screens we could do a px of 16. and two XL screens is doing a media query if the minimum width is 1536 pixels so we do all of our media queries until when inside of the class name we don't want to do app media query so it makes it really simple like I said earlier people don't like Tailwind because everything seems so disorganized in a sense but after you start doing it a lot you actually started liking it and I actually do enjoy this a lot better than just regular CSS files so the next thing we're gonna do is we're going to have the left side so we honestly we don't need a div we can just do the image tag and the image tag is written like this in next.js and it needs to be imported at the top so that's what we just did there and I'm just going to copy and paste all the attributes that are within an image tag so you need a source you need alt tag you need a width you need a height a class name is optional and then priority is optional as well so we need to actually import the logo which I already did inside of the public folder and it's called logo.png so we need to import it into our file right here dot slash public it's in the public folder and then it's called logo.png there we go so as you can see that's how the logo is on the top left and then we also want to make it clickable even though it shows curse we want to make it clickable where it goes back to the home page so we're going to wrap this with a link tag which we have to import it from next slash link and it is going to be an href and we're just going to go right to the home page and we're going to wrap this link over the image so now every time you click this it should just go back to the home page okay now we're done with the left side pretty simple now we're going to work on the right side and the right side is just going to be a bunch of unordered list and list and the inside of that we're just going to style it and we're also going to wrap each listed item with a link so instead of me writing it out real quick let me just copy and paste whatever you wrote beforehand and I'll explain it as well So within this div which was on the right side as you can see we have unordered lists wrapping all the listed items and then we have a link tag surrounding the list of items and each listed item has a class name with different attributes so you could either do margin left or margin right depending on which one you do and I'm doing margin left of 10. and that gives the spacing between all these menu lists or you could just go on the unorder list and do a gap of like four or five or six whatever you think looks best and then also we made sure was uppercase and then also if you do a hover semicolon so that means every time we hover one of these listed items which is Wireless we get a border at the bottom so as you can see you get a faint border at the bottom right there and you could change that Border's color the width how far down it is etc etc so we're going to keep it like that for now and the next thing we're going to do is right below the right side div we actually want another div right below that reason why is because we actually want to now add the hamburger menu which is going to be shown on mobile screens so I'll show you how to do this and it's very very simple so first we're gonna have to use a um Library called react icons pretty popular and pretty well known I already downloaded it as you can see here in my package Json it's right here react icons all you have to do is press npm install react Dash icons and then we're going to use this one over here we are going to use import curly braces AI outline menu and this is actually the hamburger menu from react Dash icons and then we have to go into a folder and it's AI since those are the first two letters it's always like that so slash AI and I created the new div down here so that means I'm gonna actually just copy and paste whatever you have here and there you go as you can see the AI menu outlines there and we're getting an error here because I have a handle nav so if you want to click on a button when using react I mean this is basic right here is you have to change the state of the application and the only way you can change the state of an application using react functional components and functions is by using the use State hook so let's just import that real quick so import curly braces use state from react okay so now we could use the use State hook and for every time we click on the AI outline menu we are going to call the function handle nav and it's going to be an on click okay so we're gonna have to create this function right above the return but inside the nav bar handle nav and this is going to be a cons we're going to make it an arrow function and the inside of the arrow function we need to change the state so we're going to add State here and the state is going to you should name State based on what you're actually doing with that state so we're going to pretty much open and close the menu or navigation so we could call it like this we have an array and we put menu open comma and then set menu open this equals use state and then we need an initial value inside of this parentheses right here and it's going to be false because we don't want the menu to be open which is going to be the mobile menu so the set menu is actually going to change the state of whatever the menu open is every time we click the handle nav which is going to be the hamburger menu we're going to set menu open to the opposite of menu open okay so for the first time we click it it's going to become true and if we click in false true and then false true and false it goes back and forth so now we have no errors on our screen everything looks good and the way we're going to get this not showing like you can see you don't see it here right the reason why is because I made sure on mid-sized screens and up we gave the attribute of hidden so that means you just can't see it all if I scroll the screen down though you're going to see it but then you also still see this as well which we don't want to happen so we're gonna have to change that as well and then inside we could do it right here so the div actually covering all of the list of items here we're going to have a class of hidden and it's going to hide them for now but then we could do on small screens and up we could do this as a flex so this means it's just going to show again as a flex row and then we could change the small screens as well which is 640 pixels which is good for mobile menus so if we scroll back down that should be hidden and then there's the menu right there perfect if we look at it here that's how it looks on a mobile phone looks pretty good okay all right so that's the navigation bar now we're going to work on the mobile side and then we should be done here with the navigation bar I hope this isn't taking too long and you're not bored of me talking but if you're getting any value out of this I would really appreciate if you could hit the like button and also subscribe to my channel I'm going to keep coming out with videos two to three times a week especially front-end videos so if you like that definitely subscribe but let's get back to it so next we're gonna have to create the mobile menu and we're going to do that right below the div that's encompassing pretty much the desktop so we're going to create another div right down here but still inside of the navigation because we do need a parent element and then these are all children and then what we're going to do here is we're going to do a ternary operator so that means if this is true then you do this and if it's not true then we do this so for a class name we can do curly braces which allows us to do a ternary operator inside of our class name so menu open which is our only state right now so we're going to say if many open is true so let's space this out even more if menu open is true which is the question mark we're going to have this class right here we're going to keep it fixed we're going to have a left of zero top zero width is going to be 65 percent on small screens and up we're going to have this hidden because this is a mobile menu only we're going to have the height of screen because we want the whole thing to come out completely showing the whole screen and then we want a background that's a little darker than the white and that's going to be e c f 0 f 3. Bang we're gonna have a padding of 10. and then ease in which every time it comes in it's going to ease in and then we're gonna have a duration of 500. and that's 500 milliseconds it takes to come in okay now it's still giving us an error the reason why is because if we do a true statement with the question mark we need and also a false statement so if it's not true so if it's not true we're going to make sure it's off the screen the mobile menu so let me copy the class real quick and paste it it's still going to be fixed and the left is going to be negative 100 so it's going to be all the way on the left side negative 100 the Top's still zero the padding's ten and we still want the ease in and stuff to come in smoothly as we go in and out so we're going to test this out real quick so we have the mobile menu here and like we said the initial state oh this hamburger menu is false if we click it it'll become true which will activate this class right here that we just created on this line right here so let's try it Bang see it's a little darker it takes up 65 percent width the height is the full screen and if we click this again for now it should become false and then it will become this class right here it'll go all the way to the left negative 100 so that looks good to me that's good let's separate this out and then we also okay so we're gonna work on this let's work on this real quick so when this is open we need an X right here usually at the top right so we can exit out of this navigation we're going to have the listed items again and then we're just going to also do some social media icons as well right down here so I'm going to copy and paste some of this and I'm going to also explain what I'm doing when I do it so the next thing we're going to do we're going to do the first step right here at the top right we're just going to be the AI outline close from react icon so we're going to AI outline close there it is so it's imported and now we just got to use it so we're going to have a div right below this and then another div inside of it so as you can see it popped up right there and then inside of this div the first div right here on the top we're gonna have a flex width is full so the width is full of this items will be Center and then justify and create this always and like it is right now and then inside that we're gonna have ai online closed with the on click of handle nap which will change to the opposite of whatever it is so if this is open it's obviously true it's always going to change it to false and the cursor is going to be pointer so there we go so we go like this like this this this so there goes the mobile menu working perfectly as it should and then the next thing is we need all of our list of items right here which is like the about the home the contact the services etc etc so we're going to have another div wrapping all of that with the UL on order list and the list of items within there as well so it's going to be right below this right below this but inside of this main div right here so as I copied all this again we have this main div and we need to create this main div as a flex column because if you don't do this they're just going to be side by side left and right we need to make sure that the home the about the contact the services is in a column so that's why it's effects column and then we have a padding on the top and bottom a 4 which is 16 pixels or one room and then also each list of items also has another padding on the top and bottom of four and you can also do Gap Gap will do the same thing or padding either one works for you and then each listed item will actually close the menu so it's going to take you to the page right because it's surrounded by a link tag so whatever it is so this could be slash services this won't be slash contact slash about and then home will be slash so we'll take you to this page and then it will also set the menu open to false because the only way you could click these is if it's true so we're going to set default so you click one closes but this page can't be found because we haven't created the bow page so there's that and then the next thing we're going to do is which is the last step is we're going to have social media icons right down here and that means right below let's see which div so we're going to have it inside of this div still and it's going to be below this dude so we're gonna have another div right here and that means we're creating content in this space right here and we're also going to use react icons and I can just copy and paste this div and then I'll import all the icons we need so we're going to have ai outline Instagram AI outline Facebook and AI outline Twitter each with a size of 30 and then it's going to be surrounded by div with the class name of flex each one's going to be in a Rel this time so straight across justify around which means it's going to have each space even on the ends pretty much the same even spacing between each thing padding top of 10 and then the items will be Center and let's import these because that's why we're getting an error so we're going to have a i outline is it Instagram AI outline Facebook AI outlined in Twitter okay so no errors now I'm going to click this and there's our icons right there you could also change the colors um you could literally do whatever you want to it tl1 CSS has a lot of features that you could definitely use um and let's just make sure that that's everything I want to do and then I guess after that we can add our logo again because that makes sense so I'm just going to copy and paste let me actually take the logo from up here so we're going to copy the logo again and then we're going to paste it right below this div which is this into here and there we go Westwood media and then we can do a class name padding top let's say eight and it moves it down maybe too much padding top of six that's pretty good so that should be it for the navigation bar now we have a fully responsive navigation bar um that's for an iPhone 12 Pro that's how it looks let's look how it looks on a tablet it's iPad Air looks pretty good iPad Mini looks pretty good and also too like on an iPad Mini if you want everything in one line you could just change the text so it was a 768 pixels so you can go up here and then in each listed item so this is going to be for the wireless you could do a text let's say small let's see how it looks so it does move the text down but I also have text Excel so you just got to mess around with the class settings to get each thing right but we'll just keep it like that for now looks pretty good NASA Max looks good let's just do responsive everything looks pretty good so this is your basic navigation bar should take you about 20 minutes to create maybe this video is a little longer but it's pretty simple to do I'll put the code Down Below in a GitHub file in the description of this YouTube channel if you have any questions don't hesitate just ask them away in the comments section I'll get back to you hopefully within 24 hours um I'm gonna also come out more videos and I'm gonna try to create a website around this navigation bar so like I said please subscribe and also like this video if you got any value out of it and thanks for watching

Channel: Brett Westwood - Software Engineer

Views: 19,490

Keywords: NextJs, Tailwind CSS, Navigation bar, web development, Javascript, HTML, CSS, Tutorial, Step-by-step guide, User interface, front-end development, web design, utility-first CSS, Links, Active States, Tailwind Navbar, Create a navigation bar in React, React Navigation Bar, NextJS Navbar, Create a responsive Navbar, Responsive navbar

Id: 8s4DK5PkRNQ

Length: 30min 51sec (1851 seconds)

Published: Sat Feb 04 2023