Headless UI - Build A Drodown Menu in React Using HeadlessUI & Tailwind CSS

hey what's up guys in this video i'm gonna show you how we can use a really really cool tool as front end developers called headless ui so what is headless ui basically it is a fully accessible ui component library that is designed to work with tailwind css so this is what we're building this cool little drop down menu right there so and this is in react.js normally in react you would need to use like the use state hook and functional components or some sort of state to manage the drop down of your menu but this is handled underneath the hood and in a headless ui so there's a lot of really cool things you can build headless uis designed for react and view and it is works perfectly with tailwind it's designed to be used with tailwind css in fact so we're going to be focusing on this drop down right here but there's a lot of really things you can do i encourage you to check all these things out but in this video i'm going to show you how to do the drop down menu and we're also going to do some extra customizing so you can use it over here on the side in any other spot in your menu and i'm going to show you how to customize it completely so without further ado let's get started all right you guys here we are in vs code all i've done is create a basic react application and i've started up my development server so i'm using yarn you can use npm if you want to doesn't really matter so as you can see my development server is running now first off what i want to do is just to clear some things up a bit so it's easier to read i'm going to delete some files so the app.css go and select that the app.test the logo report web vitals and the setup test i'm going to delete those you don't have to if you don't want to but i'm just going to make this a little bit easier to read for all of us so it's going to give us some errors that's cool don't worry about it let's go into the index.js and we'll take care of those errors just got to remove the report web vitals there and that is it for the index.js we're done with that now for app.js let's delete all this boilerplate code we're not going to need any of that and then we don't even have to do this but i'm just going to import react from react okay now what i want to do first is let's go ahead and install tailwind css so let's cruise on over to tailwind right go to tailwindcss.com so let's go ahead and click get started and we're using react framework so let's click the framework guide and there is react right there so first it wants us to create a react application we've already done that so let's go ahead to the next step now i'm using yarn and um i'm not i'm gonna leave out that d there so and let's go ahead and open up another server here or another terminal and i'm gonna say yarn add let's go ahead and install that and then next we're going to grab this npx tailwind css init and by the way mpx is different than npm so just throwing that out there you guys so what that command is going to do is install our tailwind.config file right and we need to paste something inside of this content array that is the next step right so we need to just paste this line right there and we're going to paste that inside of the array and that is all we need to do in the tailwind.config file so we can close that the next step is to add our directives here to our index.css file let's open index.css and we're going to replace all that customs or the just the boilerplate styling and from create react app so i'm going to be using a black background so i'm going to go ahead and apply that right now in the body i'm going to say background color black like so okay and that's all we need to do for tailwind so for the creating of tailwind but we do need to restart our server otherwise tailwind won't be working properly so let's go ahead and next create our navbar um component here so i'm just going to create this inside of my source folder okay rafce is going to generate our functional component so let's go in here and import that nav bar there we got an option to auto import if not just make sure you manually import it at the top and so we have some text in here you can't see it because it's black so let's go ahead and uh add in some styling in here using tailwind so let's give it a class name right i'm gonna say with full which is the equivalent of saying a width of 100 percent and i'm just going to say text white so we can actually see what we're doing here so we should see some text in here there we go where is it at oh wait wait server hasn't been started back up yet there we go and i'm just going to say react right there it's going to be my little logo so now we see it there we go so width is full which is 100 and next what i want to say is give it a height of i'm going to say h20 which is 20 or sorry 80 pixels five rim and we're going to display this as flex then justify between and we'll say items center okay and then i'm gonna say px8 whoa px8 to just give it a two rim padding on the sides okay so that's what we want right there now for this h1 i'm gonna give it some sizing i'm gonna say text 3xl um font bold that's actually a little bit big i might drop that down a little bit i'm gonna say two then i had a really cool color i'm going to copy in for you guys this is actually part of a larger build that i'm doing i just want to share how we can use headless ui i thought it was really really cool i thought i'd make a really quick video it's going to be a short one so this is what we're doing right there perfect that's what we like now next let's go ahead and have our uh ordered list here and we want this to display as we wanted flex and we'll say items item center there now for our li we're going to have oh i'm going to go back here we're going to say services and then what all i say here services banking company then resources okay so let's just copy this down we're gonna have services and then banking company and then resources perfect now we don't need this last one and this one right here i'm gonna delete that right so go ahead and give that a save now let's go ahead and this is a really cool trick you guys i'm gonna hold down the alt button here so i can oh damn it i'm gonna hold down the alt button so i can select multiple lines to type on and this saves a lot of time so notice how we can type on multiple lines and what i'm gonna say is px4 you guys probably heard that already but in case you haven't now you know so inside of this list item right we're going to start using her headless ui dependency so let's cruise on over to headlessui.dev okay and like i said a lot of really cool things you can use from react and view obviously we're using react.js for this tutorial and we're going to focus on this drop down right there so this here it is this is what we're going to be creating something very similar to that so and what's really cool about headless ui like i said it is fully accessible so we're not going to be having to use like the use state or anything like that and also a good thing it is completely unstyled right so it just allows for so much flexibility in your projects so you can basically style it however you want so what i want to do is grab this yarn ad right so i'm going to go ahead and install let's have a look and sorry look in the where is it there it is hovering right over it so headless ui has been installed that's what i wanted to look for right there now we could just copy this in but we'd have to add in all our custom styling which i'm going to show you how to do but what i first want to show you how to do is use that a style tailwind component so go to tailwind ui.com not tailwind css but tailwindui.com it is uh tail 1 css but what i want to do is go over here and this has some really cool things so a lot of these are most of these are paid you have to pay it's like a few hundred bucks to the for the year but what i'm going to do is um grab some of their free ones right so i'm going to go down here to the bottom this one right here is a button right oh not button groups this is drop down right there so this is what i want to use and so like i see this first one is free it lets you have access to the code once you scroll down you get into a little more intricate it wants you to sign up for the membership but i'm not going to be doing that i'm going to use the second one to have these little dividers there so let's go into the code right and i'm just going to highlight that from menu all the way down to menu okay and we're going to paste this inside of the list item but we're going to get tons of errors because it's using things like hero icons and it's imported things a lot of things that we don't have so that's fine what we need to do let's address these problems menu is not defined so what we need to do is import menu and menu is um is actually from headless ui so we'll save from headless ui react okay and it's also going to be looking for the transition so let's put that in there transition is really really cool i'm going to show you how to use it you don't have to use it if you don't like to but it's super awesome i'm going to show you how to use that so also once this fragment so let's go ahead and import fragment and i'm going to show you what all of this stuff is you guys so fragment and then it's also using it's using the hero icons so let's import we'll say import and it's using the chevron chevron down icon there we go from and it is from hero icons slash react and we're gonna have to say slash solid for this one i believe now class names is not fine we need to add in um so this is a function that we need to use so if you look at this first one whenever we drop down i'm not sure if you can see it on the screen but you get a real faint a gray as we hover over all these except for this one this one's disabled and i'll show you how to disable links as well so what we need to do to use that is scroll up to the top here and that's just a really cool feature that tailwind's giving us right there so i'm just going to copy that and paste it in here at the top boom there we go so let's see if we have any errors we still need to install our hero icons so let's install that i'm gonna say yarn add and then i think it's just uh at hero icons slash react i don't think there's a dash in there we'll see if this is working for you guys oh there we go perfect so that is what we want boom there we go so now it should work right off the bat so let's just go ahead and click that too dude that is let's open this up that is awesome right there you guys check that out so that's how easy it is to install a button with uh this is a tailwind ui component using headless ui so they're both integrated with one another and that's how easy it is you can just go in here and set up your links for example the options and you can change all this so this is options or we could say something like account and that'll switch that right there and that is in the menu dot button so if we go to headless ui how it breaks down let's see how we can show you here how it breaks down has a a it's surrounded by a menu right and i'm going to show you how to do this in fact let's just go ahead and create one from scratch okay so let's go in here i'm going to show you how to create this from scratch with headless ui without the tailwind ui component so let's go into say this services just like we want to have a little drop down very similar let's create that right now so let's go into our services right and i'm just going to actually delete the services so this is going to be inside the list item element here and what i want to say so headless ui wraps everything in a menu it's going to be capitalized just like so okay now in our menu it's going to have the menu button and so it's menu dot button there we go and inside here is what we want our text to be just where it says account so for in this case i'm going to say services and what i want to have in services here are these two links down here right and also right here when we put where we put services we don't have to wrap this in a p tag or an a tag or anything like that we simply put some text in there so after the just under the menu dot button what we want to do next is we don't have to do this but i'm going to add in the transition so i'm going to throw that down there and i'm just going to paste in the same transition properties as the tailwind ui component jared just for simplicity feel free if you want to get get creative with it and customize it that's awesome but i'm just going to paste those in there for the sake of this video now underneath um actually wrapped within the transition okay we need this wrapped in transition what we're going to have is menu items okay and then in here we're going to have a menu to item this needs to be capitalized there we go so what we want to say and we have to wrap this part in a whoops in a p tag here other or an a tag i'm just going to use a p tag here for companies so now we should see this in here um i don't think we don't have anything styled so there you go it looks kind of funky but you can see the actual javascript under the hood is actually working so that's really really awesome you guys by the way smash the like button if you're getting some value out of this if you're learning how to use headless ui for the first time smash the like button really really awesome stuff we can do here so okay how do we get this thing all styled up so for this i'm actually going to copy this over for um just for simplicity to take here so for our menu i'm going to throw this in here and we actually we need to add as then in quotes here div otherwise it won't be working properly similarly how we use the as fragment here on the transition so now we have that let's go on and for our menu button we actually don't need to um we're not i'm not going to style that for this here in fact i don't want to border or anything like that so i'm just going to leave that as is now for the menu items let's style that so the menu items you can kind of think of as the actual drop down so this is the menu items everything is wrapped inside that so let's grab the menu items like so so i'm just going to copy all of that i'm actually going to delete a lot of it or part up we're going to delete part of that so let's go up to our menu items okay and this is the class name i'm going to paste that in there so right here next to the divide i'm going to leave the divide by this opacity 5 the ring ring black all that i'm just going to delete all that there we go perfect so go ahead and save that's going to format everything nicely for us now next what we want to do we need to add some more styles and what i want to add in here to get this hover effect right we're going to have to add an arrow function in here so and it's all configured with with headless ui so don't worry it's super easy so instead of i'm going to just replace this p tag in fact i can just i'm just going to cut it right so inside the menu item what i'm going to say is what it's going to be is open up some brackets here so we can use some javascript and it's actually going to be an arrow function and it's going to output the p tag so in here inside of our arrow function it's going to take in i believe and active let's see here so basically we could just copy this so in fact let's just copy that right just to make it easy so i'm just going to copy that right there i don't know why i was going to write it all out for you so i'm just going to paste that in right there and in here we can just say for companies because i wanted to say for companies and then also for um for investors right let's copy that down so for companies or investors so next i'll say companies or investors and let's see how it looks boom so i went this so over here it looks great right since on the far right of the screen over here we want it to be positioned on the left so let's cruise up to our menu items right remember this box is the actual menu items so origin top right absolute right zero this is what we need to fix we just need to change that simply to left 0. boom there you go so that is how you use that's how you kind of customize some styling so i just noticed whenever we hover here you see those square little edges that's a bit ugly that's not what we want so how do we fix that to where like this this button over here we don't have that on the on the edges so what we can do for that i wish i could leave that so we can see what we're doing so what we can do for that we're just wrap the menu items i'm sorry the menu item of all of them within the menu items i'm just create a div and i'm just going to give this a class name of p p y one and what that is saying is padding on the y axis up and down of one which is point two five rim and bo all of our menu items within the menu items block i'm just going to move that up one i just hit the alt button and just press it up arrow and that moves it all up together at the same time and what that is is within this py one so now there's just a little bit of padding as you can see so let's put this up full screen here boom there we go really really awesome stuff here we have the account that we brought in from tailwind ui already pre-styled we just copied everything over that's how easy you can get started using headless ui and tell ncss you guys so so easy we save so much time opposed to writing all this you state and all this custom css so that's how easy that is and then we just did a little quick customization so we can use a drop down over here and we just copied most all the same styles so that's how easy this is you guys smash the like button if you got some value i hope you did and real quick if you want to see how we add this like see that delete if you want to make one of these buttons here disabled all you have to do is let's go into our code here i'm going to drop that down a little bit let's go into our code let's find that delete if we want for example this delete right there let's go down and find delete now in this menu.item all you have to say i believe is just disabled and let's see that's just a boolean value so yeah there you go so now you see when we hover over it you still click it but nothing happens we hover over everything else you get the background and stuff happens when we click on it so i'm going to bring this open just to recap what we did so basically we wrap headless ui for our drop down menu we wrap everything in a menu right and then we have the menu button which is the text or an actual button and then you're going to have the transition now you don't have to have the transition but it's a really cool feature to have if you are going to use the transition make sure you wrap the remain the remaining elements inside the transition so we have within the transition we have the menu.items and then within the menu.items we have the singular menu dot item there and if you want to have that hover effect make sure you just copy over that little arrow function and this is really really cool trick that i didn't know so basically we're using just a ternary operator right so basically we're looking we're checking to see if this is active and if it is true we're going to display the background gray the text gray else we're going to just display text gray 100 but what this comma does after we can after the comma we can add in some more styling and basically that says apply this here to whether it is true or false just apply it to both so really really cool feature i didn't even know about so learning stuff every day thanks for following along you guys i hope you liked this video if you did make sure you smash that like button helps the youtube algorithm i'm trying to grow the channel here and be sure to subscribe to my channel and we'll be putting out some more react content just like this in the near future in fact this is kind of like a prelude to the next the next video i'm fixing to drop so thanks for watching you guys smash a like button and i'll see you on the next one

Channel: Code Commerce

Views: 27,279

Keywords:

Id: hwfiYvzH9s4

Length: 18min 36sec (1116 seconds)

Published: Sun Apr 03 2022