The Basics

Since, the birth of internet, my research has indicated only 12 types of header layouts. The 12 header templates have been differenciated as per their look and feel. For Example, the feel of static navbar is different from fixed navbar. Similarly, default header layout feel is different from 2 line split used by ecommerce sites. If you find a new unique way of header representation please get in touch at @grvpanchal

Basics Components of Headers:

  1. QuickLinks or Masthead
  2. Navbar
  3. Navmenu
  4. Search Box

Default Navbar

This is the standard header layout of webpage. This is what comes in my mind when I think of a website.

View

Static Navbar

Mordern sites tend to favour a Static Navbar to keep responsiveness of the site. Static navbar is the one with role navigation and should not be interupted as masthead/quicklinks.

View

Fixed Navbar

Fixed Navbar is used for sites that require access to navbar items and the Search box. Sites like ecommerce, video site all keep fixed navbar to make prominent features quick and easy to use.

View

Justified Navbar

Justified Navbar has always been a attractive and one of the oldest layout. The layout relies on table and alignment CSS properties. There are four unique ways a Justified layout been displayed.

View

2 Line Split Header

2 Line Split Header is different layout from default header because of spacing and searchbox size. Most of the time its used by ecommerce site. However, you may also a flavour of it in search engines.

View

2 Line Joined header

2 Line Joined Header is not a variant of split due to placement of of objects in navbar. It is an another layout heavily adopted by ecommerce site.

View

Navmenu Only

Navmenu Only is a simple representation of content a website can have. HREF can be linked IDs in same document along with use of scrollspy. This is the best layout for documentation of content or candidates portfolio.

View

Navbar with Navmenu

Navbar with Navmenu is most popular among email clients and admin panels. The navbar and navmenu are customized as per needs. Most of this layout prefer logout and search in navbar and navigation items within navmenu

View

Navbar with Hidden Navmenu

Navbar with Hidden Navmenu is unique due to its ability to keep wideview of screen without sacrificing navitems. A toggler is available on navbar to toggle navmenu.

View

Bottom Navbar

Bottom Navbar is a rare implementation. Such implementation can be use along with presentation carousel.

View

Navmenu within Container

This is a classic navigation layout since internet birth. Although previous iterations weren't responsive, the SideNav can be converted to navmenu in mobile devices. For this case you can use any form of navbar.

View

Anywhere Navbar Toggle

This is a modern layout, mostly used for presentation of items. Layout has two constant items i.e. toggler and Brand which can be sorted anyway. Below are the variants that are mostly used.

View