MeDo

Gerador de Cabeçalho com IA.

Descreva o topo da sua página e o MeDo constrói a faixa inteira — logo e lockup de marca, uma barra de anúncios opcional acima dela, comportamento de scroll sticky com blur de vidro fosco, e o CTA. Os links de navegação moram dentro dele; o cabeçalho é tudo que os enquadra.

Cabeçalho
Cabeçalho

O cabeçalho é o único componente presente em absolutamente todas as páginas

Mude o que mudar entre a sua landing page, a sua documentação e o seu fluxo de checkout, o cabeçalho permanece constante. Isso o torna o elemento que carrega a identidade da marca, e também o lugar mais caro para errar em performance: um cabeçalho que se desloca enquanto as fontes carregam, ou que não reserva altura antes da hidratação, produz layout shift em todas as páginas que o visitante vê, não em apenas uma. O comportamento sticky tem o mesmo multiplicador. Um blur repintado a cada frame de scroll custa fluidez em todo o site. Como é gerado uma vez e usado em todo lugar, vale a pena superespecificar o cabeçalho no prompt.

6 modelos

Modelos de Cabeçalho que você pode gerar

Cada modelo é um prompt real, não uma captura de tela. Copie para qualquer editor de IA, ou rode no MeDo e receba código 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.

Teste no 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.

Teste no 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.

Teste no 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.

Teste no 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.

Teste no 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.

Teste no MeDo

Como personalizar seu Cabeçalho

Fixe a altura antes de estilizar qualquer coisa

Peça uma altura de cabeçalho explícita. Custa uma linha e remove o layout shift que, de outra forma, acontece em todas as páginas enquanto o logo e as web fonts carregam — a regressão de Core Web Vitals mais comum atribuída a um cabeçalho.

Aplique throttle ao estado de scroll

Um backdrop blur alternado por um listener de scroll cru é repintado dezenas de vezes por segundo. Especifique que o handler de scroll deve receber throttle com requestAnimationFrame, ou ser guiado por um sentinela de IntersectionObserver, para que a rolagem continue suave em hardware intermediário.

Trate a barra de anúncios como parte do cabeçalho

Se você quer uma faixa promocional acima da linha principal, descreva-a no mesmo prompt para que a altura dela seja contabilizada no offset sticky. Acoplada depois, ela ou cobre conteúdo ou conta a própria altura em dobro depois de dispensada.

Especifique o lockup de marca com precisão

Diga se quer apenas o símbolo, o símbolo mais o logotipo, ou um logotipo que se reduz apenas ao símbolo em telas pequenas. O cabeçalho é o único componente em todas as páginas, então é aqui que a consistência de marca é imposta ou perdida.

Quem usa o componente Cabeçalho

Site de produto SaaS

Um cabeçalho branco de 64px com altura fixa, um blur fosco depois da rolagem e uma barra de anúncios dispensável acima dele rodando uma promo de lançamento durante toda a campanha.

Loja de e-commerce

Um cabeçalho de duas linhas em que a linha de cima leva um banner de frete grátis e links de conta e a de baixo abriga a busca e o carrinho, com apenas a linha inferior permanecendo sticky enquanto o cliente rola.

Página de marketing ou landing

Um cabeçalho transparente sobre uma imagem hero em full bleed que passa a um fundo sólido na rolagem, com o logo trocando da variante clara para a escura no mesmo breakpoint.

Site de documentação para desenvolvedores

Um cabeçalho fixo com seletor de versão e gatilho de busca, mais um toggle de sidebar que aparece abaixo do breakpoint de tablet e reserva o próprio espaço para que o conteúdo da documentação nunca seja reposicionado.

Padrões de Cabeçalho para diferentes sites

O mesmo componente cabeçalho, ajustado ao tipo de site em que ele entra.

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.

Estilos e variações de Cabeçalho

Escolha a variação que combina com o resto da página e gere-a.

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.

Cabeçalho em React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML puro — o mesmo cabeçalho, seis formas de integrar.

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

Como adicionar o seu Cabeçalho a um projeto

Quatro passos, de escolher um modelo de cabeçalho até subir para produção.

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.

Perguntas comuns sobre Cabeçalho

O que é um gerador de cabeçalho com IA?

Um gerador de cabeçalho com IA é uma ferramenta que recebe uma descrição em linguagem natural do seu site e produz automaticamente HTML, CSS e JavaScript para um componente de cabeçalho completo e estilizado. Em vez de escrever código de layout do zero, você descreve o que quer e recebe código funcional de volta.

Como crio um cabeçalho de site com IA?

Abra o MeDo, digite um prompt como "Crie um cabeçalho sticky para uma agência de design com logo à esquerda, links para Trabalhos, Sobre e Contato, e um botão 'Vamos conversar' à direita", e MeDo gera o componente completo. Depois você pode copiar o código ou continuar editando com prompts de acompanhamento.

Posso gerar um cabeçalho responsivo com IA?

Sim. MeDo gera cabeçalhos mobile-first por padrão. Informe os breakpoints ou dispositivos que importam — "faça colapsar em menu hamburger abaixo de 768px" — e ele lida com a lógica responsiva para você.

Qual é a diferença entre um cabeçalho (header) e uma navbar?

O cabeçalho é a faixa de largura total no topo de cada página: lockup de marca, barra de anúncios opcional, comportamento sticky e de scroll, e o contêiner que sustenta tudo. A navbar são os links de navegação dentro dele. Construa o cabeçalho quando o que importa é como o topo da página aparece e se comporta em todo o site; veja o gerador de navbar com IA quando sua dúvida for, na verdade, sobre estrutura de links, dropdowns e o menu mobile.

Como impeço meu cabeçalho de causar layout shift?

Dê ao cabeçalho uma altura explícita no prompt para que o navegador reserve o espaço antes de as fontes e o logo carregarem, e reserve lugar para qualquer barra de anúncios em vez de deixá-la empurrar o conteúdo para baixo após a hidratação. Se o cabeçalho for fixed em vez de position: sticky, adicione um padding superior equivalente ao corpo da página. Peça ao MeDo uma altura fixa de cabeçalho e ele aplicará as duas coisas.

Qual é a melhor ferramenta de IA para gerar cabeçalhos de site?

MeDo é construído especificamente para gerar componentes de site individuais a partir de prompts, incluindo cabeçalhos. Ao contrário de ferramentas de chat de IA genéricas, MeDo entende estrutura de componentes, requisitos de acessibilidade e padrões UX do mundo real — então o resultado é mais próximo do que um desenvolvedor front-end sênior entregaria.

Gere seu cabeçalho agora.

Teste qualquer prompt — grátis, sem cadastro necessário.

Comece a construir grátisVer preços
Barra de navegação

Barra de navegação

Descreva seu site e obtenha uma navbar completamente responsiva — com logo, links de navegação, menus dropdown e um menu hamburger mobile — gerada a partir de um único prompt. Sem templates, sem complicação.

Componentes relacionados
Hero Section

Hero Section

Escreva uma frase sobre o que você está construindo e receba um hero completo above-the-fold — título, subtítulo, call-to-action e layout — pronto para publicar.

Componentes relacionados
Breadcrumb

Breadcrumb

Cole um prompt e obtenha um componente de navegação breadcrumb completamente estilizado em segundos. MeDo entende a estrutura do seu site e gera marcação de caminho limpa e acessível — pronta para inserir em qualquer página.

Componentes relacionados