How to create a responsive navigation menu in Astro with Javascript

Creating a responsive navigation in Astro is easy. Here's how you can do it using this Astro Plugin. If you do not want to use a plugin, scroll down for pure javascript example.

Step 1: Install Astro Navbar Plugin

First, you need to install Astro Navbar plugin from NPM. Run the following command.

npm install astro-navbar
# or
pnpm add astro-navbar

Step 2: Setup the Plugin

Once you installed the plugin, setting up is easy. Create a new navbar.astro file and add the code below.

---
import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar";
---

<div>
  <Astronav>
    <div class="flex justify-between">
      <a>Your Logo</a>
      <MenuIcon class="w-4 h-4 text-gray-800" />
    </div>
    <!--
    // add `hidden` class by default for mobile
    // `lg:flex` is to make it visible in desktop
    // You may use custom CSS instead.
    -->
    <MenuItems class="hidden lg:flex">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>
          <Dropdown class="group">
            <button>
              <span> Services </span>
              <!-- You can style when dropdown is `open` -->
              <svg class="group-open:rotate-180">...arrow..</svg>
            </button>
            <DropdownItems>
              <div class="absolute top-0">
                <ul>
                  <li>Menu 1</li>
                  <li>Menu 2</li>
                  <li>
                    <DropdownSubmenu>
                      <button>Submenu</button>
                      <DropdownItems>
                        <ul>
                          <li>Sub Menu 1</li>
                          <li>Sub Menu 2</li>
                        </ul>
                      </DropdownItems>
                    </DropdownSubmenu>
                  </li>
                </ul>
              </div>
            </DropdownItems>
          </Dropdown>
        </li>
      </ul>
    </MenuItems>
  </Astronav>
</div>

Now, import this page into your Header or Layout.

Working Demo

Here's a Working demo of the Responsive Navigation Bar.

Live Demo on Stackblitz

Responsive Navigation Menu (No Plugin)

Here's how to create a responsive navigation menu in Astro. Let's start by adding an HTML block for the navbar.

<Container>
  <nav> 
      <div>
        <a href="/">
          <img src="../assets/logo.jpg" alt="Logo" width={132} height={52} />
        </a>

        <button id="menu" aria-label="Toggle Menu">
          <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path class="navmenu-toggle" fill-rule="evenodd"
              d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
            </path>

            <path class="navmenu-toggle hidden" fill-rule="evenodd" clip-rule="evenodd"
              d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z">
            </path>
          </svg>
        </button>
      </div>
    <div class="navmenu-toggle hidden">
      <div>
        {mobilemenu.map((item, index) => (
        <a href={item.href} target={item.external ? "_blank" : "" } rel={item.external ? "noopener" : "" }>
          {item.label}
        </a>
        ))}
      </div>
    </div>
  </nav>
</Container>

The above code will add a navbar in Astro. For simplification, I have removed all un-necessary styles. You might want to add those to display it perfectly.

Now, Let's add the required frontmatter & Astro props.

---
import Container from "@components/container.astro";

const navmenu: Menu[] = [{
        label: "Home",
        href: "/",
    },
    {
        label: "About",
        href: "/about",
    },
    {
        label: "Contact",
        href: "/contact",
    },
];

---

Now, let's add our javascript to toggle the menu & our hamburger icon.

<script>
  const menuButton = document.getElementById("menu");
  menuButton.addEventListener("click", () => {
    [...document.querySelectorAll(".navmenu-toggle")].forEach((Element) => {
      Element.classList.toggle("hidden");
    });
  });
</script>

That's it. We have our working navigation menu bar with toggle without using any plugin.

Conclusion

Hope you learned how to create Navbar using Astro. We prefer using the plugin which is a more robust solution for needs like dropdowns etc.