Let's do another one. How about a drop-down component? Now, just like the modal example, we need some kind of trigger to toggle the drop-down. So we'll say, here's our trigger, and I'll have a button that says, click me. Alright, next for our content area, our default slot, we'll do a bunch of <a> tags. One, two, three, and then we'll tweak those in a little bit. Alright, so of course, if we run this, it's going to fail because we have no drop-down component. Let's do that now. In my components directory, we'll add a new one called drop-down.blade.php. Okay, let's put these side-by-side.

In my components directory, we'll add a new one called drop-down.blade.php. Okay, let's put these side-by-side. So right off the bat, we'll have a wrapping div where I will spit out our trigger here. So if we do nothing else and give this a refresh, we're now at least displaying the label there. But you know what? As we've done before, let's wrap this in one of our section components, like so. And that'll give us a little more breathing room. Okay, so now, when we click on this, we want to display the links below. Alright, let's see. Those links will probably be in their own div, and that way we can toggle the display,

Alright, let's see. Those links will probably be in their own div, and that way we can toggle the display, and we'll spit out the default slot. So yeah, at the moment, we're going to see those. But also, while we're here, notice that they are not set to a block display. Let's fix that. Give it a refresh, and there we go. Next, we want a custom background color here. White or black, whatever you want. So we'll do something like background is white.

I have to reclick on the trigger there, which is kind of annoying. Luckily, Alpine has a cool thing where I can say if I click away from this container, then do something. In this case, close it. OK, so now have a look. If I open it, I can toggle it. However, if I click away from that component entirely, it closes as well. OK, what else? Well, one thing is the dropdown is going to take up the entire space, the full block width there.

And one thing that's annoying is six months from now, when I want a new dropdown, I'm not going to remember what these classes are. I'm going to have to return to an existing dropdown I had and just kind of copy and paste. And that can be annoying because if I later decide that the hovered background color should be different, I may have to update that in multiple files. So you might even want to consider an additional component, like DropdownItem or DropdownLink. So you'd have something like this. But notice, if we take this approach, we are now removing all of this class duplication entirely. I'll show you what that looks like.

But notice, if we take this approach, we are now removing all of this class duplication entirely. I'll show you what that looks like. In our components directory, let's add a new one, dropdownLink. And I'm going to paste all of that in and then spit out your default slot. And then, of course, the href can just be included in your attributes. So we'll do this. Spit out the attributes, but merge in our defaults. Like this. Yeah, I think that's right. So add any attributes the user provides, whether it's a title or a href,

So again, notice we're no longer duplicating those classes, and it makes it that much easier to reuse this down the road. If I have another page and I want a dropdown, this is pretty easy to remember. Add your dropdown component, declare your trigger, and then add all of your links. Refresh. And now we have one up here and we have one down here. OK, let's just do a few things to wrap up and then we'll call it a day. One thing is the anchor tags don't go anywhere. So let's get rid of all of this. But again, you could add those here.

Run it. And there you go. Over the course of one second, we show it. Again, you want it to be more like 300 is what I often reach for, maybe even a little bit less. But now when I click away, it instantly hides. And you might want that. It just depends. So let's duplicate this for leave. And we're going to start with opacity of 100 and end with opacity 0. So run that.

Hide. All right, now is there anything else? Oh, here's one thing. Sometimes you'll want to override the default alignment for the dropdown. Let me see if I can give you an example. Let's say for the container, something like that. Maybe up here, you have a class of flex and justify-end. And we're just going to push everything to the end here. Okay, well, now I open the dropdown, and it's off the edge. Now, if I view this in Firefox instead, you can see it a bit better.

So give it another go. And that fixes it. But yeah, once again, if you don't have that scenario, well, now you've hard coded the alignment to the right. So again, notice, depending on the context, you will want to override this. So with that in mind, why don't we add a prop for the alignment? And we'll default to left. Then maybe you could have left or center or right alignment. So a couple episodes ago, we did that in our prop. We made it configurable.

So a couple episodes ago, we did that in our prop. We made it configurable. But don't forget, you can always do this with standard php. So for example, I could say alignmentClasses, and then we'll have a little lookup table here. If it's left, then left to zero. If it's right, then right zero. Maybe you have topAlignment, maybe you have center, anything you want there. So now I'm no longer hard coding this. I'm just going to spit out the alignmentClasses for the alignment you provide.

So now I'm no longer hard coding this. I'm just going to spit out the alignment classes for the alignment you provide. And if you don't provide one, we stick with left. Okay, so now give it another run, and it will be left aligned. But now notice it's aligned to the left of the window because that's the nearest positioned parent, right? So we should probably set relative positioning on the dropdown itself. And if I give that another go, yeah, now notice it's left aligned to this container. And that's what we want. But again, I can override that if I need to.