Interaction
Fullscreen Drawer Menu
A full-screen navigation menu with staggered link reveals and smooth open/close transitions.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a fullscreen drawer menu. A hamburger button triggers a dark overlay that slides or fades in, covering the viewport. Inside, display 4-5 large navigation links that stagger-reveal from the bottom with opacity and translateY. Include a close button. Use CSS transitions or keyframes, and JavaScript to toggle the open state. Use Tailwind CSS. Typography should be oversized and bold.
Chinese Prompt
创建一个全屏抽屉菜单。汉堡按钮触发深色遮罩滑入或淡入,覆盖整个视口。内部显示 4-5 个大号导航链接,从底部错开显示(透明度和 translateY)。包含关闭按钮。使用 CSS transitions 或 keyframes,JavaScript 切换打开状态。使用 Tailwind CSS。字体应超大且粗体。

Overview
A dramatic navigation pattern that turns menu access into a designed moment. Common on agency and portfolio sites.
Features
- Full-screen overlay
- Hamburger trigger + close button
- Staggered link reveal
- Oversized bold links
- Dark background
- Smooth open/close transitions
Usage
Use for minimal header sites, portfolios, or brands that want navigation to feel intentional.
Customization
Modify the prompt to:
- Add link hover underline animation
- Include social links at the bottom
- Add background image/video in menu
- Use split-screen menu layout