Style the Basic Dropdown Elements with Tailwind

Use Absolute Positioning to Position a Tailwind Styled Dropdown Area in a Navbar

Make a Tailwind Styled Dropdown Interactive

Redesign a Dropdown List for Mobile with Tailwind

Build and Style a Dropdown in Tailwind

A menu dropdown is a common component that you will build and style in any application. In this lesson, we'll start by building a dropdown defining the HTML structure with a profile picture image as a button and links that one would likely find in a dropdown.

After the structure is defined, we'll style the the image to be a round button with a nice border outline. The links will be displayed below stacked atop eachother with a fixed width and nice hover effect.

https://app.egghead.io/api/v1/lessons/tailwind-style-the-basic-dropdown-elements-with-tailwind/subtitles

Adam Wathan: [00:00] Next, I want to build a simple dropdown like the kind you might see in the nav bar, where maybe you have your avatar. You click on it and a menu pops out where you can go to your account settings, or log out, that sort of thing.

[00:10] Like always, the best way to get started is to just work on getting the mark-up in place, and then add the styling after the fact. I've gone ahead and created an account dropdown component here, where we're going to actually build this thing.

[00:22] I've got an empty div here to start. Inside of that, I'm going to start by creating a button which is what we're actually going to click to open the dropdown menu. Inside of this button, I'm going to add an image where I'm just going to paste in an avatar that I grabbed from Unsplash.

[00:36] For the old text we'll just say, "Your avatar." Now, underneath this button I'm going to create another div which is going to hold the contents of the actual dropdown. For our purposes, maybe we'll just have a couple of links here.

[00:47] Maybe we'll have something like account settings, maybe a way to contact support, and maybe a link for signing out of your account. OK, so this obviously doesn't look quite right yet. Let's focus on getting the button style first maybe. I'm going to add a class attribute to the button.

[01:05] The first thing that I'm going to do is set it to be display block, because buttons are inline-block by default which means they're affected by the line-height, and sometimes you get actual pixels that you don't want to deal with. The sense of designing this in isolation, I don't want any of that stuff lying around, I'm just going to use display block.

[01:21] Next, I want to add some dimensions to this button, so we can actually give this button the size that we want to have. Maybe we'll start with something like H6, W6 and see how that looks. That's way too small, so let's try maybe H8, W8.

[01:35] The reason this looks a little bit smaller than it should is because we are setting this button to be a square, but the image is intrinsically a rectangle. I think we do actually have a square here, but we just have some empty space above and below. I'm going to try and fix that.

[01:50] I'm going to head over to this image, I'm going to add a class here as well. To start, let's just say H-Full, W-Full so that it fills the whole box. There you go. Now, you can see we have a square but the image is stretched out.

[02:03] We can use that trick that we talked about earlier in the course, to make sure that we preserve the image's intrinsic aspect ratio without stretching it by setting object-fit to cover. That's going to make sure that the image fills whatever space is necessary and without stretching. All it's doing here is just cropping off the edge of the image, instead of doing any weird distorting.

[02:24] Next, I think I want to make this like a circular button since we'll be using a lot of rounded corners throughout the project so far. Let's go ahead and try to add some rounded corners to the button.

[02:34] I'm going to try something like a rounded full, so we get a full circular shape. You'll see that even when we save this file, we didn't see any change happen over here. Now, the reason for that is that this image has square corners, and those square corners are poking outside of the button.

[02:51] We can hide anything that bleeds out of the area covered by the button by using overflow hidden saying that anything that overflows, this element should be hidden. Now we do have a nice circular button here.

[03:05] To get the details right here, one thing I'm a little bit worried about is the focus state. If we go ahead and tab to this, you can see we just get the default glow focus ring. I think in Chrome and Firefox and stuff, this is usually blue. In Sizzy, which is the app I'm using to preview this stuff, it shows up as orange. Either way, it's ugly.

[03:25] Maybe a nicer focus save for this would be a highlighting circular border, or something. I don't want that border to just pop into place, I don't think. It'd be nice if maybe we always had a border there. Why don't we start by just adding a border and see what it looks like?

[03:39] I'm going to go with the two-pixel border so it's a little bit more obvious. You can see by default, it's a really light border. I think this is maybe a bit too high-contrast compared to the background. This looks like what I want the focus state to look like. I'm going to try and dial it down.

[03:53] Maybe we can try something like border gray 500, see what that looks like. Maybe even a little bit duller, maybe border gray 600. Yeah, I think that's pretty good.

[04:01] For the focus styles. Let's start by getting rid of that focus ring with focus outline none. Maybe we'll l add focus border white so that when we do focus the button, it's nice and bright. You can see, yeah, now when I tab to the button, we get this nice bright white focus ring that we've done ourselves. That looks a lot nicer while still being clear that that element has received focus.

[04:24] Now that we've got the button and Avatar style, let's focus on the actual content. This obviously is no good. Let's head over to this div on a class attribute.

[04:34] Most commonly, dropdowns are white. Why don't we give this a white background? We probably don't want all of these links to be left to right. Normally in a dropdown, they're stacked. Why don't we accomplish that by just adding a class here and setting all these to block?

[04:49] What about the border radius? Right now, it's square. Again, we've been using a nice, large border radius on most things in this UI so far. Why don't we go with a rounded LG on this so that we get those nice rounded corners here as well?

[05:03] The thing that is standing out to me is that things are a little bit crammed. You've got all these elements butted right up against the edge. There's a couple different ways we could tackle this right.

[05:13] One would be to add some panning to this container like P4 or something like that. The thing that I don't like about this, let's say we want to do like a hover style on this link or like the background changes color, by putting the panning on the parent element, we would only be able to highlight this area of the length.

[05:31] It wouldn't all go the way to the edges. If we want a hover highlight state to go all the way to the edges, we have to put the padding on each individual element instead of on the container.

[05:41] I'm going to get rid of the padding here. Why don't we just add some horizontal padding to each length to start? We'll do something like px4. Let's add a vertical padding, too. Let's start with py4 just to make it even. Now, that's obviously way too much.

[05:56] Why don't we do something like a py2? That's actually not too bad. Now, the one thing that does look awkward about this to me is that we've got a lot more space between each link, then we have at the top and bottom of the drop down.

[06:12] Right now, we've got two here and two here and then two here and two here, which means in between here, we've got four. A nice way to balance this would be to add extra top padding to this container.

[06:26] Why don't we try py2 here? That balanced that out. Yes, that looks pretty decent. Next thing I want to look at is the hover state that we talk to. We can get that going here. To start, let's decide on a text color for this length, a default text color.

[06:42] Right now, it's just using whatever the default for the site is, but we can go softer. We can try like text gray 800. That's just a tiny bit softer, but to me it looks nicer. Now, for our hover state, we want to change the background.

[06:58] Why don't we try something like bg? We use indigo since that's the brand color that we've been using. I'll start with 500 and just see what that looks like. As you can see, the background color changes.

[07:08] You know what? That background color is pretty nice, but the text looks stupid being dark like this. Let's make sure that we change the text color on hover as well. I'm going to say hover text white. Now, yes. Now, we got a...It's a pretty nice looking links here.

[07:25] Some final details. I want to work on a sizing and positioning of this drop down container. Right now, it just adapts to the size of the container so it'll go totally full width, which is probably not what we want.

[07:40] We should give this a specific width. Why don't we try something like w32 and see what that looks like? That's too narrow, maybe like w48.

[07:53] Yes, this is pretty good. If we had some long text here, we might want to make this wider but for our use case, these were the content that we're using, this is a pretty nice size.

[08:03] Now, you can see that this drop down is butted up right against this button, which I don't think looks great. It'd be nice if there was a tiny bit of space in between there. Why don't we go ahead and try mt1 here? That's not too bad.

[08:16] What about mt2? Is that too much? No, m2 looks good, too. Let's roll with mt2. A very last detail that I want to work on here is making this drop down appear like it's raised off the page. Right now, it's just like a container that's flat against the background.

[08:33] It looks to me like the same elevation as this image. Now, a drop down is usually supposed to look like it's popping off the page. We can accomplish that using a shadow. I'm going to go ahead and take this padding utility.

[08:48] I'm going to move that over here because I prefer when utilities that affect the size and position of things; they're at the beginning and stuff that's more decorative at the end. Let's just add a shadow here. We'll just sound like a regular shadow. Let's see what that looks like.

[09:03] I can't even see it on this dark background. We can go like shadow md. Let's see what that looks like. I can see it, still a little bit hard to see. Why don't we try something like really big, like shadow xl? Yes. This is probably going to be hard to see to you but if you look at this on your own browser, that actually does give it this nice, elevated effect.

[09:24] If we want this to see what it looked like on a lighter background, we can drop the background down like 300 here. You can see, yes, we got this nice shadow. I'm going to stick with the dark background for now, but this looks pretty good.

[09:39] In the next video, we're going to work on taking this drop down and sticking it in the nav bar that we designed earlier and making a few tweaks to make sure that things work the way that we want them to work.

Style the Basic Dropdown Elements with Tailwind

Share this video with your friends

Course

Build and Style a Dropdown in Tailwind