MeDo

Generatore di intestazioni IA.

Descrivi la parte alta della pagina e MeDo costruisce l'intera fascia — logo e lockup del brand, una barra annunci opzionale sopra, comportamento sticky allo scroll con blur vetro satinato, e il CTA. I link di navigazione vivono al suo interno; l'intestazione è tutto ciò che li racchiude.

Intestazione
Intestazione

L'intestazione è l'unico componente presente su ogni singola pagina

Qualunque cosa cambi tra la tua landing page, la documentazione e il flusso di checkout, l'intestazione resta costante. Questo la rende l'elemento che porta l'identità del brand, e anche il punto più costoso in cui sbagliare le performance: un'intestazione che si sposta al caricamento dei font, o che non riserva altezza prima dell'hydration, produce layout shift su ogni pagina che un visitatore vede, non su una sola. Il comportamento sticky ha lo stesso moltiplicatore. Un blur ridisegnato a ogni frame di scroll ti costa fluidità su tutto il sito. Poiché viene generata una volta e usata ovunque, vale la pena sovra-specificare l'intestazione nel prompt.

6 modelli

Modelli di Intestazione che puoi generare

Ogni modello è un prompt reale, non uno screenshot. Copialo in qualsiasi editor IA, oppure eseguilo in MeDo e ottieni codice 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.

Prova in 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.

Prova in 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.

Prova in 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.

Prova in 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.

Prova in 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.

Prova in MeDo

Come personalizzare il tuo Intestazione

Fissa l'altezza prima di curare qualsiasi stile

Chiedi un'altezza dell'intestazione esplicita. Costa una riga ed elimina il layout shift che altrimenti si verifica su ogni pagina mentre logo e web font caricano: la regressione dei Core Web Vitals più comune riconducibile a un'intestazione.

Limita lo stato di scroll

Un backdrop blur attivato da un listener di scroll grezzo viene ridisegnato decine di volte al secondo. Specifica che il gestore dello scroll deve essere limitato con requestAnimationFrame, o pilotato da una sentinella IntersectionObserver, così lo scorrimento resta fluido anche su hardware di fascia media.

Tratta la barra annunci come parte dell'intestazione

Se vuoi una fascia promozionale sopra la riga principale, descrivila nello stesso prompt così la sua altezza viene conteggiata nell'offset sticky. Aggiunta dopo, o copre il contenuto o conta due volte la propria altezza una volta chiusa.

Specifica con precisione il lockup del brand

Di' se vuoi solo il simbolo, il simbolo più il lettering, o un lettering che si riduce al solo simbolo su schermi piccoli. L'intestazione è l'unico componente su ogni pagina, quindi è qui che la coerenza del brand si impone o si perde.

Chi usa il componente Intestazione

Sito prodotto SaaS

Un'intestazione bianca di 64px ad altezza fissa, con blur satinato dopo lo scroll e una barra annunci chiudibile sopra che porta una promo di lancio per tutta la durata della campagna.

Negozio e-commerce

Un'intestazione a due righe dove quella superiore porta un banner di spedizione gratuita e i link account e quella inferiore ospita ricerca e carrello, con solo la riga inferiore che resta sticky mentre l'utente scorre.

Pagina marketing o landing

Un'intestazione trasparente sopra un'immagine hero a tutto schermo che passa a uno sfondo solido allo scroll, con il logo che cambia dalla variante chiara a quella scura allo stesso breakpoint.

Sito documentazione sviluppatori

Un'intestazione fissa con selettore di versione e trigger di ricerca, più un toggle della sidebar che appare sotto il breakpoint tablet e riserva il proprio spazio così il contenuto della documentazione non si ridispone mai.

Pattern di Intestazione per siti web diversi

Lo stesso componente intestazione, calibrato sul tipo di sito su cui viene pubblicato.

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.

Stili e varianti di Intestazione

Scegli la variante che si adatta al resto della pagina, poi generala.

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.

Intestazione in React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro o HTML puro: lo stesso intestazione, sei modi per integrarlo.

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' : ''} />
}

Come aggiungere il tuo Intestazione a un progetto

Quattro passaggi, dalla scelta di un modello di intestazione alla messa in produzione.

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.

Domande comuni su Intestazione

Cos'è un generatore di intestazioni IA?

Un generatore di intestazioni IA è uno strumento che prende una descrizione in linguaggio naturale del tuo sito web e produce automaticamente HTML, CSS e JavaScript per un componente intestazione completo e stilizzato. Invece di scrivere codice di layout da zero, descrivi quello che vuoi e ottieni codice funzionante.

Come creo un'intestazione di sito web con l'IA?

Apri MeDo, digita un prompt come "Crea un'intestazione sticky per un'agenzia di design con logo a sinistra, link per Lavori, Chi siamo e Contatti, e un pulsante 'Parliamone' a destra", e MeDo genera il componente completo. Puoi poi copiare il codice o continuare a modificarlo con prompt successivi.

Posso generare un'intestazione responsive con l'IA?

Sì. MeDo genera intestazioni mobile-first per impostazione predefinita. Indica i breakpoint o dispositivi che ti interessano — "falla comprimere in un menu hamburger sotto i 768px" — e gestisce la logica responsive per te.

Qual è la differenza tra un'intestazione (header) e una navbar?

L'intestazione è la fascia a piena larghezza in cima a ogni pagina: lockup del brand, barra annunci opzionale, comportamento sticky e allo scroll, e il contenitore che tiene tutto. La navbar sono i link di navigazione al suo interno. Costruisci l'intestazione quando ti interessa come appare e si comporta la parte alta della pagina su tutto il sito; guarda il generatore di navbar IA quando la tua domanda riguarda in realtà struttura dei link, dropdown e menu mobile.

Come evito che la mia intestazione causi layout shift?

Dai all'intestazione un'altezza esplicita nel prompt così il browser riserva lo spazio prima che carichino font e logo, e riserva spazio per un'eventuale barra annunci invece di lasciarla spingere il contenuto in basso dopo l'hydration. Se l'intestazione è fixed anziché sticky, aggiungi un padding superiore corrispondente al corpo della pagina. Chiedi a MeDo un'altezza fissa dell'intestazione e applicherà entrambe le cose.

Qual è il miglior strumento IA per generare intestazioni web?

MeDo è costruito appositamente per generare singoli componenti web da prompt, incluse le intestazioni. A differenza degli strumenti di chat IA generici, MeDo comprende la struttura dei componenti, i requisiti di accessibilità e i pattern UX reali — quindi il risultato è più vicino a quello che un sviluppatore front-end senior consegnerebbe.

Crea il tuo intestazione adesso.

Prova qualsiasi prompt — gratis, nessuna registrazione richiesta.

Inizia a costruire gratisVedi i prezzi
Barra di navigazione

Barra di navigazione

Descrivi il tuo sito e ottieni una navbar completamente responsiva — con logo, link di navigazione, menu a discesa e un hamburger menu mobile — generata da un singolo prompt. Nessun template, nessuna complicazione.

Componenti correlati
Hero Section

Hero Section

Scrivi una frase su quello che stai costruendo e ottieni un hero completo above-the-fold — titolo, sottotitolo, call-to-action e layout — pronto per la pubblicazione.

Componenti correlati
Breadcrumb

Breadcrumb

Inserisci un prompt e ottieni in pochi secondi un componente di navigazione breadcrumb completamente stilizzato. MeDo comprende la struttura del tuo sito e genera markup di percorso pulito e accessibile — pronto da inserire in qualsiasi pagina.

Componenti correlati