Web Design Tips, Tutorials & More!

Horizontal Navigation

Horizontal vs. vertical navigation – the debate rages on with horizontal navigation always in the lead.  Vertical navigation, with its restricted design flexibility and content constraints, has less of an appeal with many designers, so horizontal navigation remains a design tradition.

Luckily, the amount of inspirations available for horizontal navigation design is never lacking.  A vast array of design styles exist.  In fact, there are so many styles to choose from, we would be hard-pressed to cover them all here.

What we will do, however, is showcasing a few excellent styles and also presents a few tips and best practices for superb horizontal navigation. 

For Starters…Horizontal Navigation Styles

• No Navigation Bar Full Cream Milk

• Links Hub Below Render

Best Practices

1.  Names They Know

The navigation bar is the go-to spot for all visitors.  It’s where the visit starts, and it’s where all visitors must return time and time again in order to explore the site further.  That being said, it should be a friendly, inviting place full of familiar elements and few surprises – a place of comfort and refuge. 

Giving a visitor familiar names and metaphors in the navigation bar speak volumes and synergizes well with the above-mentioned basics of navigation.  Though it may be obvious, here’s a list of a few well-known navigation essentials just for good measure:

Shop (e-commerce sites)

2.  Sections Sorted

Primary and secondary navigations are two different elements. Thus, designers should take care to distinguish the two so as not to impair usability.  Compare the two examples below.


Designers Couch

In the first example, there are no clear distinctions between primary and secondary navigation.  The readers are left to fend for themselves when in determining which information to prioritize.  In the second example distance between primary and secondary navigation set off the distinction between the two, so that the reader understands where to start and what’s important.

3.   Right Placement for Calls to Action:

Visitors have seen many websites and with all those viewings come expectations.  These expectations, in turn, guide the hand of designers working to create the best user experience possible.  Do you see how all elements of design are so interrelated?  When users expect certain elements to be placed in certain positions, they are obliged to feel comfortable enough to stick around and explore more.

So, too, should the designer be obliged to meet those expectations, and place design elements where they would normally reside.  In this case, calls to action, such as log-in or register, are traditionally placed on the right side of the horizontal navigation bar.


4. Don’t Forget the Search Box

Though some may choose to forgo giving their users the opportunity to pinpoint the particular product, phrase or other item that suits them, the value of the search box can never be diminished.  In fact, without a search box a site lacks a good means of presenting organized lists of products, articles or words that the user has in mind to find.  If the user comes first in design, it’s much more likely to keep visitors engaged, so include those elements that complement this tried and true notion.


Leave a Reply

Malcare WordPress Security