Creating A Responsive Navbar With Tailwind CSS

Creating A Responsive Navbar With Tailwind

Introduction

A good navbar is something every website needs and I've been using Bulma for the past few years which has provided me with an 'out the box' navbar every time I've used it. This lack of control ends today! Join me as we learn how to build a responsive navbar using Tailwind.

What We'll Be Building

Full Size

Mobile

I'm yet to figure out how to do a collapsable navbar with Tailwind that pops open on click without using JavaScript but I'll post that as an extension to this post once I've got that working. So be sure to check back if you're interested in learning how to do that once I've managed to work that out myself. To drastically change the look of the navbar on different viewport sizes we can use the different breakpoint prefixes. 

For this reason, it's often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

https://tailwindcss.com/docs/responsive-design

Components

Navbar

The navbar is the parent element that will contain all the contents of the navbar. The navbar has to be responsive, which Tailwind makes easy to do by using Flexbox. We want the navbar sections to stack in a column when not on anything smaller than a tablet.

Navbar Section

The navbar is split into a left and right section when not viewed on mobile. So we stack them like a column on mobile and then display them in a row again when on anything larger than a mobile screen using Tailwinds breakpoint prefixes.

Navbar Item

Navbar Avatar

Make sure you wrap your NextImage component with a div with a relative class. If you forget you'll notice that it won't style appropriately.

I'm sure theres a better way to vertically center the image so if you know how then let me know in the comments. This is a learning process after all so if I find a way I'll add an edit to the blog so be sure to check back just in case!

Wrap Up

If you found this helpful share it with your friends! What do you think of Tailwind? Do you find it great or does the style of writing classes frustrate you? Let me know in the comments section below what you think!