← Controllers

mobile_nav

Mobile navigation drawer with backdrop and keyboard support.

Resize your browser to mobile width (or use devtools), then click the hamburger menu in the top right. That drawer is powered by this controller.

Usage

<body data-controller="mobile-nav">
  <!-- Toggle Button -->
  <button data-mobile-nav-target="toggle"
          data-action="click->mobile-nav#open"
          aria-expanded="false">
    Menu
  </button>

  <!-- Backdrop -->
  <div data-mobile-nav-target="backdrop"
       data-action="click->mobile-nav#closeOnBackdrop"
       class="mobile-nav-backdrop"></div>

  <!-- Drawer -->
  <nav data-mobile-nav-target="drawer"
       class="mobile-nav-drawer">
    <button data-action="click->mobile-nav#close">Close</button>
    <!-- Navigation links -->
  </nav>
</body>

Targets

Target Purpose
toggle Button that opens the drawer
backdrop Semi-transparent overlay
drawer The navigation panel

Actions

Action Purpose
open Open the drawer
close Close the drawer
toggle Toggle open/close
closeOnBackdrop Close when clicking backdrop

Required CSS

.mobile-nav-backdrop {
  @apply fixed inset-0 bg-gray-900/50 z-40;
  @apply opacity-0 pointer-events-none transition-opacity;
}

.mobile-nav-backdrop.open {
  @apply opacity-100 pointer-events-auto;
}

.mobile-nav-drawer {
  @apply fixed top-0 right-0 h-full w-80 bg-white z-50 shadow-xl;
  @apply transform translate-x-full transition-transform;
}

.mobile-nav-drawer.open {
  @apply translate-x-0;
}

Features

  • Escape key closes drawer
  • Backdrop click closes drawer
  • Body scroll is locked when open
  • ARIA attributes update automatically