Build a Navbar Layout using Tailwind and Flexbox

Toggle Navar Menu Links in Tailwind with Vue

Prefix Tailwind Utility Classes with Breakpoints to Make a Responsive Navbar

Build a Responsive Navbar with Tailwind

The navbar is a common component that you'll find yourself styling in almost any application. In this lesson we'll start with the HTML structure of the navbar and end with styling it to look good.

We'll import an image to use as a logo in the navbar as well as a hamburger svg that we'll use for a menu button. Both these items need to be positioned within the navbar so we will add flexbox and see how easy it is to align these items vertically and horizontally

Instructor: [00:00] The next thing I want to work on is building a responsive navbar with Tailwind. Since Tailwind, as a framework, encourages a mobile first workflow, we're going to start with the mobile layout.

[00:10] The workflow that I find the easiest with Tailwind is to start by just putting all of the html structure in place and then adding the styling after the fact. Why don't we start by creating a header element here.

[00:22] Most of these navbars, they're usually broken up into maybe two or more pieces. You can think there's usually log and stuff on the left. Then on the right is where you have all of the links, or on mobile it's where you maybe have a hamburger menu icon.

[00:35] Why don't we create two divs for each chunk? We'll have a div for the stuff that goes on the left, then we'll have a div for the stuff that goes on the right. I think it'd be cool to use a dark background for this header.

[00:45] I've gone ahead and created an inverted version of our logo that will work on a dark background. I've added that to the public directory. We can just grab that at image/logoinverted.svg. We can add some alt text here. We can just say workcation.

[01:01] Since we're starting with the mobile layout, why don't we go ahead and just add a button with a hamburger icon in it on the right hand side? I'll create a button element here. We'll give it a type of button.

[01:12] Inside of it, I'm just going to paste this SVG that I have in my clipboard for a hamburger menu icon. This, of course, looks nothing like how we want it to look. Let's start by adding some basic styles. First, let's go ahead and add a background color.

[01:24] Why don't we try something like BG gray-800, see how that looks? Let's go a little bit darker, BG gray-900. We can't actually see this icon, the hamburger menu icon. Let's go ahead and add some classes to the SVG, so that shows up.

[01:39] Why don't we try h4w4? You can't see it there. It's black, so it's hard to see. Let's give it a color, so it actually stands out. Why don't we do something like fill-current, so that we can use the text color utilities to style it? Let's go ahead and add a text color to the button itself, so that we can change it on focus and stuff if you want to add some different styles.

[01:59] If we just start with text white, that should show up. This actually looks a little bit small. Why don't we bump this up to h6w6, see how that looks? That's going to be a little bit closer. The white is probably a little too high-contrast. Why don't we turn that down?

[02:17] Gray-300, see what that looks like? Even a little bit darker. What about gray-500? That'll look pretty good. On focus, we could do something like text white. That way, when you tap to it, it gets lighter. Let's also get rid of that focus ring. Since we are adding our own focus styles, we don't really need to have that separate glow.

[02:40] We could probably also make it go white on hover, so you can see that hovering over. It's going to be the same thing there, so go hover, text wide, and focus text wide. Now, when you hover over, it changes color.

[02:51] Next, this logo is obviously way too big, if we just want it to be over on the left. The way that I'm going to style this is by just adding a height and leaving the width set to auto. We're going to add a class here, and I want to do something like H6 and see what happens there. I think that's probably a little bit too small, maybe like H8.

[03:10] Width is going to be auto by default, so this is where the image is just going to take up whatever space it needs to width-wise based on height, in order to preserve the intrinsic aspect ratio of the image.

[03:21] Now, we have to get this button over to the right-hand side of this menu somehow. How are we going to do that? In the past, you might have done something like float right when you needed to do this sort of thing.

[03:33] This works, you can see it moves it over to the right, but things are screwed up still. This ends up being a real pain to get right, and to do in any clean and maintainable way. These days, it's much easier to build this layout using flexbox. It's just to leave this class and I'll teach you a little bit about how flexbox works.

[03:53] The first thing we need to do is add the flex class to the parent element that holds the left side and the right side. This will turn it into a flex container. Now, what happens when you make something a flex container, is that the children by default get laid out left to right with no space in between them.

[04:11] Which is convenient if you've ever dealt with that problem where you're trying to build columns or something, and just having white space in the editor creates a tiny bit of a gap between things. With flexbox, there is no gap which is nice.

[04:23] Now to control where each piece ends up, we can use the align-items property and the justify-content property. To make this a little bit easier to teach, I'm going to add another element here that we're not going to keep, just so you can understand how this works better.

[04:37] Why don't we add this log in text, and we go ahead and make it white so you can actually see it. Now, we have three pieces -- we have the logo, we've got the login text, and we got the button. You can arrange these things in two dimensions. Align-items controls where these elements are positioned vertically and justify-content positions how they're arranged horizontally.

[04:58] Let's focus on align-items first. By default, align-items is set to stretch which means that both of these divs are filling the full height of the parent container. The easiest way to see that is to add a background color here. Say we were to add like bg-gray-700.

[05:15] You can see this block that contains the word login is full height, and the same thing is true of the div that holds the button. Now, if we wanted to align these items to the top instead of stretching them, all we have to do is set align items to flex start, which we can do in Tailwind using the items start class.

[05:32] Now you can see this item isn't full height. You can see the background shrunk because these elements are now positioned right at the top. If we wanted to align them along the bottom, we could use items end.

[05:42] The reason that the button didn't move in this case is because button elements are in line block by default, which means they're affected by line height. This element is actually a little bit taller than it looks. If we set this to be a block level button, you'll see that the button does jump down to the bottom.

[05:57] Here's another option that you'll probably be really excited about, say we want to center these items. Unlike back in the old days where doing this was a total nightmare and you had to do weird things with line height or tables and all sorts of crazy crap, these days you can just do items center.

[06:12] Now all these items will be perfectly center-aligned. Isn't that beautiful? For this [inaudible] , we probably do want to use item center. I think it makes sense for this button to be centered with this logo. Let's stick with item center and start talking about how justified content works, which is what we use to lay elements out horizontally.

[06:29] By default, justified content is sent to flex start, which means all of the elements are bundled up together on the left side. If we wanted to put things on the right side, we could use the justify end class. I can see, yeah, everything jumps to the end.

[06:44] We can also use justify between, which will put an equal amount of space between every item, which is really nice. We can also use justify around which will put an equal amount of space around every item. You can imagine that this element here is like this wide, this one here is this wide, and this one here is this wide. A couple of really cool, interesting options.

[07:07] For our use-case, we want the logo to be all the way on the left and the button to be all the way on the right. I think justify between is the one that we're going to want to stick with.

[07:15] We don't actually need this login text here. We just had that there for demonstrative purposes. Let's get rid of that and then spend a couple seconds here just cleaning up these styles.

[07:25] I don't think we want everything to be full-width here. We probably want a little bit of horizontal padding. I'm going to head up to this element here. Why don't we try something like maybe PX4 to add some left and right padding, and then maybe something like PY2 for some vertical padding, maybe even PY3? That looks pretty good.

[07:43] That's a quick overview of how you can build these really common layers using Flexbox instead of much a hacky floats and stuff like that. In the next lesson, we're going to talk about making this button actually work to pop open a section where we can add these links on mobile.

Course

Build a Responsive Navbar with Tailwind

Build a Navbar Layout using Tailwind and Flexbox

Share this video with your friends