Mobile Menu

Responsive hamburger menu for mobile navigation

Overview

The Mobile Menu element provides a responsive hamburger menu pattern for mobile devices. It includes a hamburger toggle button that shows/hides a slide-out or dropdown navigation panel, using Alpine.js for smooth toggle interactions.

This element is designed to complement the WP Menu element. Use WP Menu for desktop navigation (visible on larger screens) and Mobile Menu for smaller screens. Typically both elements are placed in a header, with CSS responsive utilities controlling which is visible at each breakpoint.

The Mobile Menu automatically pulls navigation items from the specified WordPress menu location, ensuring your mobile and desktop menus stay synchronized when you update the menu in WordPress admin.

Complementary Pattern

The Mobile Menu includes a hamburger button that toggles visibility. It's designed to complement the WP Menu element for responsive layouts. Show WP Menu on desktop (hidden lg:flex) and Mobile Menu on mobile (lg:hidden).

Settings

Configure the Mobile Menu element using these Inspector options:

Setting Description Default
Menu Location WordPress menu location to display. Should match the same location used by WP Menu for consistency (e.g., primary, main-menu). primary

Examples

Basic Mobile Menu

A simple mobile menu with hamburger toggle. The menu slides down when the hamburger is clicked.

<div x-data="{ open: false }" class="lg:hidden">
  <!-- Hamburger Button -->
  <button @click="open = !open" class="p-2">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>

  <!-- Mobile Nav Panel -->
  <div x-show="open" x-transition class="absolute top-full left-0 right-0 bg-white shadow-lg">
    <ul class="flex flex-col py-4">
      <li><a href="/" class="block px-4 py-2">Home</a></li>
      <li><a href="/about" class="block px-4 py-2">About</a></li>
      <li><a href="/services" class="block px-4 py-2">Services</a></li>
      <li><a href="/contact" class="block px-4 py-2">Contact</a></li>
    </ul>
  </div>
</div>

Custom Hamburger Styling

Style the hamburger button with custom colors and sizing. Use Tailwind utilities to match your brand.

<button @click="open = !open" class="p-3 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
  </svg>
</button>

Slide-In Animation

Create a slide-in sidebar effect using Alpine.js transitions and Tailwind's transform utilities.

<div x-data="{ open: false }" class="lg:hidden">
  <button @click="open = true" class="p-2">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
  </button>

  <!-- Overlay -->
  <div x-show="open" @click="open = false" class="fixed inset-0 bg-black/50 z-40"></div>

  <!-- Slide-in Panel -->
  <div
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="-translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="-translate-x-full"
    class="fixed top-0 left-0 bottom-0 w-64 bg-white shadow-xl z-50"
  >
    <button @click="open = false" class="absolute top-4 right-4">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
    <nav class="pt-16 px-4">
      <ul class="space-y-2">
        <li><a href="/" class="block py-2 text-lg">Home</a></li>
        <li><a href="/about" class="block py-2 text-lg">About</a></li>
        <li><a href="/services" class="block py-2 text-lg">Services</a></li>
        <li><a href="/contact" class="block py-2 text-lg">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

Next Steps

  • WP Menu – Desktop navigation to pair with Mobile Menu
  • Breadcrumbs – Add navigation trails for wayfinding
  • Headers – Build complete responsive headers