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.
<p class="lead text-xl text-[#3a3a3a] mb-8"> Good small-business navigation is short, uses the words customers use, and always shows the main action. The examples below are <strong>We.Inc template designs</strong>, 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. </p>
<h2>Selection method and audience</h2> <p>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.</p>
<h2>Annotated examples</h2>
<h3>1. Short text menu, main action in the hero (plumber)</h3> <figure> <img src="/img/showcase/plumbers-1600.webp" alt="An example plumber website design made with We.Inc with four menu links and a Book Now button" loading="lazy" width="1600" height="1000" /> <figcaption>Example plumber design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> a customer with a leak wants help now. <strong>Choice:</strong> four plain links (Services, About, Installations, Contact) and a "Book Now" button in the first screen. <strong>Limitation:</strong> 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.</p>
<h3>2. Three-word menu over a full-screen video (restaurant)</h3> <figure> <img src="/img/showcase/italian-restaurants-1600.webp" alt="An example restaurant website design made with We.Inc with a Menu, Room and Reserve menu" loading="lazy" width="1600" height="1000" /> <figcaption>Example restaurant design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> check the menu and book. <strong>Choice:</strong> just "Menu", "Room" and "Reserve", with location and hours along the bottom of the first screen. <strong>Limitation:</strong> the links are small, light text over moving video, which is hard to read and to tap on a phone. Check contrast with the <a href="/tools/color-contrast-checker">color contrast checker</a> and make "Reserve" a proper button.</p>
<h3>3. Short menu plus phone icon and a button (accountants)</h3> <figure> <img src="/img/showcase/accountants-1600.webp" alt="An example accounting firm website design made with We.Inc with a phone icon and Get Started Today button in the header" loading="lazy" width="1600" height="1000" /> <figcaption>Example accountancy design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> find out whether the firm handles my kind of work, then get in touch. <strong>Choice:</strong> 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. <strong>Limitation:</strong> 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.</p>
<h3>4. Minimal shop header (jewellery store)</h3> <figure> <img src="/img/showcase/jewelry-stores-1600.webp" alt="An example jewellery store website design made with We.Inc with only About and Bag links" loading="lazy" width="1600" height="1000" /> <figcaption>Example jewellery store design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> browse pieces. <strong>Choice:</strong> only "About" and "Bag" in the header; browsing starts from an "Explore collection" link in the middle of the page. <strong>Limitation:</strong> custom orders, repairs and appointments have no route from the header. A jeweller that earns from services should add them as menu items.</p>
<h3>5. Project-led, almost no menu (architects)</h3> <figure> <img src="/img/showcase/architects-1600.webp" alt="An example architecture firm website design made with We.Inc with a Next Project control" loading="lazy" width="1600" height="1000" /> <figcaption>Example architecture design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> judge the quality of past work. <strong>Choice:</strong> the first screen is a project viewer with "Next project" and "View project" controls instead of a menu. <strong>Limitation:</strong> there is no visible contact or enquiry link in the first screen. Portfolio-led sites still need a way to start a conversation.</p>
<h3>6. Area and reviews in the menu, plus a call button (lawn care)</h3> <figure> <img src="/img/showcase/lawn-care-services-1600.webp" alt="An example lawn care website design made with We.Inc with Service Area and Reviews menu items and a phone button" loading="lazy" width="1600" height="1000" /> <figcaption>Example lawn care design (template design, not a customer site).</figcaption> </figure> <p><strong>Task:</strong> check whether they cover my street and whether others were happy. <strong>Choice:</strong> Services, Portfolio, Service Area and Reviews, plus a phone button, with "Get Your Quote" in the hero. <strong>Limitation:</strong> the figures shown in the design are template placeholders; replace them with real, verifiable facts or remove them before publishing.</p>
<h2>Pattern comparison</h2> <table> <thead><tr><th>Pattern</th><th>Example</th><th>Best for</th><th>Watch out for</th></tr></thead> <tbody> <tr><td>Short menu, action in hero</td><td>Plumber</td><td>Simple service sites</td><td>Main action disappears on scroll</td></tr> <tr><td>Three-word menu over video</td><td>Restaurant</td><td>Atmosphere-led venues</td><td>Contrast and tap size</td></tr> <tr><td>Menu + phone + button</td><td>Accountants</td><td>Most small businesses</td><td>Label icon-only buttons</td></tr> <tr><td>Minimal shop header</td><td>Jewellery store</td><td>Product-only shops</td><td>Services unreachable</td></tr> <tr><td>Project-led</td><td>Architects</td><td>Portfolio businesses</td><td>No enquiry path</td></tr> <tr><td>Area + reviews + call</td><td>Lawn care</td><td>Local service areas</td><td>Placeholder figures</td></tr> </tbody> </table>
<h2>Copyable navigation brief</h2> <pre><code>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 Escape</code></pre>
<h2>What to adapt and what not to copy</h2> <ul> <li>Adapt the pattern, not the labels: use the words your customers search for.</li> <li>Do not copy mega-menus from large retailers onto a five-page site.</li> <li>Do not hide the phone number or main button inside the phone menu.</li> <li>Make sure the menu works with a keyboard; see the <a href="/guides/website-accessibility-checklist">website accessibility checklist</a>.</li> </ul>
<h2>Start from a suitable template</h2> <p>Pick a design with the pattern that fits from the <a href="/website-templates/business">business templates</a> and edit it in the <a href="/website-builder">We.Inc website builder</a>. 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 (<a href="/pricing">pricing</a>). Check the result with the <a href="/tools/website-grader">website grader</a>, and budget with the <a href="/tools/website-cost-calculator">website cost calculator</a>.</p> <p><a href="https://my.we.inc/signup">Start building your business website</a></p>
For a small business, usually four to six top-level items plus a visible main action such as a call or book button.
For businesses where customers call, yes. Keep it visible on phones rather than hidden inside the menu.
No. They are We.Inc template designs, used to show navigation patterns.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.