The basics of website navigation - maps, navigation bars, frames, JavaScript, site search engines.

Website Navigation


Website navigation is such an important part of any website that you need to think about it from the very beginning. Good website navigation should allow your visitors to know three things: where they are, where they can go, and how they can get back to where they came from.

At all times and on all pages in your site, you must give the visitor a sense of place, of context within the site. Every page on your site should have a header, footer, or sidebar that tells the reader what site they're visiting and where they are within that site.

Website navigation should be consistent from page to page, so your visitors don't have to figure out how to get places every time they encounter a new page.

Home page

Your site's home page should act as the crossroads, the point of origin for all traffic going into your site. Your home page must link to all your sections (and perhaps directly to some important articles).

Always include a link to home on every single page. This way, if users do get confused, or just want to start over from the top, they're only one click away.

Site map

Don't try to re-invent the wheel. Site maps or tables of contents work for website navigation just as well as they do on paper. Site maps are usually pages that contain links to all (or most) of the pages on a site. People understand these conventions, so they find them easy to use.

The nice thing here is that it provides your reader with a one-stop location to access anything on the site. The bad thing is you have to get them there in the first place. This should be your supplemental method of navigation, not the primary one.

Navigation bars

There's no hard rule about how and where to put navigation bars. Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths, it makes sense to put navigation bars on the left or right side of the screen.

This layout is becoming increasingly popular because it's practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity.

Images for website navigation

You should never rely exclusively on images for navigation bars. Of course, every graphic on your site should contain ALT text, so even if your visitors have pictures turned off they can still read and use your navigation.

That's one of the reasons why it can be risky to use image maps (a single picture that contains a number of links). Because without the pictures turned on, it's impossible to use an image map.

It's also important to note that you should always include a text version of your navigation bars, as some people surf with images turned off or even with text-only browsers. You'll often see the text navigation at the bottom of the page.


A common way to keep website navigation on screen no matter how much a visitor scrolls is to use frames with the navigation bar in one frame. This way, when users click from point to point, they don't have to reload the navigation bar on each page.

The problem with this is that frames can be confusing for site visitors. It's more difficult to print and bookmark a page. Using frames either prevents search engines from finding pages within a website, or it causes them to send visitors into a site without the proper frame context being established.

Frames can also cause visitors with older browsers to be unable to see any of the content of your site. For more information on using frames, see Advanced: HTML Frames.


Another method, if you're not worried about alienating visitors with older browsers, is to use JavaScript for website navigation.

In order to conserve space, some sites use JavaScript to open a pop-up window or reveal deeper levels of information when you mouse over a category in the navigation bar.

Many sites use JavaScript to create the classic graphic button effect that shows one image when the mouse is left alone, and another when it passes over it.

For more information on JavaScript, see Advanced: JavaScript. Generally, however, the simpler the better. You want everyone to be able to use your navigation, not just those with the latest browsers.

Site search engines

Creating a good navigation scheme for a large site with lots of pages and a good mixture of material can be very hard. How can you get your visitors to the information they want without lots of confusing labels, pictures and links? Site search engines provide this capability.

Adding search capabilities suddenly gives you an incredibly flexibly, user-definable website navigation scheme. In the past, this required special software, but now it can be done easily and for free...

Tools: Site Search Engine
This free utility indexes your site and creates the additional HTML file which acts like a search engine that only searches your site. You have full control over the appearance of the search results page.

A very nice search utility. You get to index your site plus a handy set of other features including site maps, content monitoring, customization and a what's new report. The free version gives you 25mb of indexing (the size of your pages), and you can pay for more.

An excellent site search engine, providing spidering of up to 1,000 pages for free. Quick, efficient and very configurable.

If you need help of professional website designers visit...

DesignCrowd is a marketplace for crowdsourced graphic design like custom logos, websites, flyers, business card design and more. Businesses launch a design project and receive on average 100+ designs in 5 days from 400,000 freelance designers and agencies worldwide. DesignCrowd offers over 40 design services including logo design, website design, app design, business cards, promo flyers, posters and more services to help entrepreneurs and small business grow their businesses. provides a useful service. It connects thousands of passionate designers with small businesses and individuals who need design projects completed. Simply post your design brief and multiple designers from around the globe will enter the contest by submitting different designs for you to choose from.

Logo Garden is the simplest way to create a professional brand for any business. You can create a customized logo in just minutes, no design experience needed. Start building your professional brand by creating a free logo.

This is an online marketplace for graphic design. Entrepreneurs and businesses who need things designed - from logos and stationery to websites and brochures - simply post what they need and name their own price and deadline. Once posted, over 87,000 designers from 150+ countries around the world will submit actual designs - not bids or proposals - for the buyer to review until they find the "the one."

See also...

Web Design
General tips and links to useful Web design resources.

Web Page Design
How to make your pages logically organized and user-friendly.

Web Page Backgrounds
The basics, tricks, examples.

Web Fonts
How to use fonts more effectively in your Web design.

Solo Build It!

What's New

Inexpensive Web Hosting
How to choose a fast and reliable service from the bulk of cheap hosting solutions.


Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.


Advanced and free spam blockers
New generation of email spam blockers.


Dedicated IP hosting
Benefits of using a static over shared IP address.

Sponsored links

Copyright © 2002-2023