Option 2: Horizontal Navigation: This style of navigation runs horizontally across the top of the web page, usually under the logo. While a horizontal navigation bar looks more sophisticated and takes up less room, it also gives you less room to grow, and makes secondary navigation more difficult.
You might choose horizontal navigation if:
- Youâ€™re planning to have a smaller website. I recommend horizontal navigation for sites of up to about 7 or 8 pages, total. Much more than that doesnâ€™t usually fit well across the top of the page â€“ it will either look cramped, or the text for the navigation will have to be quite small, which makes it more difficult to read.
- You want a sophisticated look. Since itâ€™s less commonly used, horizontal navigation can look more high-end and classy.
- You want more space in the main body of your website for text and/or pictures. Your website has a limited amount of horizontal space â€“ which makes that space very valuable. By moving the navigation to the top of the page, you eliminate the need to devote 150-200 pixels along the left side to vertical navigation, which will give you more room for larger photos and more text.
Again, here are a few things to look out for on a horizontal navigation:
- Donâ€™t use long titles for the items in your navigation. Space is very valuable â€“ the shorter your navigation titles can be, the more youâ€™ll be able to put on there!
- Donâ€™t crowd your navigation or make your font size too small. Itâ€™s tempting to squish more options into a horizontal navigation by squeezing the options close together. But, eliminating the white space between the options will make all of the options bleed together, which makes them harder to read. And, donâ€™t make your font size too small â€“ I strongly recommend that your navigation bar copy be at least 14 point â€“ 13 at a bare minimum. These tips will ensure that you maximize the legibility of the copy.
- Donâ€™t use horizontal navigation if you want your site to be really expandable. If youâ€™re designing a small starter site with the intention of expanding the number of pages on the site in the future, be sure to let your designer know about your plans. Youâ€™ll want to design the site so that you can add on to it later â€“ and, if thatâ€™s the case, horizontal navigation will be limiting, and may even require that you redesign the site to be able to expand it.
- Donâ€™t use drop-down navigation if you want your navigation to be easily editable and to show up on all browsers. Many people will just use drop-down menus to add to their horizontal navigation. But, these can be difficult to implement and modify.
It can also be difficult to guarantee that your drop-down navigation will be visible and work on all types of computers and website browsers. For example, if you implement a drop-down navigation system that works on a PC, it might not work on Macintosh computers. Even if you can implement a drop-down navigation that works on current computers and browsers, the navigation might break in later versions of the software.