Types of Website Navigation

Navigation is a key element of any website. It’s how the user gets from section to section, and to your content. Aside from creating something unique, there are several options for navigation in site design that are quite common, and for a good reason… they help the user browse your site easily.

Horizontal Text

Horizontal text-based navigation is probably the most common style found online. This type of navigation consists of a horizontal list of the sections of the site, generally named in one or two words each. It can either be created with graphics or straight HTML text, both of which can have rollovers for a bit of user interaction. Examples of horizontal navigation can be found at:

Vertical Text

Vertical text navigation is also quite common, and is often useful for sites requiring a longer list of button bar items, expandable navigation, or for titles of longer length. Vertical navigation is most commonly found along the left side of the web page, though right side navigation can be effective if designed properly or if for secondary navigation. Vertical navigation is often used for a second button bar, such as for sub-sections of a major section found in a horizontal bar at the top of the page. Examples of vertical navigation can be found at:

Drop-Down Menus

Drop-down menus are often used along with horizontal navigation, and allow the user to jump not just to the main sections of the site, but also to many of the key sub-sections. Sites with a lot of content can certainly benefit from drop-downs, as they eliminate a click to your content. Examples can be seen at:


In some cases, you may want to present the user with the depth of information right up-front, even without a drop-down menu. Having a sub-menu below main navigation titles takes up more room, and is less conventional, though it does allow visitors to clearly see what is available and get where they want. Examples of this can be found at:

Text with Descriptions

Navigation should be straight-forward... the user should know what to expect when they click something. Adding short descriptions of what is included in each section is a great way to make a site even easier to use. This approach requires a clever design, adding text to an element that needs to remain clean. If done effectively, it can be extremely helpful, especially for sites that may have somewhat obscure section titles. Examples of this can be seen at:

Icons or Graphics

Integrating icons or other graphics into your navigation can create an intuitive interface. The user will associate the icons with the content they represent, creating an even clearer approach to a button bar. A set of navigation icons should be created in a consistent style with each other and the site as a whole, as they should improve the site design rather than create a distraction. It should also be clear what they represent... adding icons just to make a design look better may not serve the best interests of the site. Examples of navigational icons include:


The options above are just what is commonly found on the web. There are of course countless options for site navigation design. From navigation that disappears to navigation that follows you around, experimenting with it can make your site unique... just be sure it is still effective.