The common types of website navigation are global, local, hierarchical, inline, contextual, faceted and supplemental. Each one answers a different question a visitor asks: where can I go, where am I, what else is related, and how do I narrow this down. Most business sites need three or four of them working together, not all seven. This guide explains each type, the interface patterns that deliver them, and how to choose a sensible mix for your own site.
Website navigation is the set of interface components, such as menus, buttons and links, that lets people move around a site and reach its content. Shopify’s overview is one of many that make the point: a clear structure means visitors find what they need whatever the size of the site.
There are two jobs here, and good navigation does both. It helps people find the exact content they came for, and it helps them understand where they are in the journey. The UK Home Office’s design manual describes navigation in exactly those terms. The second job matters more than many owners expect, because visitors often land on a deep page straight from a search engine. Nielsen Norman Group points out that navigation must show the visitor’s current location for that reason.
So the homepage menu is only part of the story. Every page is a possible front door.
Before the list, one clarification that saves confusion. James Kalbach’s Designing Web Navigation explains that navigation types are told apart by the content they reach, how links behave, the tasks they support, their visual treatment and their position on the page. There is no single universal taxonomy, which is why different articles list five, six or seven types.
The practical reading is this: labels such as global, local and contextual describe what a set of links is for. Bars, tabs, sidebars and dropdowns describe how it looks. One pattern can serve more than one type. A horizontal bar might hold global navigation on one site and local navigation on another.
Global navigation exposes the top-level sections of the site and stays consistent on every page. It usually lives in the header. The Web Style Guide notes that it is most often built as a styled HTML list, and that tabs can represent it, with a second horizontal list under the selected tab acting as a secondary tier.
For a services business, global navigation might hold Services, Portfolio, About, Blog and Contact. Keep it short. Every extra item dilutes the others.
Local navigation is specific to where the visitor currently is. Nielsen Norman Group defines it as navigation that shows sibling pages in the current category and, where relevant, child pages beneath them. Global navigation stays stable across the site, while local navigation changes from one branch to the next and helps people reach the deeper levels.
A typical example is a sidebar on a Services section listing Web Design, SEO and Hosting, which appears only within that section. A page’s table of contents, or links that jump to sections on the same page, also count as local navigation.
Hierarchical navigation organises content from broad parent categories down to narrower children. Visitors drill down through categories and subcategories, as Knowledge Kitchen’s course notes describe it. Smashing Magazine calls this model the hierarchical tree: a top-down structure where each page has a parent and local siblings.
This is the backbone of most business sites. Home leads to Services, Services leads to Website Design, Website Design leads to a specific package. The same Smashing piece describes two other shapes worth knowing: nested-doll navigation, which reveals a linear path step by step, and hub-and-spoke, where a central page launches each section and visitors return to the hub to go elsewhere.
Inline navigation puts links inside the flow of the content itself: a sentence that links to a related guide, or a call to action within a paragraph. It is the quietest type and often the most effective, because the link appears at the moment the reader’s curiosity peaks. It also helps search engines understand how your pages relate.
Contextual navigation links to related or recommended content, whether that content is nearby in the hierarchy or not. Think of “related articles”, “most popular” or “see also” blocks. Knowledge Kitchen describes these links as sitting in or around content and connecting siblings or more remote items chosen editorially or by algorithm.
The difference from inline navigation is mostly one of placement and intent. Inline links are woven into the prose, while contextual links are usually gathered in a block beside or below it.
Faceted navigation lets visitors filter or browse the same content by independent attributes. Where hierarchy forces one path, facets let the same item be found by author, date, category, colour, occasion or price, as Knowledge Kitchen explains. Online shops are the obvious home for it: filter by size, price and brand, and the list narrows.
If your site has fewer than a few dozen items, you probably do not need it. If you sell hundreds of products or publish hundreds of articles, you probably do.
Supplemental navigation gives alternative routes when the primary path is not enough. That covers sitemaps, indexes, shortcuts, guides and related links. In the information architecture literature these sit outside the content-bearing pages, in contrast with embedded systems (global, local and contextual) built into the pages themselves.
The University of Washington’s research-based guidelines draw a similar line between primary links, which define the main structure, and secondary links that add flexibility: shortcuts to deeper pages, links between closely related pages, and associational links expressing special relationships.
The types above become real through a handful of patterns. India’s government UX design guidelines give a clear catalogue, and it matches what you see across the web:
Breadcrumbs deserve a note. Nielsen Norman Group advises that they should reflect the site’s hierarchy rather than the visitor’s session history, and on mobile they should not wrap onto several lines.
Mobile is where navigation choices bite hardest. Nielsen Norman Group describes the main options as top bars, tab bars and hamburger menus. Bars use screen space and suit a small number of options. Hamburger menus save space but are less discoverable. Its advice is to pick the pattern whose downsides hurt your visitors least on their most common tasks.
For a business site, that usually means asking what a mobile visitor most wants: a phone number, a quote form, a price. Make that reachable in one tap, whichever pattern you choose.
Two further principles are worth building in from the start.
The UK Home Office adds a point that is easy to act on: because some people prefer search and others prefer browsing, sites should provide at least two distinct navigation mechanisms. A menu plus a search box meets that standard.
In code, a navigation bar is normally a list of links wrapped in a navigation landmark and styled with CSS to run horizontally. The Web Style Guide describes global navigation as ideally marked up as an HTML list and commonly placed in the header. Using proper list and landmark markup matters beyond tidiness: it is what lets screen readers announce the menu and let users jump to it.
Start from your content and your visitors, not from a favourite menu style. A workable process looks like this:
A quick guide by site type:
We see the same pattern on many of the sites that come to us for a redesign: the design is handsome, but the navigation was added last. Menus are built around how the company is organised, not around the questions a customer is asking, and the site quietly loses enquiries. Our view is that navigation is part of the information architecture, and so it belongs at the start of a web project, not the end. We map the content and the visitor’s tasks first, choose the types of navigation that fit, and only then design the patterns. That is why our website design and development work is built together with SEO and branding: clear structure helps people and search engines alike, and a consistent identity makes every label and button feel like it belongs to one business. Whether the site is a ten-page brochure for a start-up or an ecommerce store with a large catalogue, we aim for the same outcome: visitors who always know where they are and what to do next. Rob
We see the same pattern on many of the sites that come to us for a redesign: the design is handsome, but the navigation was added last. Menus are built around how the company is organised, not around the questions a customer is asking, and the site quietly loses enquiries.
Our view is that navigation is part of the information architecture, and so it belongs at the start of a web project, not the end. We map the content and the visitor’s tasks first, choose the types of navigation that fit, and only then design the patterns. That is why our website design and development work is built together with SEO and branding: clear structure helps people and search engines alike, and a consistent identity makes every label and button feel like it belongs to one business.
Whether the site is a ten-page brochure for a start-up or an ecommerce store with a large catalogue, we aim for the same outcome: visitors who always know where they are and what to do next.
Rob
If your menus have grown messy, or you are planning a new site, we can help you structure it before a single page is designed. Our team handles website design and development, from WordPress and bespoke builds to ecommerce, alongside SEO and branding, so navigation, content and identity are planned as one.
See what we do for the full range of services, browse our website and SEO packages, or get in touch with Brainiac Media for a free consultation.
The most common two-way split is between embedded and supplemental navigation. Embedded systems (global, local and contextual) are built into the pages themselves, while supplemental systems such as sitemaps and indexes sit outside the main content. Some writers instead split links into primary and secondary, meaning the main structure and the shortcuts that add flexibility.
Global navigation in a header bar is the most familiar. It gives consistent links to the core sections of the site on every page. Almost every site has it, and other types are usually layered on top for larger sites.
Global navigation is the same everywhere and shows the top-level sections. Local navigation changes by section and lists the sibling and child pages around the visitor’s current location. Together they let someone move across the site and then deeper into one part of it.
Probably not, if the site is only a handful of pages deep. Breadcrumbs earn their place on large sites with deep hierarchies, such as shops and resource libraries. If you add them, base them on the site’s structure, not the visitor’s browsing history.
There is no fixed number, but fewer, clearer labels work best. Group related pages under a sensible parent, keep wording plain, and test with real visitors. If people hesitate over which item to click, the menu is trying to do too much.
Book a Demo
Forgotten Password
Get your free SEO guide
Thank you, please check your email
Sign into Brainiac Media
Please sign-in using your email address and password.
Forget your Password?
no worries, click here to reset your password.