Header
StructureThe topmost section of a page containing the logo, navigation, and often key actions like login or search. It typically stays consistent across all pages.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Header coming soon.
How It Works in Apps/Websites
Headers establish brand identity and provide navigation context. They usually contain: a logo (left), main navigation links (center or right), and utility actions like search, notifications, or user profile (right). On mobile, navigation often collapses into a hamburger menu. Headers can be fixed (sticky) so they remain visible while scrolling.
How AI Interprets This Term
When you say 'header', AI understands: a horizontal bar at the very top of the page, full-width or contained, with logo placement on the left, navigation links, and possibly a dark/light background. It expects height around 60-80px and consistent styling across pages.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a website header with logo on left and navigation on right
Design a sticky header with: logo (left), 5 navigation links (center), search icon and login button (right). Header should be 70px tall with white background and subtle shadow when scrolled.
Show a header that transforms from transparent with white text (over hero image) to solid white with dark text when user scrolls down
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Every multi-page website
- •Apps that need consistent top-level navigation
- •Sites where brand presence matters
When NOT to Use
- •Single-page apps with minimal navigation
- •Fullscreen immersive experiences
- •Checkout flows (use minimal header)
Related Terms
Footer
The bottom section of a webpage containing secondary navigation, legal links, contact information, and often social media links. It provides closure and additional navigation options.
Hero Section
The large, prominent section at the top of a webpage that introduces the main message, often featuring a headline, subheadline, CTA, and visual media.
Navbar
A horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.