Can a visitor find the pricing page in ten seconds? Often, the answer depends on the menu. Website navigation is the menu and link system that moves visitors between pages, and it works like a roadmap on every page of a site. When the roadmap is clear, visitors find what they came for. When it is confusing, many of them leave within seconds.
Key Takeaways
- Build the main menu from the most important pages on the site.
- Keep the top level to four to seven items.
- Use labels that name the topic, not vague words like “Resources.”
- Make the menu work on phones, with keyboards, and with screen readers.
- Test the menu with real click data and change what visitors ignore.
This guide covers structure, labels, menu types, mobile design, accessibility and measurement. Each step builds on the one before it. The first step is to decide which pages matter most, and that starts with the menu’s structure.
Start With Your Most Important Pages
Rank your pages by importance before you place any of them in the menu. The pages that bring in money or answer the most common questions belong at the top level. A sitemap is a diagram of the site structure, and it is the best tool for this job. Draw it as a top-down chart, with the home page at the top and each page group below it.
Place the most important group at the left end of a horizontal menu bar. Readers scan from left to right, so the first item gets the most attention. Put the page you most want visitors to see there, and build the rest of the bar from that point.
The top-level menu should show the few page groups that matter most to visitors, not every page the company owns.
A common mistake is to let the org chart decide the menu. Teams often create menu items for their own departments, such as “Sales” or “Operations,” because that is how the company is organized. Visitors do not think in those terms. They look for what they can buy, learn or fix.
Do the sitemap before any visual design. A good sitemap shows the page groups first, so the design team does not guess at the structure. Teams that skip this step often redo the menu after launch. For help with this planning work, the web design services team at 11thAgency maps site structure, navigation and page flows before the visual work starts.
How Many Items a Navigation Menu Should Hold
Most sites should keep the top-level menu to between four and seven items. Most usability guidance supports this range, because more items are possible but harder to scan. A visitor can read about five labels in a glance, but a long row of labels takes more time to sort through.
The table below compares menu sizes. It shows how each size affects scan time and clutter, and where the extra pages can go.
| Top-level items | Scan time | Clutter | Where extra pages can go |
|---|---|---|---|
| 3 | About 2 seconds | Very low | Few places needed |
| 5 | About 3 seconds | Low | Dropdown under one item |
| 7 | About 4 seconds | Moderate | Dropdowns and footer links |
| 9 | About 6 seconds | High | Grouped mega menu |
| 12 | About 8 seconds | Very high | Grouped mega menu and footer |
When more pages seem necessary, trim the menu first. Merge similar pages into one group, and move rarely used pages to a dropdown or the footer. Ask whether each top-level item is used often enough to earn its place.
A large catalog is the main case where a longer menu makes sense. An online store with hundreds of products needs grouped menus, not a longer flat list. A flat list of twelve product types would overwhelm visitors, so grouped categories with sub-links work better.
Write Labels That Name the Topic
A menu label should name the topic of the page it links to. A label such as “Services” tells a visitor almost nothing about what they will get. Replace it with the name of the service group, such as “Website Design” or “Search Engine Optimization.” Search engines also read these labels, so they help them understand what each page covers.
Vague labels like “What we do” or “Resources” give visitors little hint of what they will find. Swap them for words that describe the content. Here are four common swaps:
- “Services” becomes the name of the service group, such as “Web Design.”
- “Articles” becomes the topic the articles cover, such as “Email Marketing Tips.”
- “What We Do” becomes the specific offer, such as “Custom WordPress Sites.”
- “Resources” becomes the type of help, such as “Pricing Guides.”
Avoid format words like “Videos” or “Webinars” as top-level labels. A visitor wants a topic, not a file type. Put the format inside the topic page instead, so the video appears under the subject it explains.
Every label should point to a page of its own. A label with no page behind it leaves visitors stuck. Each label needs a real target, so check that the page exists and matches the name.
Choose a Navigation Type That Fits the Site
A horizontal bar works for most small sites, and a sidebar works when the page list runs long. The right type depends on how many pages the site has and how much content each page holds. Match the type to the site, not to a trend.
Horizontal Navigation Bar
A horizontal bar runs across the top of the page. It suits sites with a few top-level pages, usually five to seven. Its limit is space: each label must fit the width of the screen, so long labels push others out of view.
Vertical Sidebar Menu
A vertical sidebar stacks links down the left or right edge. It suits sites with long lists of pages, such as documentation or course libraries. Its limit is space, because the sidebar takes width from the main content.
A common mistake is to use a sidebar on a short site. On a site with five pages, the sidebar uses space that the content needs, and the text becomes narrow and hard to read. Use a horizontal bar there instead.
Dropdown and Mega Menus
Dropdowns open a short list of links under a top-level label. They suit sites with a few groups that each hold several pages. Their limit is that visitors must find the label first, so hidden links can go unseen.
Dropdowns lead directly to the next question: how do they behave for visitors? The answer changes with the dropdown style.
How Dropdown Menus Affect Visitors
A dropdown shows visitors more choices at the moment they have already picked a section. That timing helps, because the visitor already knows what they want. The table below compares three common styles.
| Feature | Small dropdown | Mega menu | Hover-only dropdown |
|---|---|---|---|
| Visitor effect | Shows 4 to 6 links | Shows 20 or more links in columns | Opens only when the mouse moves over it |
| Page discovery | Good for a few related pages | Good for large catalogs | Poor, since many visitors miss it |
| When to use | Two to three sub-pages per group | Stores with many product types | Avoid for key pages |
A mega menu is a large dropdown that shows many links grouped together. It works well for an online store with many product types. Keep its groups clear and limit each column to a few links.
Hover-only dropdowns can hide pages from keyboard users. These menus open when the mouse passes over them, but they often do not open when a person uses the Tab key. Make every dropdown open with a click or a key press, so no visitor is shut out.
Build a Mobile Menu That Works on Small Screens
On a phone, the menu icon is often the only path to every page, so it must be obvious. Most mobile menus use a three-line icon, often called a hamburger icon. Place it in the top corner, where people expect it, and keep it visible while they scroll.
Check these four points before launch:
- A visible menu icon with a text label such as “Menu” beside it.
- Tap targets of at least 44 by 44 pixels, with spacing between items.
- A clear back control that returns the visitor to the previous screen.
- A phone number that is a tappable link, so a visitor can call with one tap.
A common mistake is to hide the main menu behind several taps. A visitor who must open a menu, then open a group, then scroll, often gives up. Keep the main pages one tap away from the icon.
Test the menu on a real phone, not only in a desktop browser preview. Tap each item with a thumb and check that none sit too close together.
Keep Navigation Usable With Assistive Technology
Make every menu work with a keyboard and a screen reader. A menu that works only with a mouse leaves keyboard users stuck on the first item. Accessibility rules set the standard, and they help all visitors, not only people with disabilities.
Keyboard Access
Check that a visitor can reach every menu item with the Tab key. Each dropdown should open with the Enter key and close with the Escape key. Focus should be visible, so the visitor can see which item is selected.
Screen Reader Labels
Screen readers announce the text of each link. Give every menu link a clear name that matches its visible label. Groups that open should tell the reader they can expand.
A common mistake is to use an icon with no text label and no accessible name. A search icon or a cart icon can mean nothing to a screen reader user. Add a hidden text label, such as “Search,” so the button is clear.
Color Contrast
WCAG 2.2 AA, a standard from the Web Content Accessibility Guidelines, sets a contrast ratio of at least 4.5 to 1 for normal body text. Menu text should meet this ratio against its background. Check the color of each menu label and hover state with a contrast tool before launch.
Add Breadcrumbs and Clear Wayfinding
A breadcrumb trail shows a visitor where they are in one glance. It is a row of links showing the path from the home page to the current page. On a deep page, each link steps back one level, so the visitor can return without using the back button.
Four wayfinding aids help visitors stay oriented:
- Breadcrumb trail: a row of links from the home page to the current page.
- Highlighted current item: the active menu label looks different from the others.
- Page title that matches the menu label: the heading repeats the words the visitor just clicked.
- Back link: a link that returns the visitor to the parent section.
Breadcrumbs gain little on a site with only two levels. A home page with a handful of pages linked from the menu does not need a trail. The menu already shows the visitor’s place.
Use the Footer as a Second Route
A visitor who reaches the bottom of a long page often wants a different page, not the top. The footer gives that visitor a second route. Footers commonly hold secondary pages, contact details and legal links, arranged in columns.
Columns for Key Pages
Use footer columns to group secondary pages by topic. Each column should have a short heading and a few links. The table below shows typical groups.
| Group | Typical links | Where it helps |
|---|---|---|
| Company | About Us, Careers, Team | Visitors checking who runs the business |
| Help | FAQ, Shipping Policy, Returns | Visitors with questions before they buy |
| Resources | Blog, Case Studies, Guides | Visitors who want to learn more |
Legal and Contact Links
Place the contact page and legal links at the bottom of every page. A privacy policy is a common example. The privacy policy explains what visitor information a site collects and how it uses it, so visitors can find it in the footer.
A common mistake is to copy the whole main menu into the footer. The footer then repeats the same links and adds clutter. Keep the footer for pages that do not fit the main menu.
Add Search and a Clear Call to Action
A search bar earns its place on sites where visitors arrive looking for one specific thing. Place it near the top right on desktop, where people look for it. A clear call to action, such as “Get a Quote,” also belongs in the header.
Follow three placement rules:
- Put the search bar near the top right on desktop.
- Show one primary call to action in the header.
- Keep social media icons out of the header.
Social icons send visitors off the site. A header full of them pulls attention from the pages the site needs visitors to read. Place social links in the footer instead.
A site with few pages does not need a search bar. If a visitor can see every page in the menu, a search box adds clutter without helping. Add search when the content grows large enough that browsing takes too long.
Measure How Visitors Use the Menu
Click data shows which menu items do the work and which ones visitors ignore. Check it after launch and again each month. Use the answers to change labels, move items or remove links that nobody uses.
Answer these four questions from the click data:
- Which item gets the most clicks? Keep it near the start of the menu.
- Which item gets no clicks? Rename it, move it to a dropdown or remove it.
- Which pages do visitors reach from the home page? Link to these pages from more places.
- What share of menu clicks come from phones? If it is high, test the mobile menu first.
Many visitors enter a site from search results, not the home page. A visitor may land on a deep product page and never see the home page. Check which pages receive the most entries from search, and make sure their menus lead onward.
Conclusion
Keep the top level short and built from the pages that matter most. Four to seven items cover most sites, and each label should name a real page. Then test the menu with real clicks, because the data shows what visitors actually use.
Start by drawing a sitemap of the current site and marking the five most important pages. Every other decision in the menu follows from that list. Place those five pages first, and check the menu again after a month.
