Navbars / Headers

Navbars / Headers 10 · Editor top bar

A product header for an editor: logo, page name, save state and share and publish buttons.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='border-b border-neutral-200 bg-white'><div class='flex h-14 items-center justify-between px-4'><div class='flex items-center gap-4'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'></a><span class='h-5 w-px bg-neutral-200'></span><nav class='flex items-center gap-2 text-sm'><a href='#' class='text-neutral-500 hover:text-black'>Projects</a><span class='text-neutral-300'>/</span><span class='font-medium text-black'>Public site: Home</span></nav></div><div class='flex items-center gap-2'><span class='mr-2 text-xs text-neutral-500'>Saved</span><button type='button' class='rounded-lg border border-neutral-300 px-3 py-1.5 text-sm font-medium text-black hover:bg-neutral-50'>Share</button><button type='button' class='rounded-lg bg-black px-3 py-1.5 text-sm font-medium text-white'>Publish</button><span class='ml-1 grid h-8 w-8 place-items-center rounded-full bg-neutral-900 text-xs font-semibold text-white'>SJ</span></div></div></header>

Navbars / Headers 09 · Utility bar and main bar

Two rows: a small grey utility row with links, then the main navigation with the logo.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='bg-white'><div class='border-b border-neutral-200 bg-neutral-50'><div class='mx-auto flex h-9 max-w-6xl items-center justify-between px-6 text-xs text-neutral-500'><span>Free to try in your browser</span><div class='flex gap-5'><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>Support</a><a href='#' class='hover:text-black'>GitHub</a></div></div></div><div class='border-b border-neutral-200'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><nav class='hidden items-center gap-8 text-sm font-medium text-black md:flex'><a href='#'>Product</a><a href='#'>Library</a><a href='#'>Pricing</a><a href='#'>Blog</a></nav><a href='#' class='rounded-lg border border-black px-4 py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Sign in</a></div></div></header>

Navbars / Headers 08 · Dropdown panel open

Desktop bar with the Product menu open as a two-column panel of links and short descriptions.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='relative border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><nav class='hidden items-center gap-8 text-sm md:flex'><a href='#' class='font-medium text-black'>Product ⌄</a><a href='#' class='text-neutral-600 hover:text-black'>Docs</a><a href='#' class='text-neutral-600 hover:text-black'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div><div class='absolute left-1/2 top-16 z-10 hidden w-full max-w-2xl -translate-x-1/2 rounded-2xl border border-neutral-200 bg-white p-3 shadow-xl md:block'><div class='grid grid-cols-2 gap-1'><a href='#' class='rounded-xl p-4 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>Visual editor</p><p class='mt-1 text-sm text-neutral-500'>Draw or paste, then edit on a canvas.</p></a><a href='#' class='rounded-xl p-4 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>Code panel</p><p class='mt-1 text-sm text-neutral-500'>HTML, CSS, JS and config in tabs.</p></a><a href='#' class='rounded-xl p-4 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>Figma plugin</p><p class='mt-1 text-sm text-neutral-500'>Bring a frame in as HTML.</p></a><a href='#' class='rounded-xl p-4 hover:bg-neutral-50'><p class='text-sm font-semibold text-black'>MCP server</p><p class='mt-1 text-sm text-neutral-500'>Let Claude or Cursor save designs.</p></a></div></div><div class='h-48'></div></header>

Navbars / Headers 07 · Mobile menu open

The phone version with the menu open: logo and close button, then a stacked link list and button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='mx-auto max-w-sm border border-neutral-200 bg-white'><div class='flex h-16 items-center justify-between px-5'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><button type='button' class='grid h-10 w-10 place-items-center rounded-lg border border-neutral-200 text-black' aria-label='Close menu'><svg class='h-5 w-5' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'><path stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/></svg></button></div><nav class='border-t border-neutral-200 px-5 py-4'><a href='#' class='block border-b border-neutral-100 py-3 text-lg font-medium text-black'>Product</a><a href='#' class='block border-b border-neutral-100 py-3 text-lg font-medium text-black'>Docs</a><a href='#' class='block border-b border-neutral-100 py-3 text-lg font-medium text-black'>Pricing</a><a href='#' class='block py-3 text-lg font-medium text-black'>GitHub</a><a href='#' class='mt-4 block rounded-lg bg-black px-4 py-3 text-center text-sm font-semibold text-white'>Open editor</a></nav></header>

Navbars / Headers 06 · With announcement bar

A thin black announcement strip above a clean white navigation bar.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header><div class='bg-black px-6 py-2 text-center text-xs text-white'>Interactions are here: make a menu without writing JavaScript. <a href='#' class='font-semibold underline'>Read more</a></div><div class='border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><nav class='hidden items-center gap-8 text-sm text-neutral-600 md:flex'><a href='#' class='hover:text-black'>Product</a><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>Pricing</a></nav><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white'>Open editor</a></div></div></header>

Navbars / Headers 05 · Floating pill

A rounded floating nav with a soft shadow on a light grey background.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='bg-neutral-50 px-4 py-6'><div class='mx-auto flex max-w-3xl items-center justify-between rounded-full border border-neutral-200 bg-white px-5 py-2.5 shadow-sm'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-5 w-auto'></a><nav class='hidden items-center gap-6 text-sm text-neutral-600 sm:flex'><a href='#' class='hover:text-black'>Product</a><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>Pricing</a></nav><a href='#' class='rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white'>Try it</a></div></header>

Navbars / Headers 04 · Search and avatar

App-style header with a search field, a few links and a round avatar.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center gap-6 px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><div class='relative hidden max-w-md flex-1 md:block'><input type='search' placeholder='Search designs' class='w-full rounded-lg border border-neutral-200 bg-neutral-50 py-2 pl-4 pr-12 text-sm outline-none focus:border-black'><span class='absolute right-3 top-1/2 -translate-y-1/2 rounded border border-neutral-200 px-1.5 text-xs text-neutral-400'>/</span></div><nav class='ml-auto flex items-center gap-6 text-sm text-neutral-600'><a href='#' class='hover:text-black'>Projects</a><a href='#' class='hover:text-black'>Library</a><span class='grid h-8 w-8 place-items-center rounded-full bg-black text-xs font-semibold text-white'>SJ</span></nav></div></header>

Navbars / Headers 03 · Black bar

Black header with a white logo, light grey links and a white button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='bg-black'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo-light.png' alt='Windcraft' class='h-6 w-auto'></a><nav class='hidden items-center gap-8 text-sm text-neutral-400 md:flex'><a href='#' class='hover:text-white'>Product</a><a href='#' class='hover:text-white'>Docs</a><a href='#' class='hover:text-white'>Pricing</a><a href='#' class='hover:text-white'>GitHub</a></nav><a href='#' class='rounded-lg bg-white px-4 py-2 text-sm font-semibold text-black hover:bg-neutral-200'>Open editor</a></div></header>

Navbars / Headers 02 · Centered logo

Links on the left, the logo in the middle, actions on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='border-b border-neutral-200 bg-white'><div class='mx-auto grid h-16 max-w-6xl grid-cols-3 items-center px-6'><nav class='hidden gap-6 text-sm text-neutral-600 md:flex'><a href='#' class='hover:text-black'>Product</a><a href='#' class='hover:text-black'>Docs</a></nav><a href='#' class='col-start-2 justify-self-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><div class='col-start-3 flex items-center justify-end gap-4 text-sm'><a href='#' class='text-neutral-600 hover:text-black'>Sign in</a><a href='#' class='rounded-full bg-black px-4 py-2 font-medium text-white'>Start</a></div></div></header>

Navbars / Headers 01 · Classic bar

White bar with the logo on the left, centered links and a black button on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <header class='border-b border-neutral-200 bg-white'><div class='mx-auto flex h-16 max-w-6xl items-center justify-between px-6'><a href='#'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='h-6 w-auto'></a><nav class='hidden items-center gap-8 text-sm text-neutral-600 md:flex'><a href='#' class='hover:text-black'>Product</a><a href='#' class='hover:text-black'>Docs</a><a href='#' class='hover:text-black'>Pricing</a><a href='#' class='hover:text-black'>GitHub</a></nav><div class='flex items-center gap-3'><a href='#' class='hidden text-sm text-neutral-600 hover:text-black sm:block'>Sign in</a><a href='#' class='rounded-lg bg-black px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800'>Open editor</a></div></div></header>