Website Navigation Examples for Small Businesses (Annotated) | How-to Guide
Annotated website navigation examples for small businesses: six menu patterns, the customer task each serves, what they do well and their limits, a comparison table, and a copyable navigation brief. All examples are labelled We.Inc template designs.
Good small-business navigation is short, uses the words customers use, and always shows the main action. The examples below are We.Inc template designs, not customer sites, chosen because each shows a different navigation pattern. For each one we note the customer task, the design choice we observed in the screenshot, and its limitation.
Selection method and audience
We picked designs from the We.Inc showcase for local service and retail businesses, where the typical visitor is on a phone and wants to call, book or check a price. Each example is judged on three questions: can a visitor find the main action without opening the menu, do the labels match what customers search for, and will it still work at phone width. The screenshots are the desktop first screen of each design from the We.Inc showcase; test the phone version of any design you pick with your own phone before publishing.
Annotated examples
1. Short text menu, main action in the hero (plumber)
Task: a customer with a leak wants help now. Choice: four plain links (Services, About, Installations, Contact) and a "Book Now" button in the first screen. Limitation: there is no phone number or button in the header, so once the visitor scrolls past the hero the main action is gone. For urgent trades, add a call button to the header.
2. Three-word menu over a full-screen video (restaurant)
Task: check the menu and book. Choice: just "Menu", "Room" and "Reserve", with location and hours along the bottom of the first screen. Limitation: the links are small, light text over moving video, which is hard to read and to tap on a phone. Check contrast with the color contrast checker and make "Reserve" a proper button.
3. Short menu plus phone icon and a button (accountants)
Task: find out whether the firm handles my kind of work, then get in touch. Choice: four links (Services, Industries, Process, About), a phone icon and a solid "Get Started Today" button on the right. This is the most complete pattern of the six. Limitation: the phone icon has no visible number or label; screen reader users need an accessible name on it, and some visitors want to see the number.
4. Minimal shop header (jewellery store)
Task: browse pieces. Choice: only "About" and "Bag" in the header; browsing starts from an "Explore collection" link in the middle of the page. Limitation: custom orders, repairs and appointments have no route from the header. A jeweller that earns from services should add them as menu items.
5. Project-led, almost no menu (architects)
Task: judge the quality of past work. Choice: the first screen is a project viewer with "Next project" and "View project" controls instead of a menu. Limitation: there is no visible contact or enquiry link in the first screen. Portfolio-led sites still need a way to start a conversation.
6. Area and reviews in the menu, plus a call button (lawn care)
Task: check whether they cover my street and whether others were happy. Choice: Services, Portfolio, Service Area and Reviews, plus a phone button, with "Get Your Quote" in the hero. Limitation: the figures shown in the design are template placeholders; replace them with real, verifiable facts or remove them before publishing.
Pattern comparison
| Pattern | Example | Best for | Watch out for |
|---|---|---|---|
| Short menu, action in hero | Plumber | Simple service sites | Main action disappears on scroll |
| Three-word menu over video | Restaurant | Atmosphere-led venues | Contrast and tap size |
| Menu + phone + button | Accountants | Most small businesses | Label icon-only buttons |
| Minimal shop header | Jewellery store | Product-only shops | Services unreachable |
| Project-led | Architects | Portfolio businesses | No enquiry path |
| Area + reviews + call | Lawn care | Local service areas | Placeholder figures |
Copyable navigation brief
Main action (always visible, also on phones):
Top-level items (max 5-6), in customers' words:
1.
2.
3.
4.
Items that go in the footer instead (privacy, careers, FAQs):
Phone menu: button label "Menu"; main action stays outside the menu
Current page highlighted: yes
Keyboard: menu opens with Enter/Space and closes with EscapeWhat to adapt and what not to copy
- Adapt the pattern, not the labels: use the words your customers search for.
- Do not copy mega-menus from large retailers onto a five-page site.
- Do not hide the phone number or main button inside the phone menu.
- Make sure the menu works with a keyboard; see the website accessibility checklist.
Start from a suitable template
Pick a design with the pattern that fits from the business templates and edit it in the We.Inc website builder. Free gives up to 3 template sites on a we.inc address (no AI credits, no custom domain); Starter at $20/month adds AI building and custom domains (pricing). Check the result with the website grader, and budget with the website cost calculator.
Start building your business website
Frequently asked questions
How many items should a website menu have?
For a small business, usually four to six top-level items plus a visible main action such as a call or book button.
Should the phone number be in the navigation?
For businesses where customers call, yes. Keep it visible on phones rather than hidden inside the menu.
Are these real business websites?
No. They are We.Inc template designs, used to show navigation patterns.
More in Guides
- Website Platform Procurement Checklist: 42 Questions to Ask Vendors | How-to Guide
- Website Platform Total Cost of Ownership: A Five-Year Model for Organisations Running Many Sites | How-to Guide
- Public Sector Website Redesign Project Plan: Phases, Roles, Timeline and Risks | How-to Guide
- Website SLA Checklist: What a Service Level Agreement Should Promise, Measure and Exclude | How-to Guide
- Website Structure: How to Organise Pages, URLs and Links (5 Example Site Maps) | How-to Guide
- Website Title Examples for Homepages and Inner Pages | How-to Guide
- Website Vendor Exit Plan: Contract Clauses to Avoid Lock-In | How-to Guide
- Website vs Web App: The Difference, With Examples | How-to Guide
Website builders for the businesses in this article
- small business website design
- restaurant website builder
- plumber website builder
- architect website builder
Related guides and tools
Start building
Product
Who It's For
- For Agencies
- For Freelancers
- For Hosting Providers
- For SaaS Platforms
- For Startups
- For Financial Services
- For Healthcare
Features
Resources
- Blog
- Help Center
- Free Business Tools
- Free UI Components
- Website Templates
- Template Collections
- Website Examples
- Guides
- Comparisons
- Alternatives
- Best Lists
- Reviews
- Pricing Guides
- Use Cases
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App