Générateur d'en-tête IA.

Décrivez le haut de votre page et MeDo construit toute la bande — logo et lockup de marque, un bandeau d'annonce optionnel au-dessus, comportement sticky au défilement avec un flou verre dépoli, et le CTA. Les liens de navigation vivent à l'intérieur ; l'en-tête est tout ce qui les encadre.

L'en-tête est le seul composant présent sur absolument chaque page

Quoi qu'il change entre votre landing page, votre documentation et votre tunnel de paiement, l'en-tête reste constant. C'est donc l'élément qui porte l'identité de marque, et aussi l'endroit le plus coûteux où rater la performance : un en-tête qui se décale au chargement des polices, ou qui ne réserve aucune hauteur avant l'hydratation, produit du layout shift sur chaque page vue par un visiteur, pas seulement une. Le comportement sticky a le même multiplicateur. Un flou redessiné à chaque frame de défilement vous coûte de la fluidité sur tout le site. Comme il est généré une fois et utilisé partout, l'en-tête mérite d'être surspécifié dans le prompt.

6 modèles

Modèles de En-tête 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.

Fixed heightAcme

Sticky Header With a Frosted Scroll State

The default worth starting from: a pinned height and a blur that only appears once you have scrolled. Specifying the height is the whole point — a header that sizes to its content shifts on every page as the webfont swaps in.

Create a sticky website header with an explicit 64px height set on the container so the space is reserved before the logo and webfonts load. Logo mark plus wordmark on the left, four navigation links in the middle, one filled Get started button on the right. Start with a solid white background and a 1px bottom border, then switch to a semi-transparent surface with a backdrop blur once the page scrolls past 80px, transitioning over 200ms. Drive the state from an IntersectionObserver watching a 1px sentinel above the header rather than a scroll listener, so nothing runs on the scroll thread. Below 768px, replace the links with a hamburger that opens a drawer.

Tester dans MeDo

Announcement barMega

Promo Bar Above a Sticky Row

Two stacked strips where only the lower one stays pinned. The trap is the sticky offset: dismiss the bar without recomputing it and the header floats 36px below the viewport top for the rest of the session.

Create a two-part header: a dismissible 36px announcement bar on an accent background with a short promo line, an inline link and a close button, and beneath it a 64px main row with logo, links and a CTA. Only the main row is sticky. Persist the dismissal in localStorage so the bar does not return on the next page, and recompute the sticky top offset when it is removed so the main row still pins flush to the viewport top. Render the bar server-side and hide it with a class rather than mounting it after hydration, so dismissing it never causes a visible reflow of the page below.

Tester dans MeDo

TransparentShipfast

Transparent Over Hero, Solid on Scroll

For landing pages with a full-bleed hero behind the header. Everything that depends on the background — logo variant, link color, border, button style — has to flip in one state change, not four.

Create a header that overlays a full-bleed hero image: fully transparent with no border at the top of the page, with a light logo variant and white links. Once the page scrolls past the hero height, switch in a single state change to a solid white surface, a dark logo variant, dark links and a 1px bottom border, transitioning over 200ms. Keep the header height fixed at 72px in both states so the switch does not move the links. Add a scroll-margin-top equal to the header height on all headings so in-page anchors do not land behind the bar.

Tester dans MeDo

Two-rowShop

Utility Row Over a Sticky Search Row

A storefront header where the top row scrolls away and the search row stays. Pinning both eats 100px of a phone viewport, which is most of a product image.

Create a two-row e-commerce header. The top row, 32px tall, carries a free-shipping message on the left and Track order, Help and account links on the right, and scrolls away with the page. The bottom row, 64px tall, holds the logo, a wide search input, a wishlist icon and a cart button with a count badge, and is the only row that stays sticky. Announce cart count changes through an aria-live="polite" region. Below 768px, collapse the top row entirely, keep logo, search icon and cart in the sticky row, and open search as a full-width overlay when the icon is tapped.

Tester dans MeDo

App shellDocs

Fixed Header With a Sidebar Toggle

A docs header that has to coordinate with a sidebar below it. Reserve the toggle button's space at every breakpoint, otherwise the logo jumps sideways when the button appears at the tablet threshold.

Create a fixed 56px documentation header: a sidebar toggle button on the far left that is only interactive below 1024px but keeps its 40px slot reserved at every breakpoint so the logo never shifts, then the logo, a version switcher, a search button with a Command-K hint, a theme toggle and a GitHub link. Because the header is fixed rather than sticky, add matching top padding to the page body and set scroll-margin-top on every heading so deep links from search land below the bar. Give the toggle aria-expanded and aria-controls pointing at the sidebar element.

Tester dans MeDo

StaticStudio

Oversized Wordmark, No Sticky

Not everything needs to be pinned. A tall static header that scrolls away gives an agency site its full viewport back, and removes the scroll listener along with it.

Create a static header for a design studio that scrolls away with the page rather than sticking: 120px tall, with an oversized lowercase wordmark on the left, a one-line location and availability note beneath it, and four right-aligned links in a light weight with wide letter spacing. No border, no background change, no scroll listener at all. Below 640px, reduce the height to 80px, keep the wordmark, and move the four links into a full-screen overlay opened by a text Menu button — labelled Menu rather than a hamburger icon, and closing on Escape with focus returned to the button.

Tester dans MeDo

Comment personnaliser votre En-tête

Figez la hauteur avant de styliser quoi que ce soit

Demandez une hauteur d'en-tête explicite. Cela coûte une ligne et supprime le layout shift qui se produit sinon sur chaque page au chargement du logo et des polices web, la régression Core Web Vitals la plus courante imputable à un en-tête.

Limitez l'état de défilement

Un backdrop blur activé par un écouteur de défilement brut se redessine des dizaines de fois par seconde. Précisez que le gestionnaire de défilement doit être limité avec requestAnimationFrame, ou piloté par une sentinelle IntersectionObserver, pour que le défilement reste fluide sur du matériel de milieu de gamme.

Traitez le bandeau d'annonce comme une partie de l'en-tête

Si vous voulez une bande promotionnelle au-dessus de la rangée principale, décrivez-la dans le même prompt pour que sa hauteur soit prise en compte dans le décalage sticky. Rajoutée après coup, elle masque le contenu ou compte sa hauteur deux fois une fois fermée.

Spécifiez précisément le lockup de marque

Dites si vous voulez le symbole seul, le symbole plus le logotype, ou un logotype qui se réduit au seul symbole sur petits écrans. L'en-tête est le seul composant présent sur chaque page : c'est donc ici que la cohérence de marque s'impose ou se perd.

Qui utilise le composant En-tête

Site produit SaaS

Un en-tête blanc de 64px à hauteur fixe, un flou dépoli une fois défilé, et un bandeau d'annonce fermable au-dessus diffusant une promo de lancement pendant toute la campagne.

Boutique e-commerce

Un en-tête à deux rangées où la rangée du haut porte une bannière de livraison gratuite et les liens de compte, et celle du bas la recherche et le panier, seule la rangée inférieure restant sticky pendant que l'acheteur défile.

Page marketing ou landing

Un en-tête transparent posé sur une image hero pleine largeur qui passe à un fond solide au défilement, le logo basculant d'une variante claire à une variante sombre au même breakpoint.

Site de documentation développeur

Un en-tête fixe avec un sélecteur de version et un déclencheur de recherche, plus un toggle de barre latérale qui apparaît sous le breakpoint tablette et réserve son propre espace pour que le contenu de la documentation ne se recompose jamais.

Modèles de En-tête pour différents sites web

Le même composant en-tête, adapté au type de site sur lequel il est publié.

01 / 06

SaaS Product Header

One fixed-height sticky strip with a brand lockup, links and a single CTA. Because it renders on every route, any layout shift here is multiplied across your whole Core Web Vitals field data rather than isolated to the landing page.

Styles et variantes de En-tête

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

01 / 06

Fixed-Height Sticky Header

An explicit height on the container, pinned to the top. The height is not a styling detail — without it the strip resizes as the logo and webfonts resolve, and that shift lands on every page a visitor opens.

En-tête en React, Next.js, Vue et Svelte

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

01 / 06

React Header

Keep the scroll state in the header itself with an IntersectionObserver on a sentinel div, not a scroll listener. Render it once above your router outlet so the observer is created once per session.

src/components/Header.tsx

export function Header() {
  const [pinned, setPinned] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    const io = new IntersectionObserver(
      ([e]) => setPinned(!e.isIntersecting)
    )
    io.observe(ref.current)
    return () => io.disconnect()
  }, [])

  return <header className={pinned ? 'backdrop-blur' : ''} />
}

Comment ajouter votre En-tête à un projet

Quatre étapes, du choix d'un modèle de en-tête à sa mise en production.

01~30s

Pick a Header Template

Decide two things first: does the strip stay pinned, and is there an announcement bar. Those choices drive the sticky offset and the scroll state, and they are the awkward ones to retrofit.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the explicit pixel height and the sentinel-based scroll state in the text — those two sentences are what stop the header shifting and repainting on every page.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "make the blur stronger", "persist the dismissed announcement bar", "flip the logo variant on scroll".

04~2min

Mount It in Your Layout

Put the header above {children} in your root layout. If it is fixed rather than sticky, add matching top padding to the body and scroll-margin-top to your headings so anchor links do not land underneath it.

Questions fréquentes à propos de En-tête

Qu'est-ce qu'un générateur d'en-tête IA ?

Un générateur d'en-tête IA est un outil qui prend une description en langage naturel de votre site web et produit automatiquement le HTML, le CSS et le JavaScript pour un composant d'en-tête complet et stylisé. Au lieu d'écrire du code de mise en page de zéro, vous décrivez ce que vous voulez et vous obtenez du code fonctionnel en retour.

Comment créer un en-tête de site web avec l'IA ?

Ouvrez MeDo, tapez un prompt comme "Crée un en-tête sticky pour une agence de design avec le logo à gauche, des liens pour Travaux, À propos et Contact, et un bouton 'Parlons-nous' à droite", et MeDo génère le composant complet. Vous pouvez ensuite copier le code ou continuer à le modifier avec des prompts de suivi.

Puis-je générer un en-tête responsive avec l'IA ?

Oui. MeDo génère des en-têtes mobile-first par défaut. Indiquez-lui les points de rupture ou appareils qui vous intéressent — "faites-le se réduire en menu hamburger sous 768px" — et il gère la logique responsive pour vous.

Quelle est la différence entre un en-tête (header) et une navbar ?

L'en-tête est la bande pleine largeur en haut de chaque page : lockup de marque, bandeau d'annonce optionnel, comportements sticky et au défilement, et le conteneur qui abrite le tout. La navbar, ce sont les liens de navigation qui s'y trouvent. Construisez l'en-tête quand ce qui compte est l'apparence et le comportement du haut de page sur tout le site ; consultez le générateur de navbar IA quand votre question porte en réalité sur la structure des liens, les menus déroulants et le menu mobile.

Comment empêcher mon en-tête de provoquer du layout shift ?

Donnez à l'en-tête une hauteur explicite dans le prompt pour que le navigateur réserve l'espace avant le chargement des polices et du logo, et réservez la place d'un éventuel bandeau d'annonce au lieu de le laisser pousser le contenu vers le bas après l'hydratation. Si l'en-tête est fixed plutôt que sticky, ajoutez un padding supérieur correspondant au corps de la page. Demandez à MeDo une hauteur d'en-tête fixe et il appliquera les deux.

Quel est le meilleur outil IA pour générer des en-têtes web ?

MeDo est conçu spécifiquement pour générer des composants web individuels à partir de prompts, y compris les en-têtes. Contrairement aux outils de chat IA à usage général, MeDo comprend la structure des composants, les exigences d'accessibilité et les modèles UX du monde réel — donc le résultat est plus proche de ce qu'un développeur front-end senior livrerait.

Générez votre en-tête 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

Hero Section

Écrivez une phrase sur ce que vous construisez et obtenez un hero complet above-the-fold — titre, sous-titre, appel à l'action et mise en page — prêt à publier.

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