Okay, let's take a look at Headless UI. Now, there's already a Larabits episode that goes over basic usage, but in this series we'll go into more depth and style some of the components with Tailwind CSS. If you haven't seen the Larabits video and you're not familiar with Headless UI, it's a library that provides completely unstyled accessible UI components. The functionality is already provided, and you bring your own markup and CSS, which allows you to style it in any way you like. So we'll make use of Vue components here, there's also a React version, and we'll start with the menu drop-down here. So I have a brand new Vite app here, and the only thing I've done is install Tailwind CSS.

with the menu drop-down here. So I have a brand new Vite app here, and the only thing I've done is install Tailwind CSS. If you're not familiar with that process, just head to the Tailwind docs and follow these instructions here. And before we install Headless UI, let's just make a few changes to our app here. Let's open up this, let's get rid of the default here, let's make a container, let's make it text-centered, let's put some text in here, and let's also get rid of this script setup and the import, and all of this stuff, okay. Actually I want to wrap this in another div, which has min-h-screen, so 100 viewport height, and I also want a background of gray-200, and let's give it a default text color, okay.

Actually I want to wrap this in another div, which has min-h-screen, so 100vh, and I also want a background of gray-200, and let's give it a default text color, okay. Let me get rid of this sidebar here, we'll be mostly working in this one component, save that, okay. And let's go ahead and make an h2 here, say font-bold, and let's make it slightly larger, text-xl, and let's say menu-drop-down, and let's also give it a slight padding, and let's give the container a padding as well, okay. So let's go ahead and install Headless UI, and take a look at the menu component here. So we'll try to style it similar to what you see in the example here. So let's go ahead and install Headless UI Vue, okay.

So we'll try to style it similar to what you see in the example here. So let's go ahead and install Headless UI view, okay. Let me start my server again, and let's take a look at the example they have here. So as you see, all these components are made up of sub-components, so in this case, these four sub-components, which are pretty self-explanatory. We have a wrapping Menu, we have the Button that toggles the menu, we have a container for the menu items, and we have the individual menu item. So let's grab this, and put it into our template. So right after our h2, I should have set up prettier here, so it automatically indents, but I don't have that set up.

So right after our h2, I should have set up prettier here, so it automatically indents, but I don't have that set up. And as you see, it is using Tailwind classes here. So we'll see what we get without doing much work, but let's make sure to also import the actual import and the components key. So let's grab all of this, let's go into our script, let's paste that in, and let's see what we get here. So this is our button, it's not styled. If we open it up, we do have a dropdown, but it's completely unstyled. So I believe the hover, which is the active key, does work, and this one is disabled,

If we open it up, we do have a dropdown, but it's completely unstyled. So I believe the hover, which is the active key, does work, and this one is disabled, so it's not showing that blue background. As you can see, we have this disabled prop here. So again, this is our menu button here, we can style this however we like, and we have our other subcomponents here. So let's take a look at a few options here. So for most of these components, you can pass it an as prop, and give it an HTML element name, and it will render as that element. So for example, if you wanted this as a ul, and the menu items as a li, then you can

I think most of them are divs by default. So let me just remove that. And the other thing to take note of is this v-slot here, which is scope slots in Vue. And what this does is expose some important information that our consuming component needs in order to style it or in order to make it work correctly. So in this case, it's exposing the active property to tell this menu item if it's active or not. So we have a conditional class on that, and it's styled as a blue background if it's active. So that's what you get when you hover over it, or if you use the menu keys. So that's another thing that Headless UI provides.

And you can also start typing, and it will go to that menu item. And you can press space or enter to select that menu item. So all of that's done for you already out of the box, which is great. But now let's take a look at styling it so it looks decent. So let's start with the button here. So that's this button here. You can pass it a class and style it however you like. So in this case, we'll try to style it like what we see in the example up here. So let's add some text and a chevron down. So it's going to be flex items center.

Let's make the white padding a bit smaller. And let's add that chevron down. So the first flex item is the text. So let's wrap that in a span. And the second flex item is the icon. So let's grab that from Heroicons. Let's grab the chevron down. Actually, I'll show you two ways here. Let's go to the documentation page. So let's do it this way first, where we just paste the SVG in.

So let's add that instead. So let me just comment this out so you can use it for reference. And it's going to be chevron down icon. And we can give it the same classes we have here. So H5, W5, and margin left of 2. OK, and let's self-close that. And let's go ahead and import that. So if we import it like this and add it to our components key, that should work. So back here, let's import the chevron down icon.

But this is faster because all we have to do is grab it from the site and paste it in. So I think I'll just stick to this in this series. But you're free to use whatever you like. OK, let's continue styling our dropdown. Right now, we just have this horizontal list here. So let's change that. So we can add a class on the menu items. Let's do that. Let's make it absolute.

So I'm not going to put the padding on this menu items container. But I'm going to put it on each individual menu item. That's because I want to add dividers later on. Let's just give it a margin-top of 2. And that looks pretty good. Actually, let's give it an explicit width here. So width 56. Is that a thing? Yes, it is. OK.

but we'll add some classes that will always apply. So we want an icon here. So it's going to be flex items center. Let's make it rounded as well. So if you take a look at the example here, you can see that there is rounded corners on the individual menu item. So let's make it rounded as well. rounded md is fine. And here's where I'll put the padding, so px-2 and py-2.

And even if I try to go down, it skips it. So if you wanted to style it, we can make use of scope slots and grab that disabled variable. Now to style it, we can make use of this conditional class here and add another one here. Let's say opacity-50 and say cursor-not-allowed if, oops, it goes after the quote, if it's disabled. So let's see if that works. And if you take a look here, it does work. There's the cursor.

And there's also one here. So again, that's really easy to do since we have complete control over our markup and CSS. So let's go ahead and do that. So let's scroll up here to the first two menu items. So we have this one and this one. So let me just highlight both of them. So this one ends right here. And we can wrap this in a div. And let's give it some margin, so px1 and py1, OK?

make use of Tailwind's divide utilities to easily do that. So similar to space-x and space-y, which I use all the time, if you want to add dividers between groups of items, then you can make use of divide on the parent element. In this case, on our menu items up here, right here actually, we can say divide-y, so vertically. And we can give it a color. So let's say divide-gray-800 so we can see it. And then I'll change it to 100. There we go.

you can see how to do that. For this particular component, you can just make use of View's transition component. But Headless UI also has its own transition component. But in this case, like I said, we'll just make use of View's transition component and also Tailwind's classes to allow us to transition our menu item. So this goes right above our menu items. So right here, let's add that. Let's re-indent.

Let's make it slower so you can see it. So we can set the duration here for the entering transition. So let's set it to one second and also one second for leaving. So you can see it, like I said. And there you go, you can see that slow transition. And I want it to originate from the top left. And let's make the scale a bit more noticeable. So let's change that class to start from scale(0.75) and to end at scale(0.75).

So let's change that class to start from scale(75) and to end at scale(75). And I want it to, like I said, start from the top left and go this way. So we can use the origin-top-left class. So origin-top-left. Not sure why the IntelliSense didn't show it. Oh, there it is, origin-top-left. So let's put that in there and let's see if it starts from there.

So one small issue here, if you take a look at the hover effect, it's not full width. So I believe if we do width full right here on the button in the menu item, that should fix it. So width full, and it does work. So let me just add that to the rest of the menu items. Okay, so that is looking better. So let's go ahead and make a commit here like I always do with my series. So let's go ahead and git add, git commit,

like I always do with my series. So let's go ahead and git add, git commit, episode one, menu, dropdown.