2 years ago

In this article let's build a responsive Navbar using TailwindCSS and AlpineJS. We will use TailwindCSS for the styling and we will sprinkle the javascript behaviour of the navbar using AlpineJS.

Assuming you have TailwindCSS installed in your project, In this step, lets just add a nav element to the page which has a bottom border and inside that we will add a div which defines the width of the navbar border-b adds a bottom border to the nav element

Now since we have the navbar structure with logo and branding ready, let's go ahead and add links to the navbar.

Let's add a new button with the hamburger menu icon, by clicking on the which user can toggle the view of nav items on the smaller screens.