The Navbar is a common component you will find yourself styling in almost any application. 

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

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

Build a Navbar Layout using Tailwind and Flexbox

Now that we have the navbar set up in a static fashion, we want to make the button that was added to drop down into a menu on click.

We'll start by adding the markup and then style that. The mark up will need to be refactored a bit so that flexbox is only affecting the navbar and not the menu that is generated. After the refactor, we'll color and size the menu with Tailwind Utility classes. 

Finally, to get the menu to show and hide on click, we'll add a Vue `@click` directive that will toggle component state which in turn controls Tailwind classes that control whether the menu is hidden or shown.

Toggle Navar Menu Links in Tailwind with Vue

We started by building just the mobile layout of the navbar which looks great but wont on larger screens. We'll want to handle each screen size and adjust the style on each breakpoint. When the navbar is big enough, we can fit the links within the navbar instead of dropping them down below.

In this lesson, we will use the `sm` breakpoint to start styling the navbar for screens that are larger than mobile.

Build a Responsive Navbar with Tailwind

Instructor

Course Content