Good navigation in one paragraph
Good website navigation lets a first-time visitor guess, within a few seconds, which menu item holds the page they came for, and reach it in one or two taps.
That means a small number of top-level items, labels written in the words your customers use (Thai words on Thai pages), a predictable order, a visible way to contact you, and the same structure on phones as on desktop, even if the presentation changes.
Everything else in this guide supports that idea: mega menus for sites with many pages, breadcrumbs and footers as a second map, a language switcher people can find, menus that work with a keyboard, and simple tests that show whether real people can find things. Visual fashions come and go, as our look at website design trends for 2026 shows, but the rules for a menu that works have barely moved in years.
This article covers the menu itself. Deciding which pages exist in the first place is a separate planning job; here we assume you have a page list and need to present it well.
Labels, number and order
Use your customer's words
Menu labels fail most often because they describe the company's internal structure instead of the visitor's question. A clinic may think in departments; patients think in problems and treatments. A hotel team says "F&B"; guests look for "Restaurant" or "Dining". Before you settle labels, read your enquiry emails and LINE chats and note the exact words people use. On the Thai version, write labels natively rather than translating the English: a literal translation often produces a word no Thai customer would type or say.
How many top-level items
For most business sites, five to seven top-level items is a sensible range. Fewer can hide important pages behind vague labels such as "More"; many more turns the menu into a list people scan and abandon. If you have more sections than that, group them under a parent item rather than adding width.
Order with intent
- Put the items people ask for most at the start and the end of the menu, where they are read first and last.
- Keep "Contact" or a booking action at the far right, where visitors expect it.
- Avoid labels that could mean the same thing, such as "Solutions" and "Services" side by side.
- Keep one word or two where you can. Long Thai labels wrap quickly on narrow screens, so test them early.
How do you build a mega menu that works?
A mega menu is a large dropdown panel that shows many links at once, grouped under small headings. Usability research from Nielsen Norman Group has long found that well-built mega menus work for sites with a lot of content, because visitors can see the whole section before choosing, instead of opening one flyout after another.
They make sense when a single menu item leads to more than about eight pages: a store with many product categories, a hospital group with many treatments, a real estate agency listing areas and property types (our notes on real estate website design show one way to group them). For a ten-page company site, an ordinary dropdown or no dropdown at all is clearer.
How to build one well
- Group links under short headings that match how customers shop or search, not your org chart.
- Open on click or on a deliberate hover with a small delay, so the panel does not flash open when the cursor passes over.
- Keep the panel inside the viewport and make it close with the Escape key or a click outside.
- Skip heavy imagery. One small promotional tile is fine; a panel full of photos slows the page and distracts.
- Plan the mobile version at the same time, because a desktop panel does not shrink into a phone menu by itself.
How should navigation work on phones?
In Bangkok many first visits to a business site happen on a phone, often from a LINE chat, a map listing or a social post. So the phone menu deserves its own design, not a squeezed copy of the desktop one.
Patterns that work
- Hamburger with a visible label. The three-line icon is widely understood, but adding the word "Menu" (or "เมนู" on Thai pages) helps visitors who do not recognise it.
- A priority action outside the menu. Keep one button visible in the header, such as WhatsApp, call or book, so the most common task never needs the menu at all.
- Accordion sub-menus. Expand child items in place rather than sliding to new screens, so people keep their bearings.
- A bottom bar for stores. Some shops add a fixed bar with Home, Categories, Search and Cart within thumb reach.
Make every tap target comfortably large, leave space between links, and check the menu with long Thai labels on a small Android phone, not only on the designer's large iPhone. For layouts that handle this well, our guide to website design ideas points out what to look for in each example.
Headers, switchers, breadcrumbs and footers
Sticky headers
A header that stays at the top while visitors scroll keeps the menu and your contact action one tap away. Keep it slim, and consider shrinking it after the first scroll so it does not cover much of a phone screen.
Language switcher
Place the switcher in the top right of the header on desktop and at the top of the mobile menu, labelled with the language names themselves: "English" and "ไทย". Avoid flags, since a flag stands for a country, not a language. The switcher should take visitors to the same page in the other language, not back to the homepage.
Breadcrumbs
Breadcrumbs show where a page sits, such as Home, Blog, Web design. They help people who arrive deep in the site from search, and Google documents a breadcrumb structured data format that can show the trail in results. The links in your homepage design do a related job: they route visitors into the main sections from the first screen.
The footer as a second map
Visitors who scroll to the bottom are often still looking. A good footer repeats the main sections, adds useful secondary pages (pricing, contact, policies) and shows address and hours. Small sites need very little: if you make a website for a restaurant, a menu of Menu, Book, Location and Contact, with the same in the footer, is often all a diner needs.
Accessible menus
Some visitors never use a mouse. They move through a page with the Tab key, a switch device or a screen reader, and a menu that only opens on hover locks them out. Accessible menus also tend to be sturdier menus for everyone.
- Use real links and buttons in the HTML. A dropdown trigger should be a button, not a styled div.
- Follow the disclosure pattern in the W3C ARIA Authoring Practices: the trigger carries aria-expanded, set to true when the sub-menu is open and false when it is closed.
- Let Escape close an open panel and return focus to its trigger.
- Keep a clearly visible focus outline. Removing it for looks is one of the most common accessibility faults.
- Mark the current page with aria-current="page" so screen reader users know where they are.
- Check colour contrast on menu text, including the hover and active states.
A quick test: put the mouse away and try to reach every page in the menu with only the keyboard. If you get stuck, so will some of your customers.
Testing your menu
You do not need a lab to test navigation. Two cheap methods catch most problems before anything is built. In card sorting, people group your page names in ways that make sense to them, which tells you how to structure the menu. In tree testing, people see only the text menu, with no design, and are asked to find something specific, such as "Where would you check the price of a deep-clean service?". Where they click first, and whether they succeed, tells you which labels mislead.
After launch, watch internal search terms and the pages people visit just before they leave. Navigation is part of the wider picture covered in our conversion rate optimization basics for service websites, since a visitor who cannot find the pricing page will never send an enquiry.
Navigation and search engines
Menus are also internal links. Pages linked from the header and footer are reached in fewer clicks from the homepage, which helps search engines discover them and signals that they matter. Keep important pages within about three clicks of the homepage and use crawlable HTML links, not links that only appear after a script runs. Our guide to planning your website structure shows how to decide which pages those are.
- Step 1
Collect real words
Pull the terms customers use from enquiries, LINE chats and search queries.
- Step 2
Card sort
Ask five to ten customers or staff to group your page names into piles and name each pile.
- Step 3
Draft the tree
Turn the groups into a text-only menu with five to seven top items.
- Step 4
Tree test
Give people three to five find-it tasks on the bare menu and record their first click.
- Step 5
Fix and retest
Rename or move the labels that caused wrong first clicks, then run the tasks again.
Navigation checklist
Run through this list before you sign off a menu. Menus lead somewhere, usually to an enquiry, so pair it with our contact form best practices to make sure the last step works as well as the first.
When we build a site, the menu is planned with the page list and tested on real phones before launch; you can see how that fits into our custom website design work. Our Starter package, from THB 10,000, covers up to five pages with mobile-first design and contact, WhatsApp and LINE buttons, and the Business package, from THB 30,000, covers up to 15 pages in English and Thai. Both are indicative starting prices, and a website development quote sets the final figure for your project.
- Customer wordsLabels match the terms customers use, written natively in each language.
- Five to seven itemsTop level stays short; extra pages sit under a parent item.
- Contact in reachA contact or booking action is visible in the header on every screen size.
- Language switcherNamed by language, top right, and links to the same page in the other language.
- BreadcrumbsShown on deep pages, with breadcrumb structured data.
- Footer mapMain sections, pricing, contact, policies, address and hours.
- Keyboard readyEvery item reachable by Tab, Escape closes panels, focus stays visible.
- TestedAt least one round of tree testing with real people before launch.
More on web design and UX
Sources
- Nielsen Norman Group: Mega Menus Work Well for Site Navigation
- W3C WAI-ARIA Authoring Practices: Disclosure (Show/Hide) Pattern
- Google Search Central: Breadcrumb structured data
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish. This guide was written by the Website Development Bangkok team. More about us