Header

A visual and typographical band or menu commonly situated at the uppermost part of a website’s interface. This area encompasses several interactive elements, including a logo, navigation tags, login prompts, and additional components. Nearly all websites, even the most fundamental ones, incorporate a header on their main page, with many adopting variations of this header across their other web pages.

Website headers bear a dual role:

• Navigation. Above all, they must proficiently steer website visitors towards other sections within the site.
• Marketing. When crafted skillfully, a header has the potential (and should seize it) to serve as a marketing advantage and a promotional conveyance for your enterprise.

What constitutes a website header?

Listed below are several components that can be found within a website header. However, it’s important to recognize that not all headers will incorporate every single one of these elements. The inclusion depends on your industry, business category, and website structure. Moreover, the header might vary based on the specific page you visit on the same website. For instance, the homepage header might contain 5-6 clickable components, while the header on the resources page could have fewer clickable icons.

• Logo. Almost universally, all iterations of a website’s headers prominently showcase the company’s logo. Clicking on the logo is a link to return the user to the homepage, providing a dependable route back to familiar territory if they become disoriented.
• Navigation Links. This is a fundamental part of any website header. Limiting the primary navigation options to 5-7 elements is advisable. However, the pages you link to will differ based on your niche. Some businesses’ navigation menus link to pages like “About Us,” “Products or Services,” “Pricing,” “Resources,” and “Contact Us.” For others, it might lead to pages like “Careers” or “First-time Patients.” The selection hinges on the industry.
• Product. This section offers visitors a comprehensive overview of various features or types of products.
• Solutions. This section guides visitors to a page or hub where they can explore how the company’s platform can be applied in different scenarios or learn about various packages.
• Resources. Often housing the blog, case studies or testimonials, knowledge base, and/or whitepapers.
• Pricing. This link directs visitors to a comprehensive page showcasing the platform’s various subscription packages. It’s worth noting that some SaaS platforms opt to keep their pricing packages private, especially when customized enterprise solutions lack a standardized pricing structure.
• Search Bar. While search bars were more widespread and frequently used in the earlier days of the internet, their prevalence has diminished. Most sites use a magnifying glass icon to indicate the function of the search bar. Search bars are more likely to appear in blog menu headers than in homepage headers.
• Shopping Cart. An essential component for eCommerce websites, this call-to-action (CTA) element is usually placed in the top-right corner and typically features a shopping cart or shopping bag icon.
• Social Media Buttons. Although these are commonly found in a website’s footer, some headers include links to social media channels.
• Login Field. Any website offering a login option should incorporate the login field within its header. Active customers can input their username and password to access their accounts. Many major platforms also allow logging in via a Google account.

Call to Action (CTA). A prevalent characteristic in most of the examples provided, the header often includes a call-to-action. This is a highly utilized element on a website, offering opportunities to support business objectives. CTAs could encourage users to utilize a free tool, sign up for a service, get in touch with the business, start a trial, and more.