Mobile Menu

Navigation

About

A composable full-screen overlay mobile navigation menu built on Radix Dialog, with animated open/close, scroll locking, trigger, navigation items, and footer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mobile Menu to your project and fits it to your theme.

Code

How Mobile Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as MobileMenu from "@/components/ui/mobile-menu";
import { Menu, X } from "lucide-react";

function Header() {
  return (
    <div className="bg-background text-foreground min-h-svh w-full font-sans">
      <MobileMenu.Root defaultOpen>
        <header className="h-heading-height border-border bg-background sticky top-0 z-40 flex items-center justify-between border-b px-6 py-4">
          <div className="relative z-20 text-xl font-bold tracking-tight">
            NOT JOYCO
          </div>

          <MobileMenu.Trigger className="flex md:flex">
            <Menu className="h-6 w-6 group-data-[state=open]/menu-trigger:hidden" />
            <X className="h-6 w-6 group-data-[state=closed]/menu-trigger:hidden" />
          </MobileMenu.Trigger>
        </header>

        <MobileMenu.Content className="flex md:flex">
          <MobileMenu.Navigation>
            <MobileMenu.Item href="#">Home</MobileMenu.Item>
            <MobileMenu.Item href="#">Profile</MobileMenu.Item>
            <MobileMenu.Item href="#">Settings</MobileMenu.Item>
            <MobileMenu.Item href="#">Contact</MobileMenu.Item>
          </MobileMenu.Navigation>
          <MobileMenu.Footer>
            <p className="text-muted-foreground text-sm">
              © 2025 Defenitely Not Joyco Inc.
            </p>
          </MobileMenu.Footer>
        </MobileMenu.Content>
      </MobileMenu.Root>
    </div>
  );
}

export default Header;