Curtain Menu
One button that opens a full-screen menu.
Features
- Just a logo and a Menu button
- Opens a full-screen curtain of large serif links
- Rolling label between Menu and Close
- Escape closes it and the page stops scrolling behind
Best for: Agencies, portfolios and brand sites that want a bold, editorial menu.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| contact | { label: string; href: string } | - | A quiet link in the curtain footer, like an email. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Curtain Menu navbar free to use?
Yes. Curtain Menu is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Curtain Menu work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Curtain Menu in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Curtain Menu need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Curtain Menu accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.