AI Navigation Menu Generator.

Describe your sections and MeDo generates the embeddable navigation unit — nested dropdowns, a mega menu with a featured card, a contextual strip for in-page wayfinding, and a drawer tree for touch — with trigger states, keyboard traversal and ARIA wiring already in place.

A Mega Menu Is Your Information Architecture, Made Public

Every other component on a site can be wrong in private; the navigation menu publishes your information architecture to every visitor on every page, so a muddled menu almost always means a muddled hierarchy behind it. That is also the exact boundary with the navbar: the navbar is the page shell — logo, container, sticky behavior, a CTA slot — while the navigation menu is the embeddable unit that carries the hierarchy itself, living inside headers, sidebars, mega panels and contextual strips. The work is editorial before it is technical. Dropdowns past two levels hide instead of organize; anything deeper deserves a page. Mega menus earn their width only when items carry descriptions or imagery — a mega menu of bare links is just a slower list. And mobile is not a resized desktop: hover does not exist on touch, so the same hierarchy needs a second interaction model, usually a disclosure tree inside a drawer. Generate both models from one prompt and the consistency is free.

4 modèles

Modèles de Navigation Menu que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

Wide catalogsMega Menu

Two-Column Mega Panel With Featured Card

For product lines and department stores, where each link needs a line of explanation and one item deserves the spotlight. Overkill for six bare links.

Create a mega menu for the Products trigger in a 64px SaaS header. The panel is 560px wide, white, rounded-xl with a soft shadow, opening on click with a 150ms fade-and-slide. Lay it out as a two-column grid of six links on the left and a featured card on the right: each link pairs a 16px semibold title with a one-line zinc-500 description, and the card holds a 160px image placeholder, a short headline and an indigo call-to-action. Set aria-expanded and aria-haspopup on the trigger, give the panel role="group" with an aria-label, close on Escape with focus returning to the trigger, and close on outside click. Keep every link server-rendered so crawlers and screen readers see the full panel.

Tester dans MeDo

ClassicNested Dropdown

Two-Level Caret Dropdowns

The documentation-site workhorse: sections that open lists, with one list holding its own submenu. Depth stops at two — a third is where usability files a complaint.

Create a classic two-level dropdown navigation for a documentation site header. Top-level items are 14px medium text with a chevron rotating 180 degrees when open; Resources opens a 240px white panel of six links, and Guides opens a 260px submenu with four child links. Follow hover-intent rules where hover is used: a 120ms delay before opening and a 300ms grace period before closing so diagonal mouse paths survive. Keyboard: Enter or ArrowDown opens, arrows move between items, ArrowRight enters a submenu, Escape closes level by level returning focus, and focus-visible rings appear throughout. Use aria-expanded on triggers and plain links inside panels — no menu or menuitem roles, since this is site navigation, not an application menu.

Tester dans MeDo

In-pageContextual Nav

Sliding-Underline Section Switcher

A horizontal strip for wayfinding inside one area — settings, dashboards, docs sections — where the header nav stays global and this stays local.

Create a contextual navigation strip that sits directly under a dashboard header, switching between the five areas of a billing settings page: Overview, Payment methods, Invoices, Team seats and Usage. Render a 48px-tall horizontal row of 14px medium labels with 20px horizontal padding each; the active item shows an indigo underline that slides between items with a 200ms transform transition. Overflowing items scroll horizontally with hidden scrollbars on narrow screens. Mark the current area with aria-current="page", keep each item a real router link so the strip works without JavaScript, and preserve the strip across route changes within the section. On keyboard focus, show a visible ring around the focused item and support ArrowLeft and ArrowRight to move between items.

Tester dans MeDo

DrawerMobile Tree

Disclosure Tree in a Drawer

The touch model for the same hierarchy: no hover, one open section at a time, focus trapped until close. This is the half that resized-desktop menus always get wrong.

Create the mobile variant of a marketing navigation menu: below 768px, a 56px header shows a hamburger button that opens a full-width drawer from the right with role="dialog", aria-modal="true" and focus trapped inside. Top-level items are 16px semibold rows with 16px vertical padding; Products and Resources carry chevrons and expand in place as disclosures — aria-expanded on the row button, children indented 16px at 14px regular weight — rather than navigating away. Only one section expands at a time so the tree never outgrows the viewport. Escape and a scrim click close the drawer and return focus to the hamburger, body scroll locks while open, and every link stays server-rendered for crawlers. No hover behavior anywhere — touch only.

Tester dans MeDo

Comment personnaliser votre Navigation Menu

Cap the hierarchy at two levels

A trigger plus one panel is the depth a visitor can hold; a third level hides content behind hover paths that narrow with each step. When something seems to need deeper nesting, it is asking for its own page — route the menu to that page and let its sub-nav take over.

Choose click or hover with a reason

Click-open behaves identically with mouse, touch and keyboard, which is why it is the safer default. If you want hover for desktop speed, demand the guards explicitly: a 120-150ms open delay, a close grace period so diagonal mouse paths survive, and click as the fallback everywhere else.

Ask for the mobile model in the same prompt

Below the header breakpoint, the menu becomes a drawer with in-place disclosures — a different interaction model, not a narrower panel. Generate both from one prompt so the hierarchy stays single-sourced and the two variants cannot drift apart.

Grid the panel when items carry descriptions

Once each link has a title plus a one-line description or image, a two-column mega grid scans faster than a list; with six or fewer bare links, the plain list wins. Say which case you are in so the panel layout matches the content instead of the template.

Qui utilise le composant Navigation Menu

SaaS product marketing site

A Products trigger opening a 560px mega menu with a two-column link grid and a featured card for the current release, plus Resources as a plain dropdown — desktop click-open, drawer with disclosures below 768px.

E-commerce category bar

Shop, Sale and Brands as dropdown panels where Shop groups 40 categories into four columns with category imagery, because a single-column list of 40 links is where shoppers stop scrolling.

Developer documentation portal

A contextual strip under the docs header switching between Guides, API and CLI for the section you are in, while the site-wide menu stays in the header — two scales of navigation, kept as separate units.

Internal admin console

A workspace-scoped menu where items depend on permissions: disabled triggers render greyed out with a tooltip explaining the missing plan, instead of links that return 403 on click.

Modèles de Navigation Menu pour différents sites web

Le même composant navigation menu, adapté au type de site sur lequel il est publié.

01 / 04

SaaS Marketing Sites

Product lines change quarterly, and the mega menu is where the change becomes visible. Generate the panel from your real section list with descriptions, and keep one featured slot editorial — the menu that treats every item equally helps nobody decide anything.

Styles et variantes de Navigation Menu

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 04

Underline Indicator Bar

Top-level items on a quiet bar where the active section is marked by a 2px underline that slides between triggers. The right choice when the menu is a wayfinding tool first — apps and docs — because the indicator answers 'where am I' without adding weight.

Navigation Menu en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même navigation menu, six façons de l'intégrer.

01 / 03

React Navigation Menu

One open-menu id held in state covers every trigger; Escape on the trigger and outside-click close it. Keep the open value as the item's label or id rather than a boolean per trigger, so adding a fourth item changes no logic.

src/components/NavMenu.tsx

const [open, setOpen] = useState<string | null>(null)

<nav aria-label="Main">
  {items.map((item) => (
    <div key={item.label} className="relative">
      <button
        aria-expanded={open === item.label}
        aria-haspopup="true"
        onClick={() => setOpen(open === item.label ? null : item.label)}
        onKeyDown={(e) => e.key === 'Escape' && setOpen(null)}
      >
        {item.label}
      </button>
      {open === item.label && <Panel item={item} />}
    </div>
  ))}
</nav>

Comment ajouter votre Navigation Menu à un projet

Quatre étapes, du choix d'un modèle de navigation menu à sa mise en production.

01~2min

Write the Hierarchy as a Tree First

List your sections on paper before prompting: what is top-level, what groups under it, and which single item earns the featured card slot. If anything seems to need a third level, cut it — that is a page, not a menu item.

02~1min

Describe Desktop and Mobile in One Prompt

Name the trigger behavior (click, or hover with an intent delay), the panel layout, and the sub-768px drawer with in-place disclosures in the same generation, so the two models ship from one component instead of drifting apart.

03~3min

Generate, Then Walk the Keyboard Paths

The generated menu lands as live, running React + Tailwind. Tab to each trigger, Enter to open, arrows through the panel, Escape back to the trigger — and confirm focus lands where it should. Close whatever gap you find by describing it in a follow-up prompt rather than patching the component by hand.

04~3min

Stress the Labels and the Breakpoint

Paste your real, longest section names, then drag the viewport through 768px and 1024px. Menus fail at realistic label lengths and at the handoff between the bar and the drawer, not at the demo's happy width.

Questions fréquentes à propos de Navigation Menu

Is a navigation menu the same thing as a navbar?

No, and treating them as one component is why headers become unmaintainable. The navbar is the shell around the top of the page — logo, container width, sticky behavior, a CTA slot on the right. The navigation menu is the hierarchy-carrying unit that renders inside that shell, and the same menu should also work in a sidebar, a mega panel or a settings sub-nav without inheriting the header's layout decisions. Generate them as separate concerns and you can redesign the shell without touching the information architecture.

When is a mega menu better than a plain dropdown?

When the items need more than their names to be understood. A mega menu earns its width by pairing each link with a one-line description or an image, which is how a store shows 40 categories without hiding them behind a scroll. If your items are self-explanatory single words — Pricing, Docs, Careers — a mega menu is slower to scan than a tight list and adds visual weight for nothing. A useful test: if a column list would need scrolling, go mega; if it fits on one screen, stay plain.

How do I make a dropdown navigation menu accessible?

Triggers get aria-expanded and aria-haspopup, panels close on Escape and return focus to the trigger, and every item is reachable with Tab and arrow keys. One subtlety matters more than the attributes: do not use role="menu" and menuitem for site navigation. Those roles promise desktop-application menu behavior that screen reader users know how to operate but that a site nav will not actually implement — plain links in an open panel are the honest pattern, and MeDo generates them that way.

How deep should a navigation menu go?

Two levels is the ceiling: a top-level trigger and one panel of links, however the panel is laid out. A third level is possible to build and miserable to use — the hover path narrows with each level, the mobile tree nests past the point of orientation, and nobody retains a three-crumb path in working memory. When content seems to demand depth, the fix is editorial: promote the deeper layer to its own page and let the menu route to that page's section.

How should hover menus behave on touch screens?

They should not exist there. Hover has no equivalent on touch, so the component needs click-to-open as its honest default everywhere. The specific failure to forbid is the first-tap trap, where tapping a parent link navigates and never reveals the children; decide explicitly that the first tap opens the panel and only items inside it navigate. Tablets with mice and keyboard attachments are why feature-detecting 'touch devices' is fragile — state the behavior per breakpoint instead.

Should navigation menu links be rendered into the HTML for SEO?

Yes — server-render every label and destination, including links inside closed panels, rather than fetching them on open. Menus are also how crawlers discover a site's structure; a menu assembled client-side from an API after hydration can leave entire sections effectively undiscoverable. The collapsed state itself is fine: present-in-DOM-but-hidden is normal and indexed, while absent-until-clicked is the risk.

Générez votre navigation menu maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Barre de navigation

Décrivez votre site et obtenez une navbar entièrement responsive — avec logo, liens de navigation, menus déroulants et un menu hamburger mobile — générée depuis un seul prompt. Pas de modèles, pas de bidouillage.

Composants associés

Menu déroulant

Décrivez vos éléments et MeDo génère le menu complet — déclencheur, panneau, sections groupées avec séparateurs, sous-menus, navigation aux flèches et par saisie, fermeture par Escape et clic extérieur, et focus qui revient au déclencheur à la fermeture.

Composants associés

Barre latérale

Décrivez la barre latérale dont vous avez besoin — liens de navigation, menus imbriqués, filtres ou widgets — et MeDo génère du code propre et prêt pour la production en quelques secondes. Pas de scaffolding, pas de boilerplate.

Composants associés

Fil d'Ariane

Saisissez un prompt et obtenez en quelques secondes un composant de navigation fil d'Ariane entièrement stylisé. MeDo comprend la structure de votre site et génère un balisage de chemin propre et accessible — prêt à intégrer dans n'importe quelle page.

Composants associés