Two jobs: structure and signposts
Website navigation does two connected jobs. First it organizes the content into a structure, which is the hierarchy of pages. Second it provides signposts, the menus and links that let people move through that structure. A site can have excellent pages and still frustrate visitors if either job is done badly.
Start with the structure, because menus are only a visible reflection of it.
Build the hierarchy from the content
List what the site contains, then group items the way a visitor would. Cards on a table, or sticky notes on a wall, work well: write each page on a card and ask a few people to sort them into piles and name the piles. Their groupings often differ from the internal organization chart, and that difference is useful information.
Most sites end up with a shallow tree:
- A home page that introduces the whole site.
- A small number of top-level sections.
- Pages or subsections inside each.
Aim for as few levels as the content allows. Each extra level is another decision and another click, and visitors often leave when a path feels long. At the same time, cramming dozens of items into one level creates a different problem, because people cannot scan a huge list. There is no universal ideal number; test your own content.
Keep top-level choices few and distinct
A main menu works best with a handful of clearly different options. If two items could plausibly contain the same page, the visitor has to guess, and wrong guesses cost time. Check for overlap by asking where someone would look for a specific piece of information and whether more than one answer seems right.
Put the most important sections first and, where it makes sense, last. People tend to notice the beginning and the end of a list more than the middle. This follows the broader thinking about visual hierarchy, where order, size and emphasis signal importance.
Write labels people recognize
Menu labels are among the most important words on a site. Choose terms your visitors already use, not internal jargon or clever names. “Pricing” is clearer than “Investment options”. Keep labels short, specific and parallel in form. A label that must be explained is usually the wrong label.
Avoid vague catch-alls such as “Resources” or “Misc” when a more specific word exists. If you truly need a catch-all, keep it small.
Choose menu patterns that suit the content
Common patterns include:
- A horizontal bar across the top, suited to a small number of sections on wide screens.
- A side menu, often used for documentation or large sections with many pages.
- A collapsed “menu” button, common on phones, which saves room at the cost of hiding the options.
- A footer menu for secondary items such as contact details and policies.
Dropdowns can reveal a lot, but they are fiddly to use, especially on touch screens. Keep them shallow and make sure the top-level item is also a working link. Large panels of links, sometimes called mega menus, can suit big sites if they are well organized and not overwhelming.
On small screens, the same navigation has to adapt, which is part of building a responsive layout. Touch-friendly spacing matters, and the topic of mobile design covers why tap size and reach affect menus so much.
Show people where they are
Navigation should answer three questions at any moment: where am I, where can I go, and how do I go back. Helpful devices include:
- Highlighting the current section in the menu.
- Breadcrumbs, a small trail showing the path from home to the current page, which suit deeper sites.
- Clear page headings that match the label that led there.
- A visible way back to the home page, usually the logo.
Consistency matters. Keep the main navigation in the same place and in the same order on every page so visitors learn it once. This is an everyday example of design consistency.
Page hierarchy inside a page
Hierarchy also applies within a single page. A page needs one clear main heading, subheadings that reveal structure and a sensible reading order. Use heading levels in order rather than skipping them for styling reasons, because screen readers and search tools rely on them. Visual size and weight should match the logical level, so that someone scanning sees the outline without reading everything.
Search and other aids
For larger sites, a search box complements menus rather than replacing them. Some people prefer to search first, and a well-placed box helps them. Related-links sections at the end of a page also keep people moving to relevant content. These aids support the structure, but they do not repair a confusing one.
Test and revise
Give people a task such as “find the return policy” and watch where they go. If several users take the same wrong turn, the structure or label probably needs to change. Navigation is rarely finished: as a site grows, revisit the groupings so the menu continues to reflect the content.