Information checked: 21 July 2026.
The header and footer are repeated navigation systems. Their job is to provide orientation, priority routes and essential organisational information without occupying so much space that the page content becomes secondary.
In brief: Keep the header focused and use the footer for stable supporting routes, not a duplicate of every link.
Design the header around priority
| Element | Include when | Avoid |
|---|---|---|
| Logo/name | Always as an identifiable home link | Oversized marks that dominate mobile |
| Primary navigation | A small set of customer routes | Internal department labels |
| Search | The site has enough content to justify it | An icon with no accessible label |
| Primary action | One action is genuinely dominant | Several competing button styles |
| Utility links | Account, language or urgent support is needed | Crowding the main row |
Make mobile navigation explicit
- Use a labelled menu control with a large target.
- Keep focus inside an open panel and return it on close.
- Show the current section.
- Allow submenus to open without hover.
- Test long labels, browser zoom and keyboard navigation.
Use the footer for confidence and recovery
Include contact or location context, legal identity, privacy/cookie links, accessibility and correction routes, key categories and a clear copyright statement. Do not hide legally important information behind an image or script.
Before you publish
From any page, a user should be able to identify the site, reach the main sections, recover from a wrong turn and locate required business information.
A common way this goes wrong
Headers accumulate links and buttons as departments request visibility. On mobile, important navigation may move behind several taps while promotional bars push content below the fold. Footers become unreviewed link dumps containing stale addresses and policies.
Keep these records
- Approved navigation hierarchy
- Header/footer component specification
- Legal and contact information owner
- Mobile and keyboard test record
- Quarterly broken-link review
A practical next move
Remove every header item temporarily and add back only routes needed across most pages. Place task-specific actions in the relevant page instead of making the global navigation carry them.
Sources and date checked
This practical guidance was checked against the following primary sources. Date checked: 21 July 2026.
Keep the decision under your control
Retain the relevant accounts, source material, supplier terms and recovery information. Recheck changing prices, interfaces and rules before acting.