Websites vary in style, format, and quality. But one thing they all have in common? Headers—that strip at the top that makes for easy navigation.
Despite taking up minimal real estate, headers are the most heavily engaged-with element on a website. Businesses looking to leave an impression will strive to strike a perfect balance—of providing an easy and intuitive yet unique and stimulating experience.
In this post we’ll be sharing 24 website header examples while breaking down:
This way, you can provide a solid user experience while also supporting your marketing goals.
A website header is a visual typographic strip or menu that typically runs across the top of a website. It contains a number of clickable components, like a logo, navigational tags, login buttons, and more. Virtually all websites—even the most basic websites—feature a header on their homepage, and many have variations of the header on the rest of their pages.
Here’s a very basic, instantly-recognizable website header:
As alluded to above, website headers have a dual responsibility:
Below you’ll find a number of elements that can appear in a website header. But it’s important to note that not every header will feature all of these. It all depends on your industry, business type, and website format. Furthermore, a header may change depending on which page you’re on within the same site. For example, the homepage header may feature 5-6 clickable elements, whereas on the resources page, the header might include fewer clickable icons.
With very few exceptions, all variations of a website’s headers will prominently feature the company logo which, when clicked on, brings the user back to the homepage. If they get lost, they can always count on it to direct them back to familiar territory.
This is also core to any website header. Typically you’ll want to keep your main navigation options to between 5-7 elements, but which pages you link to will vary depending on your niche. For some businesses, the navigation menu links to the about us page, product or services page, pricing page, resources page, and contact us page. For others, it’s to the careers page or first-time patients page. It all depends on the industry.
Most SaaS and tech website headers look something like this:
In the earlier days of the internet, search bars were far more pervasive and heavily used than they are today. You’ll know a search bar when you see it, with most sites using a magnifying glass icon to indicate the element’s function.
You’re more likely to find a search bar on a blog menu header than on the homepage header. Still, some sites feature it on their homepage header. Brightcove, a leading video hosting platform, interestingly enough features a search bar but doesn’t feature the more common pricing element.
A staple of ecommerce websites, this CTA should be on the top right and either a shopping cart or shopping bag icon.
Though these are more commonly displayed in a website’s footer, some website headers include links to social channels. Here’s an example:
Any website that has a login option should include the login field in its header as well. If you’re an active customer, you’ll have a user and password that you can punch in to gain access. Most major platforms offer you the option of gaining access via your Google account, as well.
One thing you’ll notice in almost all of the examples in this post is that the header contains a call to action. As this is the most heavily used element on a website, you’ll want to take advantage of that to help support your business goals. This could be to use a free tool, sign up for something, contact the business, start a free trial, and more.
Though they have just a few components, there are a ton of ways to configure your website header. Let’s look at even more website examples to give you ideas and inspiration.
Basic but effective, Zoho has just four clickable navigation elements plus a search bar. Notice also how Zoho opted for right alignment. This accentuates the logo, giving it more room to draw visitors’ attention.
While the header itself is pretty ordinary, the banner on top is meant to draw attention to something new, important, and/or exciting. Elementor used this recently to announce that it now offers cloud hosting for WordPress.
SE Ranking is currently using its notification bar to promote support for Ukraine:
These banners will, of course, include a CTA. Once clicked on, visitors will be directed to a designated landing page detailing the offer in the banner.
A two-tiered header can help present more navigational options without overwhelming visitors with one continuous line of icons.
Amplitude added a notification bar above its double-tiered header to promote its upcoming conference. The notification bar is equal in length to the header, making it feel less cluttered and more like a separate section of the site.
Some sites affix the header so that it sticks with visitors as they scroll down the page. Their rationale is simple: Provide your visitors with the option of navigating to any part of your website at any time.
This header sticks with you all the way to the bottom of the site.
As seen on Mixpanel’s homepage, a floating header is similar to a sticky bar, the difference being that when you scroll down, you see the webpage below and above the header, thus creating a floating effect.
Some websites can’t afford to be scarce with the information they share in their headers. In those cases, using a mega menu can prove very useful.
Usually seen on retail and ecommerce websites, multi-navigational headers allow for users to easily jump from one sister company’s site to another.
The first of the non-traditional header examples, you’ll find many of the same navigation menu items hanging vertically to the left.
Same concept but this time aligned vertically on the right. These guys took it a step further by having each menu item hang vertically, as well.
Less common but nonetheless engaging, hamburger menus are a nice demonstration of sleek web design. The background goes dark as the menu slides in, helping draw visitors’ attention to the clickable options.
Here’s the same thing, just on the other side:
You can get really bold and have the menu extend over the entire screen, like Vimeo does:
It’s worth noting that if you need it, you don’t have to lose the search bar or even the CTA button when optimizing for mobile. Here’s how Hubspot does it:
Good thing Lemonade did not use its logo font for its header font.
Coming in a variety of shapes and sizes, website headers are critical to your site’s success. Whether you choose to go for a more traditional design or something a bit more experimental, it’s important you adhere to universal best practices. It’s quite oblivious when a website has aced the header element. Visitors to your site will come away having been provided a succinct yet stimulating navigational experience. Very often, this is instrumental in leading them towards your ultimate business goal; be it landing on specific pages or actually converting into paying customers.
Yoni Yampolsky is a Marketing Manager for Elementor. With more than 10 million active users, Elementor empowers just about anyone to create stunning WordPress websites, code-free.
WordStream’s guest authors are experts, entrepreneurs, and passionate writers in the online marketing community who bring diverse perspectives to our blog on a wide range of topics.
See other posts by Guest Author
Please read our Comment Policy before commenting.