Prompt pack · 25 prompts
Build premium website navigation features faster with AI.
Instant download after checkout. All sales are final — every prompt is listed below.
What's inside
Every one of these is in the download as a full, copy-paste prompt.
A translucent, frosted-glass mega-menu that reveals a balanced grid of submenu items on hover. Designed to feel premium and modern with smooth depth and subtle blur.
Best forPremium SaaS, design platforms, creative studios
A sleek floating navbar shaped like a pill that sticks to the top of the viewport with a soft backdrop blur. It feels weightless and visually separated from page content on scroll.
Best forModern SaaS, portfolios, marketing sites
A multi-level sidebar where nested sections expand and collapse smoothly, featuring soft neumorphic toggle switches with inset shadows. Ideal for apps with deep hierarchical navigation.
Best forDashboards, admin panels, documentation sites
A dramatic full-screen navigation overlay that fades in with menu items animating in sequence using staggered delays. Creates a cinematic feel perfect for brand-first websites.
Best forAgencies, portfolios, editorial brands
A dual-pane navigation menu where each side scrolls independently, allowing users to browse categories and subcategories in parallel. Clean active states highlight the current selection.
Best forDocumentation, large catalogs, knowledge bases
A mobile-first bottom navigation bar pinned to the viewport with a prominent circular floating action button centered above it. Safe-area aware and ready for modern devices.
Best forMobile web apps, PWAs, task-focused tools
A clean breadcrumb trail with animated SVG chevron separators that shift color and spacing on interaction. Subtle, elegant, and focused on clear path awareness.
Best forE-commerce, docs, content-heavy sites
A slide-out off-canvas menu triggered by a hamburger button, featuring a prominent user profile card at the top with avatar and identity ring. Combines navigation with personalization.
Best forApps with user accounts, dashboards, community sites
A sticky header that elegantly shrinks from tall to compact as the user scrolls down the page. Saves screen space while maintaining visual presence and accessibility.
Best forContent sites, blogs, long-scroll landing pages
A tabbed navigation bar with an animated bottom border that sweeps between active tabs. Includes full keyboard navigation and ARIA attributes for accessibility.
Best forDashboards, settings pages, app tab sections
A powerful dropdown with a top search input that filters menu items in real time, plus layered filter checkboxes for deeper narrowing. Perfect for menus with dozens of options.
Best forSaaS with large option sets, directories, catalogs
A narrow vertical sidebar with icon-only navigation where labels appear as tooltips on hover. Maximizes content space while keeping essential navigation one click away.
Best forProductivity apps, design tools, IDEs
A horizontally scrollable navigation strip optimized for mobile, with snap scrolling so each item clicks into place. Perfect for category pills or secondary navigation.
Best forMobile sites, category filters, news sections
A wide mega-menu with multi-column layout and dedicated spotlight cards for featured products, complete with product images at a fixed aspect ratio. Drives attention to promoted items.
Best forE-commerce, product catalogs, marketplaces
A navbar that starts fully transparent over the hero image and transitions into a solid-colored background with shadow as the user scrolls. Seamlessly adapts text and icon colors along the way.
Best forHero-driven landing pages, immersive sites
A mobile menu built as a smooth accordion with expanding panels and rotating chevron indicators. Clean max-height transitions prevent jarring jumps on open and close.
Best forMobile nav, FAQ menus, nested content
A navigation bar featuring a bell icon with a dynamic pulse badge and a dropdown notification center panel. Users can glance, scroll, and catch up without leaving the page.
Best forApps with alerts, social platforms, dashboards
A power-user sidebar that users can drag to resize or collapse entirely via a dedicated button. Pointer events handle the drag and smooth width transitions polish every interaction.
Best forIDEs, file explorers, professional tools
A circular action button that, when tapped, radially spawns child buttons in an arc using smooth scale and opacity animations. Fun, functional, and visually striking.
Best forCreative apps, quick-action menus, editors
A breadcrumb trail where each level reveals a dropdown of sibling pages on hover. Fully keyboard-navigable with ARIA roles and focus trapping for accessibility.
Best forDeep-hierarchy sites, file managers, large catalogs
A navigation bar with a slim progress bar underneath that fills as the user scrolls down the page. Gives readers a clear sense of how much content remains.
Best forBlogs, long articles, documentation
A sidebar that doubles as a mini dashboard by stacking live widgets vertically, each with rounded corners, soft shadows, and loading skeletons. Perfect for glanceable metrics alongside navigation.
Best forAnalytics dashboards, admin panels, data tools
A classic mega-menu organized into four clean columns, each item paired with an inline icon for quick scanning. Clear hover feedback on both icons and labels guides attention.
Best forLarge SaaS, multi-product sites, enterprise
A sticky navigation bar featuring a gradient CTA that appears contextually as the user scrolls past the hero section. A high-conversion element with polished hover scale effects.
Best forConversion-driven landing pages, SaaS, product tours
A full-screen navigation overlay with a muted looping video background, layered with a blurred semi-transparent panel to keep menu links perfectly legible. Cinematic and unforgettable.
Best forCinematic brands, agencies, launch pages
Preview
Glassmorphism Mega-Menu with Hover Reveal Grids
Act as a Senior Frontend Architect and UI/UX Expert. The Task: Write the complete, production-ready code for a [Glassmorphism Mega-Menu with Hover Reveal Grids]. Tech Stack & Environment: - Strictly a SINGLE HTML file containing everything. - Use plain HTML5. - Use the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) in the head for all styling. - Use plain Vanilla JavaScript enclosed in <script> tags for any interactivity. - Use inline SVG paths for any icons (do not use external icon libraries). Strict Requirements: - Visual Excellence: It must look like a premium, modern SaaS product (subtle shadows, rounded corners, clean borders, smooth hover/focus effects). - Responsive: Must look perfect on mobile, tablet, and desktop using Tailwind utility classes.
The feature-by-feature build steps continue in the pack — along with the other 24 prompts.
How to use it
Four steps. Zero setup. Every prompt in this pack is engineered to output a complete, single HTML file you can open directly in any browser.
Open any prompt page in this pack and copy the full prompt block to your clipboard.
Paste into Claude, ChatGPT, Gemini, Cursor, or any AI coding tool. No modifications required.
The AI returns a single complete HTML file. Copy the entire code block it produces.
Save it as index.html and double-click to open in your browser. Done.
What you get
Digital download from Gumroad, available right after checkout. Nothing ships.
Best for
Affiliate marketers, freelancers, indie hackers, creators, and beginners building websites with AI.
All sales are final, per the Gumroad listing.
Questions
The pack’s own instructions name Claude, ChatGPT, Gemini, and Cursor. Paste a prompt into any of them, or a similar AI coding tool.
Each prompt asks the AI for one complete HTML file you can save and open in a browser. What comes back depends on the model you use — the pack recommends a strong one.
No build tools. Copy a prompt, paste it into your AI tool, save the HTML it returns, and open it in your browser.
No. All sales are final, as stated on the Gumroad listing. Every prompt in the pack is listed on this page so you can check it covers what you need first.
A prompt pack gives you single copy-paste prompts for individual UI features. The Mission Vault is a structured set of missions, safety rules, and build checklists for building complete dashboards with Claude Code.
More packs
Analytics dashboards, KPI grids, data tables, charts & kanban boards.
See the pack →Bold, high-converting hero sections that grab attention instantly.
See the pack →Login screens, account dashboards, settings & role-based UI.
See the pack →Product grids, carts, checkout flows & sales pages that convert.
See the pack →Landing pages, lead-gen funnels, popups & CTAs built to sell.
See the pack →Toasts, modals, slide-overs, loaders & animation that feels alive.
See the pack →Blog layouts, article pages, content blocks & editorial UI.
See the pack →Profiles, feeds, comments & community interface components.
See the pack →Footers, bottom bars, newsletter blocks & end-of-page sections.
See the pack →