Create a mega menu design for a fictional electric cargo bike maker called Packhorse. The page is warm beige (#efe8dc) with dark green text (#1d2b22): a brick red label "Packhorse box bikes", the headline "Carry the shopping, the dog and both kids", a line about a 100 kg box, three facts (80 km, 100 kg, 7 yrs) and an SVG box bike carrying two children and a dog. At the top floats a cream (#fbf7f0) bar, 64px tall, up to 980px wide, 20px radius, with a menu button on the left (two lines that cross when open), the logo in the middle and a dark "Test ride for free" button on the right. Clicking the menu button grows the bar itself downwards over 550ms on cubic-bezier(.65,0,.2,1) to fit three cards that rise 26px into place 80ms apart: Bikes in moss green (#2f5d46), Ride in mustard (#e8b53b) and Own in brick (#c8553d), each with a heading, a short line, a small line drawing in the corner and three links with arrows that turn 45 degrees on hover. A blurred scrim dims the page. Under 820px the cards stack and their links become wrapping pills; the bar never grows taller than the screen and scrolls inside. Use aria-expanded, focus the first link, loop Tab, close on Escape or a scrim tap and return focus. Reduced motion opens instantly.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by renaming the three cards and their links to match your own site map.
About this mega menu design
Most mega menus drop a separate panel under the header. This mega menu design grows the header itself: the cream bar stretches downward and three coloured cards rise inside it, so the menu feels like part of the page rather than something pasted on top. Each card groups a handful of links under a plain heading, Bikes, Ride and Own, which is how people actually think about buying a bike.
The page behind is a real landing page for an electric cargo bike maker, with an illustrated box bike and the numbers buyers ask about. On phones the cards stack and the links become chunky pills, and the bar stops at the bottom of the screen and scrolls inside, so nothing is ever out of reach.
Why the prompt works
- It describes the growth, the bar animating its height to fit the cards, which is the whole idea.
- It names each card with its colour, heading and three links.
- It plans the phone version, stacked cards and pill links, with a height cap.
- It lists the keyboard rules, from aria-expanded to focus returning to the button.
Where to use it
Product makers, shops and service sites with ten to fifteen important pages that fall into three clear groups.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
