MeDo

AI Header Generator.

Describe the top of your page and MeDo builds the whole strip — logo and brand lockup, an optional announcement bar above it, sticky scroll behavior with a frosted-glass blur, and the CTA. The navigation links live inside it; the header is everything that frames them.

Header
Header

The Header Is the Only Component on Every Single Page

Whatever else changes between your landing page, your docs, and your checkout flow, the header is constant. That makes it the element that carries brand identity, and it also makes it the most expensive place to get performance wrong: a header that shifts as fonts load, or that reserves no height before hydration, produces layout shift on every page a visitor sees rather than just one. The sticky behavior has the same multiplier. A blur that repaints on every scroll frame costs you smoothness site-wide. Because it is generated once and used everywhere, the header is worth over-specifying in the prompt.

6 templates

Header Templates You Can Generate

Every template is a real prompt, not a screenshot. Copy it into any AI editor, or run it in MeDo and get React + Tailwind code back.

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.

Try 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.

Try 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.

Try 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.

Try 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.

Try 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.

Try in MeDo

How to Customize Your Header

Pin the height before you style anything

Ask for an explicit header height. It costs one line and removes the layout shift that otherwise happens on every page as the logo and web fonts load, which is the single most common Core Web Vitals regression traced back to a header.

Throttle the scroll state

A backdrop blur that toggles on a raw scroll listener repaints dozens of times per second. Specify that the scroll handler should be throttled with requestAnimationFrame, or driven by an IntersectionObserver sentinel, so scrolling stays smooth on mid-range hardware.

Treat the announcement bar as part of the header

If you want a promo strip above the main row, describe it in the same prompt so its height is accounted for in the sticky offset. Bolted on later, it either covers content or double-counts its height once dismissed.

Specify the brand lockup precisely

Say whether you want a mark alone, a mark plus wordmark, or a wordmark that drops to just the mark on small screens. The header is the one component on every page, so this is where brand consistency is either enforced or lost.

Who Uses the Header Component

SaaS product site

A 64px white header with a fixed height, a frosted blur once scrolled, and a dismissible announcement bar running a launch promo above it for the duration of the campaign.

E-commerce storefront

A two-row header where the top row carries a free-shipping banner and account links and the bottom row holds search and the cart, with only the bottom row remaining sticky as the shopper scrolls.

Marketing or landing page

A transparent header sitting over a full-bleed hero image that transitions to a solid background on scroll, with the logo swapping from a light to a dark variant at the same breakpoint.

Developer documentation site

A fixed header with a version switcher and a search trigger, plus a sidebar toggle that appears below the tablet breakpoint and reserves its own space so the docs content never reflows.

Header Patterns for Different Websites

The same header component, tuned to the kind of site it ships on.

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.

Header Styles and Variants

Pick the variant that matches the rest of the page, then generate it.

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.

Header in React, Next.js, Vue and Svelte

React, Next.js, Vue 3, SvelteKit, Astro or plain HTML — the same header, six ways to drop it in.

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

How to Add Your Header to a Project

Four steps, from picking a header template to shipping it in 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.

Common Questions About Header

What is an AI header generator?

An AI header generator is a tool that takes a natural-language description of your website and automatically produces the HTML, CSS, and JavaScript for a complete, styled header component. Instead of writing layout code from scratch, you describe what you want and get working code back.

How do I create a website header with AI?

Open MeDo, type a prompt like "Create a sticky header for a design agency with logo on the left, links for Work, About, and Contact, and a 'Let's talk' button on the right", and MeDo generates the full component. You can then copy the code or continue editing it with follow-up prompts.

Can I generate a responsive header with AI?

Yes. MeDo generates mobile-first headers by default. Tell it the breakpoints or devices you care about — "make it collapse to a hamburger menu below 768px" — and it handles the responsive logic for you.

What is the difference between a header and a navbar?

The header is the full-width strip at the top of every page: brand lockup, optional announcement bar, sticky and scroll behavior, and the container that holds everything. The navbar is the navigation links within it. Build the header when you care about how the top of the page looks and behaves across the whole site; see the AI navbar generator when your question is really about link structure, dropdowns, and the mobile menu.

How do I stop my header from causing layout shift?

Give the header an explicit height in the prompt so the browser reserves the space before fonts and the logo load, and reserve room for any announcement bar rather than letting it push content down after hydration. If the header is fixed rather than sticky, add matching top padding to the page body. Ask MeDo for a fixed header height and it will apply both.

What is the best AI tool for generating website headers?

MeDo is purpose-built for generating individual website components from prompts, including headers. Unlike general-purpose AI chat tools, MeDo understands component structure, accessibility requirements, and real-world UX patterns — so the output is closer to what a senior front-end developer would ship.

Generate your header now.

Try any prompt — free, no signup needed.

Start building freeView pricing
Navbar

Navbar

Describe your site and get a fully responsive navbar — with logo, nav links, dropdown menus, and a mobile hamburger — generated from a single prompt. No templates, no fiddling.

Related components
Sidebar

Sidebar

Describe the sidebar you need — navigation links, nested menus, filters, or widgets — and MeDo generates clean, production-ready code in seconds. No scaffolding, no boilerplate.

Related components
Hero Section

Hero Section

Write one sentence about what you are building and get a complete above-the-fold hero — headline, subheading, call-to-action, and layout — ready to ship.

Related components