AI Prompt for an HTML Mega Menu Navigation Bar

Create a mega-menu navbar in HTML from this AI prompt template.

You can enter the following prompt into a Large Language Model (LLM) such as ChatGPT, Claude, or Gemini to create a mega-menu navigation bar in HTML and CSS. The prompt is quite specific, which helps nudge the AI to a result that's likely what you're looking for. Feel free to tweak it as you please.

The Prompt:

Create the HTML and CSS for a fully responsive "mega menu" navigation bar.

Features:

  • A standard navigation bar with a logo and top-level links like "Home," "Products," "Solutions," and "Contact."
  • When hovering over the "Products" link on desktop, a large dropdown panel (mega menu) should appear.
  • This mega menu should have a multi-column layout. For example, three columns:
    • Column 1: "For Individuals" with links to Product A and Product B.
    • Column 2: "For Teams" with links to Product C and Product D.
    • Column 3: An image or a featured product highlight with a title and a short description.

Core Requirements:

  • Technology: HTML and CSS only (no JavaScript needed for the hover effect). Provide the HTML and CSS in a single code block, with the CSS in a <style> tag.
  • Accessibility: The menu must be keyboard navigable. Users should be able to Tab through the top-level links and into the mega menu. Use appropriate ARIA attributes (aria-haspopup, aria-expanded).
  • Responsiveness: On mobile devices, the mega menu should be replaced by a standard "hamburger" menu icon. When clicked (this part can be non-functional, just visually styled), it should reveal a single-column, scrollable list of all navigation links.
  • Best Practices: The code should be semantic (<nav>, <ul>, <li>). Use modern CSS for the layout and transitions. The CSS should be well-structured and commented.

The Result

When I ran the above prompt against Google Gemini Pro 2.5, I got the following result:

Screenshot of mega-menu navbar AI prompt result

Minor Tweak

When I first designed/ran the prompt, I forgot to specify that I wanted embedded CSS (i.e. CSS and HTML in the same code block, as a single file). So the AI generated two code blocks; one for the HTML and one for the CSS. While this is what we would usually want (assuming we use external style sheets), for the purposes of my example here, I wanted to have them all in one file/code block. So I followed up with "Provide the HTML and CSS in a single code block, with the CSS in a 'style' tag". The AI updated the code accordingly, and that's the code you see here. I've also included this line in the above prompt.

How to Use The Prompt

  1. Copy the entire prompt text.
  2. Paste it into your preferred LLM (e.g., ChatGPT, Claude, Gemini, etc).
  3. Review the generated code. You can ask the LLM for modifications, like changing colors or fonts, by replying with follow-up instructions.

The prompt includes a Core Requirements section that instructs the LLM to focus on quality, accessibility, and responsive design, ensuring you get a professional-grade starting point.

Be sure to check the prompt carefully for anything you want to change first. You can also use it as a template starter for future projects.