Website navigation design: how many items, what to call them, where the button goes
A top navigation for a small site should carry about five to seven links, named in the words visitors already use, with the business name on the left linking home and one action button on the right. Most navigation problems come from too many items, clever names or a menu that changes from page to page.
What navigation has to do
Navigation answers two questions for someone who has just arrived: what's on this site, and how do I get to the part I want. It also tells people where they are once they've moved. Good website navigation design does both without being noticed. Visitors shouldn't have to read the menu twice or guess what a label means.
How many items
For a small business or personal site, five to seven links in the top bar is a comfortable ceiling on desktop. That isn't a law of memory; it's a practical limit of space and scanning. Beyond it, labels start wrapping, the button gets squeezed, and people have to read rather than glance. If you have more pages than that, decide which ones most visitors need and move the rest to the footer, or group them under a small number of clear headings.
| Site | Links | Button |
|---|---|---|
| Restaurant | Menu, About, Private dining, Contact | Book a table |
| Hair salon | Services, Team, Prices, Contact | Book |
| Photographer | Work, About, Packages, Contact | Check dates |
| Online shop | Shop, About, Delivery, FAQ | Basket or Shop now |
| Software product | Product, Pricing, Docs, Changelog | Start free |
Naming the links
- Use the words visitors use. “Prices”, not “Investment”. “Menu”, not “Our offerings”. “Work” or “Portfolio”, not “Selected explorations”.
- One or two words each. Long labels wrap on smaller laptops and break the bar.
- Nouns for places, verbs for actions. Links to pages are nouns; the button is a verb.
- Keep names and page titles the same. If the link says “Services”, the page heading should say “Services” too, so people know they've arrived.
- Avoid “Home” if the business name on the left already links to the homepage. It's a convention most visitors expect.
Where the action button sits
The main action (Book, Order, Get a quote) usually sits at the right end of the bar, styled as a filled button in the accent colour so it's distinct from the plain links. It should be the same action as the hero's primary button. Keep it visible on phones even when the links fold away, because it's the one thing many mobile visitors came to do.
Navigation menu design on phones
On narrow screens, a row of six links doesn't fit. The common answers are a menu button that opens the full list, a short bar of two or three key links, or a bottom bar for app-like sites. If you use a menu button, label it with the word “Menu” as well as the icon, make it at least 44px square, and make sure the opened menu can be closed with the Escape key and returns focus to the button. See hamburger menu best practices for the details.
Sticky headers, current page and accessibility
- Mark the current page with
aria-current="page"and a visible style, such as an underline, not colour alone. - Use a
navelement with a label (“Main”) so screen reader users can jump to it, and add a skip link to the main content for keyboard users. - Keep the order identical on every page. Consistent navigation is something people rely on, and WCAG asks for it.
- If the header is sticky, keep it short. A tall sticky bar eats a lot of a phone screen and can cover focused elements when people tab through the page.
Navigation in Anticode
On a multi-page Anticode site, the header links to the separate pages you chose, from Work, Shop, Services, About, Pricing, FAQ, Book and Contact, in a fixed order, with the business name on the left and the main action as a button on the right. The homepage also gets a short index of the other pages, each with a line on what's there. On narrow phone screens the header keeps the name and the action button, and that index is how visitors find the other pages. On a one-page site, the links jump to sections.
The Critic checks that every link goes somewhere: links to # or to a section that doesn't exist fail, and the design gate blocks publishing a page with empty links (an empty href, # or javascript:). Neither checks that links to other websites still work, so test those yourself. Link labels can be renamed in place in the visual editor. To plan which pages you need in the first place, see one page or multi-page.
Questions people ask
How many items should a navigation menu have?
For most small sites, five to seven in the top bar, plus one action button. Put the rest in the footer.
Should the logo link to the homepage?
Yes. It's a convention almost every visitor expects, and it lets you leave “Home” out of the menu.
Should navigation be sticky?
It can help on long pages, especially when the action button is in the header. Keep it short so it doesn't take over the screen on phones.