Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsA strong website header does three jobs immediately: identifies the site, exposes the main routes, and remains usable at every viewport size. The best layout depends on your information architecture, content volume, and audience—not on a fashionable menu pattern. Compare each option for recognition, direct access to destinations, consistency across pages, keyboard and screen-reader access, and behavior in narrow or zoomed windows.
What belongs in a website header?
Most websites have a region at the top of every page containing site-wide information such as a logo, search function, and navigation options. Use a page-level <header> landmark and a <nav> landmark instead of anonymous containers. If a page has more than one navigation region, give each an accessible name so users can distinguish “Primary” from “Footer” or “Account” navigation.
A practical header usually contains:
- Identity: a text or image logo and, where necessary, a short product or service name.
- Primary navigation: descriptive links to the destinations most visitors need.
- Search: an alternate route for large or varied collections; it should complement, not replace, important navigation.
- Task or account actions: sign in, contact, cart, or a prominent call to action when those actions are central to the site.
- Context navigation: a second, clearly scoped layer for a product, service, or section that needs its own destinations.
Do not add an item merely because another site has one. Every control consumes space, attention, and keyboard stops.
Header layout examples to compare
1. Brand plus primary links
The identity sits at the start of the row, followed by a short set of primary links. This is the clearest default for a small business, portfolio, documentation site, or marketing website with a stable information architecture.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Strength: destinations are visible without an extra interaction.
- Risk: too many links create wrapping, tiny text, or an unusable mobile row.
- Use it when: visitors can be served by a small number of top-level categories.
2. Brand plus search
Place a search field or search button beside the identity, with navigation still available through visible links or a clearly labeled menu. This works for documentation, news, catalogs, and knowledge bases where users may know a phrase rather than a category.
- Strength: fast access to a large content set.
- Risk: visitors who do not know the right term can be stranded if navigation is hidden or incomplete.
- Use it when: search quality is good and content is broad enough to justify it.
3. Brand, primary navigation, and utility actions
Keep high-frequency destinations in the primary navigation and place lower-frequency actions—account, language, help, or contact—in a utility group. Distinct grouping prevents “Sign in” from competing visually with core content categories.
4. Header paired with service navigation
A product or public service may need a second navigation layer beneath the site-wide identity. The first row establishes the organization; the second exposes destinations for the current service. Give the second region its own label and visual boundary. This pattern supports a coherent experience when one service has several task-focused pages, but it should not be copied as another organization’s branding.
5. Responsive condensed header
On narrow or zoomed viewports, retain the identity and essential destinations while condensing secondary links into a menu or disclosure. There is no single universally correct mobile menu. Choose a pattern that matches your content and test the real implementation with keyboard, touch, zoom, and assistive technology.
Comparison framework
| Pattern | Best fit | Main advantage | Watch for |
|---|---|---|---|
| Brand + links | Small, stable site | Immediate destination visibility | Link overload and wrapping |
| Brand + search | Large content collection | Direct phrase-based discovery | Search replacing essential navigation |
| Brand + links + utilities | Sites with account or support tasks | Separates primary and secondary actions | Too many competing controls |
| Site header + service navigation | Products or services with their own task areas | Clear organization and service context | Ambiguous labels or duplicated routes |
| Condensed responsive header | Narrow or zoomed windows | Preserves access in limited space | Inaccessible menu behavior |
Semantic HTML starter
This structure keeps reading order logical and gives assistive technology recognizable landmarks:
<header class="site-header">
<a class="brand" href="/" aria-label="Acme home">
<img src="/logo.svg" alt="Acme">
</a>
<button type="button" aria-expanded="false" aria-controls="primary-nav">
Menu
</button>
<nav id="primary-nav" aria-label="Primary">
<ul>
<li><a href="/products">Products</a></li>
<li><a href="/guides">Guides</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>Use an empty alt value only when a logo is purely decorative and an adjacent text link already names the site. Otherwise, provide a concise name. The menu button must actually update aria-expanded, show or hide the controlled navigation, and work with Enter, Space, Escape, and focus movement.
Visual and interaction rules
Keep identity and order consistent
Use the same header position, link names, styling, and order across pages. A visitor should not have to relearn navigation after opening an article or checkout page. Breadcrumbs can add orientation when content is several levels deep.
Make focus and names obvious
Provide a visible focus indicator with sufficient contrast. Link text such as “Pricing” or “Download the API reference” is more useful than repeated “Learn more” links. Ensure icon-only controls have an accessible name and a target large enough for touch.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #3
Preserve logical reading order
Do not use CSS or JavaScript to visually move essential content ahead of its meaningful reading order. Screen readers and keyboard users should encounter the brand, menu control, navigation, and search in a predictable sequence.
Design for zoom and reflow
Check the header at normal width, narrow mobile widths, and enlarged browser zoom. Test long translated labels, large text settings, and a keyboard-only path. A layout that looks correct at one desktop width can fail when links wrap or a menu becomes unreachable.
Responsive implementation checklist
- List the destinations that must remain visible or one interaction away.
- Set a breakpoint based on when the actual links stop fitting, not on a device-name convention.
- At the condensed state, keep the brand and menu control visible and labeled.
- Trap focus only when a modal-style menu truly requires it; otherwise provide a clear focus path into the opened navigation.
- Close the menu with Escape, on an explicit close control, and according to your interaction design when a destination is selected.
- Verify that hidden links are not accidentally keyboard-focusable when the menu is closed.
- Retest with zoom, touch, keyboard, and a screen reader.
Common header mistakes and fixes
- Everything is primary: reduce the top level to genuine categories and move account or support actions to a utility group.
- Search is the only route: restore visible categories, a sitemap, or contextual links.
- Unlabeled navigation regions: add distinct
aria-labelvalues such as “Primary” and “Footer”. - Menu opens visually but not semantically: synchronize visibility, focus, and
aria-expanded. - Logo has no useful name: provide meaningful alternative text or an accessible label on the home link.
- Header changes between pages: standardize the component and document exceptions.
- Brand imitation: use your own identity. A recognizable public-sector header pattern does not grant permission to use another organization’s crown, logotype, typeface, or colors.
Documenting and checking header examples
Capture the same page at desktop, mobile, zoomed, signed-in, and cookie-banner states. Compare whether the identity, primary routes, focus treatment, and responsive menu remain understandable. Record viewport, device scale, color scheme, and any injected test data so screenshots are reproducible. A screenshot is evidence of appearance, not proof of keyboard or screen-reader accessibility; perform those tests separately.
Or skip the browser setup
ScreenshotNeo can capture a URL through one request when you need repeatable header examples. Before the capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. It also provides an MCP server for AI agents such as Claude and Cursor, with take_screenshot, get_page_info, and capture_pdf tools.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
See the full parameter reference in the ScreenshotNeo documentation. A basic WebP capture:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo supports PNG, JPEG, WebP, PDF, full-page and element captures, device presets, custom CSS or JavaScript, waits, request blocking, headers, cookies, geolocation, caching, signed links, asynchronous webhooks, bulk capture, and usage reporting. Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Sign up free.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Should a header always include search?
No. Add search when it is a meaningful alternate route through a large or varied collection; a small site may be clearer without it.
How many top-level links should a header have?
There is no universal number. Use the smallest set that reflects your information architecture and keeps labels readable at normal and zoomed sizes.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Is a hamburger menu inaccessible?
Not inherently. Accessibility depends on implementation: a named button, synchronized expanded state, keyboard operation, visible focus, sensible focus order, and reachable links are required.
Can I copy a government header design?
You can study its structural ideas, but use your own identity and branding. Do not imply affiliation by copying protected marks, typefaces, colors, or logotypes.
Frequently Asked Questions
Should a header always include search?
No. Add search when it is a meaningful alternate route through a large or varied collection; a small site may be clearer without it.
How many top-level links should a header have?
There is no universal number. Use the smallest set that reflects your information architecture and keeps labels readable at normal and zoomed sizes.
Is a hamburger menu inaccessible?
Not inherently. Accessibility depends on implementation: a named button, synchronized expanded state, keyboard operation, visible focus, sensible focus order, and reachable links are required.
Can I copy a government header design?
You can study its structural ideas, but use your own identity and branding. Do not imply affiliation by copying protected marks, typefaces, colors, or logotypes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
