Header Sections - TypeScript UI

Headers anchor your site's navigation. These components cover simple navbars, dropdown mega-menus, search-enabled headers, and transparent headers for placement over hero imagery — all with accessible, keyboard-friendly mobile menus.

Component Variants

Header Simple

Acme

Get started

Header Centered

Acme

Get started

Header With Dropdown

Acme

Get started

Header With Search

Acme

Header Transparent (Light, over dark hero)

Acme

Get started

Hero preview

Overlay-ready navigation

Header Transparent (Dark, over light hero)

Acme

Get started

Hero preview

Overlay-ready navigation

Usage

import {
  HeaderSimple,
  HeaderCentered,
  HeaderWithDropdown,
  HeaderWithSearch,
  HeaderTransparent,
} from '@/components/ui/headers';

// Header Simple
<HeaderSimple
  logo={<Logo />}
  links={[
    { label: 'Product', href: '/product' },
    { label: 'Pricing', href: '/pricing' },
  ]}
  cta={{ text: 'Get started', href: '/signup' }}
/>

// Header Centered
<HeaderCentered
  logo={<Logo />}
  links={[{ label: 'Docs', href: '/docs' }]}
  cta={{ text: 'Get started', href: '/signup' }}
/>

// Header With Dropdown
<HeaderWithDropdown
  logo={<Logo />}
  links={[
    {
      label: 'Product',
      href: '#',
      items: [
        { title: 'Components', description: 'Browse the library.', href: '/components', icon: <Blocks /> },
        { title: 'Templates', description: 'Ready-made pages.', href: '/templates', icon: <LayoutTemplate /> },
      ],
    },
    { label: 'Pricing', href: '/pricing' },
  ]}
/>

// Header With Search
<HeaderWithSearch
  logo={<Logo />}
  links={[{ label: 'Docs', href: '/docs' }]}
  user={{ name: 'Jamie Rivera', imageUrl: '/avatar.jpg', href: '/account' }}
  onSearchSubmit={(query) => console.log(query)}
/>

// Header Transparent (for hero overlays)
<HeaderTransparent
  logo={<Logo />}
  links={[{ label: 'Docs', href: '/docs' }]}
  cta={{ text: 'Get started', href: '/signup' }}
  variant="light" // or 'dark'
/>

Props Reference

HeaderSimple

Prop	Type	Default	Description
`logo`	`ReactNode`	Required	Logo rendered on the left
`links`	`{ label: string; href: string }[]`	Required	Primary navigation links
`cta`	`{ text: string; href: string }`	-	Optional call-to-action button
`sticky`	`boolean`	`false`	Pins the header to the top of the viewport

HeaderCentered

Prop	Type	Default	Description
`logo`	`ReactNode`	Required	Logo rendered centered above the nav
`links`	`{ label: string; href: string }[]`	Required	Navigation links, centered below the logo
`cta`	`{ text: string; href: string }`	-	Optional call-to-action button (top right on desktop)
`sticky`	`boolean`	`false`	Pins the header to the top of the viewport

Prop	Type	Default	Description
`logo`	`ReactNode`	Required	Logo rendered on the left
`links`	`HeaderLink[]` (`{ label, href, items? }`)	Required	Nav links; a link with a non-empty `items` array renders a mega-menu
`cta`	`{ text: string; href: string }`	-	Optional call-to-action button
`sticky`	`boolean`	`false`	Pins the header to the top of the viewport

DropdownItem shape used in items: { title: string; description: string; href: string; icon?: ReactNode }.

HeaderWithSearch

Prop	Type	Default	Description
`logo`	`ReactNode`	Required	Logo rendered on the left
`links`	`{ label: string; href: string }[]`	Required	Primary navigation links
`user`	`{ name: string; imageUrl?: string; href?: string }`	-	Renders an avatar (image or initials)
`searchPlaceholder`	`string`	`'Search...'`	Placeholder text for the search input
`onSearchSubmit`	`(query: string) => void`	-	Called when the search form is submitted
`sticky`	`boolean`	`false`	Pins the header to the top of the viewport

HeaderTransparent

Prop	Type	Default	Description
`logo`	`ReactNode`	Required	Logo rendered on the left
`links`	`{ label: string; href: string }[]`	Required	Primary navigation links
`cta`	`{ text: string; href: string }`	-	Optional call-to-action button
`variant`	`'light' \| 'dark'`	`'light'`	Text/icon color scheme for overlaying dark or light backgrounds
`sticky`	`boolean`	`false`	Pins the header to the top of the viewport

All headers render with a static (non-fixed) background by default so they compose naturally inside a page. Set sticky to pin a header to the top of the viewport when it is the site's primary navigation.