DEV Community

Cover image for Create a Responsive Nav Menu with Tailwind and Alpinejs
Andrew Zachary
Andrew Zachary

Posted on

Create a Responsive Nav Menu with Tailwind and Alpinejs

Content

menu

mobile menu

Requirements

  • Nodejs installed.

Introduction

A navigation menu is an essential part of any website. It provides users with a way to easily navigate between different pages and sections of the site. In this blog post, I would like to share with you my implementation of how to create a responsive navigation menu with Tailwind and Alpinejs.

What is Tailwind?

Tailwind is a utility-first CSS framework that allows you to quickly and easily style your websites. It provides a large library of pre-made classes that you can use to style your elements.

What is AlpineJS?

Alpinejs is a lightweight JavaScript framework that allows you to add interactivity to your websites. It provides a number of features that make it easy to add things like modals, tooltips, and animations to your site.

Why use Tailwind and AlpineJS together?

Tailwind and AlpineJS can be used together to build awesome website features without leaving the HTML code. This allows me to add styles and interactivity to my HTML code quickly and easily.

Allow me to show you

Initial Setup

I will use Vitejs (a build tool) to scaffold a new project. Now, I will open my terminal and type:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Enter the project-name then choose "Vanilla" and "JavaScript" (for simplicity), after that i will install the dev-dependencies:

cd project-name
npm install
Enter fullscreen mode Exit fullscreen mode

Tailwind and AlpineJS Setup

First, let's install Tailwind, back to the terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This will generate tailwind.config.js and postcss.config.js files, edit tailwind.config.js to look like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./main.js"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Next open style.css file then add:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Great! Now that the Tailwind setup is done, let's install Alpinejs and the @alpinejs/collapse plugin, which will help to animate the menu show/hide toggling with ease:

npm install alpinejs @alpinejs/collapse
Enter fullscreen mode Exit fullscreen mode

Now, open main.js file and add:

import './style.css';

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';

Alpine.plugin(collapse);

Alpine.start();
Enter fullscreen mode Exit fullscreen mode

The above code will load the @alpinejs/collapse plugin, and initialize Alpine by calling Alpine.start().

Let's add HTML code

I will use Tailwind classes and Alpinejs x-data directive within index.html file to add styling and interactivity to the HTML element nav:

<nav x-data="{open: false, toggle(){this.open = !this.open;}}">

  <div 
    id="nav-box" 
    class="grid justify-items-center items-center
    grid-cols-[max-content_1fr_max-content]"
  >

    <!-- bars btn -->
    <div 
      id="bars-btn"
      class="cursor-pointer md:hidden" 
      @click="toggle"
    >
      <img src="/bars.svg" alt="">
    </div>
    <!-- bars btn -->

    <!-- logo -->
    <div 
      id="logo" 
      class="md:col-start-1 md:col-end-2"
    >
      <img class="w-full max-w-[30rem]" src="/logo.svg" alt="">
    </div>
    <!-- logo -->

    <!-- links-list -->
    <div 
      id="list-links" 
      class="w-full 
      row-start-2 row-end-3 col-start-1 col-end-4
      md:row-start-1 md:row-end-2 md:col-start-2 md:col-end-3"
    >
      <ul 
        class="md:px-4
        text-4xl text-center font-regular capitalize
        md:!flex md:justify-between md:!h-full"
        x-show="open" x-collapse 
      >
        <li class="py-6 md:py-0">
          <a href="#" class="hover:font-bold">home</a>
        </li>
        <li class="py-6 md:py-0">
          <a href="#" class="hover:font-bold">pricing</a>
        </li>
        <li class="py-6 md:py-0">
          <a href="#" class="hover:font-bold">about us</a>
        </li>
        <li class="py-6 md:py-0">
          <a href="#" class="hover:font-bold">contacts</a>
        </li>
      </ul>
    </div>
    <!-- links-list -->

    <!-- search btn -->
    <div 
      id="search-btn" 
      class="cursor-pointer"
    >
      <img src="/search.svg" alt="">
    </div>
    <!-- search btn -->

  </div>

</nav>
Enter fullscreen mode Exit fullscreen mode

Let me explain the above code:

  1. The HTML element <nav /> was converted to an Alpine component by assigning a context object that contains 1 prop open and 1 method toggle to the Alpine x-data directive.
  2. Div #bars-btn click-event will trigger the toggle method, which will toggle the prop open boolean value true/false.
  3. The <ul /> inside div #list-links will consume the open prop through Alpine directive x-show to toggle the show/hide effect, and that will be animated by using x-collapse directive came from Alpine-collapse-plugin.
  4. Divs #bars-btn, #logo, #list-links and #search-btn are wrapped by div #nav-box CSS grid that will render its children inside three grid columns max-content, 1fr and max-content.
  5. The children elements of #nav-box will adapt the different screen sizes by using the following tailwind-classes:
    1. md:hidden will hide Div #bars-btn if the screen min-width size is 768px.
    2. md:col-start-1 md:col-end-2 will push #logo div to take over the #bars-btn div's position within the grid if the screen min-width size is 768px.
    3. row-start-2 row-end-3 col-start-1 col-end-4 will stretch #list-links div from row-line 2 to row-line 3 and from column-line 1 to column-line 4, and if the screen min-width size is 768px, tailwind-classes md:row-start-1 md:row-end-2 md:col-start-2 md:col-end-3 will stretch #list-links div from row-line 1 to row-line 2 and from column-line 2 to column-line 3.

Conclusion

Full Code

If you're like me and don't like to switch between files too much while coding, I'm sure you'll love using Tailwind and Alpinejs for building your next web site. They allow you to do a lot without leaving the HTML code.

They also have well-structured documentation that makes it easy to learn how to use them effectively.

Your feedback is greatly appreciated, thank you for reading.

Top comments (0)