iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Contextual navigation is any set of links that adapts to where a user is right now, such as the current page, section, or task, and offers the destinations most likely to be useful from that point. The term covers several different interface patterns. The most formal one, which Nielsen Norman Group (NN/G) defines, is local navigation: a menu of sibling pages in the current category, plus children or nearby descendants where they apply. Inline links to related material and links to follow-up actions are other context-aware patterns, but they are separate components with different jobs.
In short, use contextual navigation when a user needs to explore the area they are already in, understand where they sit in a hierarchy, or act on something related to the content in front of them. Skip a persistent local menu when the site is small or the menu would be bigger than the task it supports.
How contextual navigation differs from global navigation and breadcrumbs
Most sites already use two navigation layers. Global navigation stays the same on every page and points to the site’s major areas. Contextual navigation changes with the page. The two are easy to confuse because both appear as lists of links, so it helps to separate them by scope and by the question each one answers.
Recommended Free Tools
| Pattern | Scope | Question it answers for the user | Typical placement | Example |
|---|---|---|---|---|
| Global navigation | Whole site, stable on every page | “What are the main areas of this site?” | Header or top bar | Products, Support, Company |
| Local navigation | Current category, its siblings and relevant children | “What else is in this section, and what is below it?” | Side or top of the content area, below global navigation | A section menu listing sibling pages |
| Breadcrumb or parent link | The page’s position in the hierarchy | “Where am I, and how do I go back up?” | Above the page heading | Home > Support > Billing > Invoices |
| Inline related link | One concept or term in the body text | “Where can I read more about this specific idea?” | Inside the sentence or paragraph | A term linked to its definition page |
| Follow-up action | One task tied to the current content | “What can I do about this now?” | Next to the information it relates to | A cancellation option on the course page |
Only the first two rows are, strictly speaking, navigation menus. Breadcrumbs and inline links are context-aware, but they are not local navigation, and treating them as interchangeable leads to weak designs. A breadcrumb tells people where they are; it does not give them a set of sibling destinations to explore.
Examples of contextual navigation in practice
Local section navigation
NN/G illustrates local navigation with a site hierarchy in which an “HR and People” page sits beside “Supply Chain Management,” “CRM and Customer Experience,” and “Network Management.” When a user is in one of these branches, the local menu shows the current page alongside its siblings. The global navigation stays the same across the site, while the local menu changes to reflect the branch the user is in.
Inline contextual link
When body text explains a concept, the most useful link is usually the concept name or a short descriptive phrase. W3C’s example uses a sentence about the Medieval period in which that phrase is the link. The link text itself tells the reader what they will reach. If a link needs more explanation, that explanation should sit in the same sentence, paragraph, list item, or table cell, and it should come before the link where possible.
Breadcrumb or parent-location link
A breadcrumb shows the page’s position in the hierarchy, and a link to a parent or department page helps someone who has landed deep in a site, perhaps from a search result, find their bearings. W3C names both breadcrumbs and links to higher-level pages as ways of making location information available to users.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Follow-up action in the original context
Jakob Nielsen’s December 2004 article “Situate Follow-Ups in Context” argues that next steps should be available from the information or transaction that gave rise to them. In one example from that article, users who wanted to cancel a course looked for the cancellation option on the course page where they had registered. In another, people shopping for a fountain pen looked for compatible refill cartridges on the pen’s product page, not in a separate supplies area. These are examples reported in the article, not usability tests run for this guide.
Rank #3
When contextual navigation improves wayfinding
Contextual navigation serves two purposes that are worth keeping apart. The first is orientation: helping the user answer “where am I?” The second is wayfinding: helping them answer “where can I go from here?” NN/G’s guidance on local navigation focuses on the second, especially for deeper parts of a site, where a user who arrives through search may be several levels away from the home page.
The benefit depends on how the site is built. Local navigation is most useful when:
- The site has several levels, so the global menu cannot show every useful destination.
- Pages in the same category are genuinely related, so a user who wants one is likely to want its neighbors.
- People arrive from search or links and do not start on the home page.
When it is not worth the space
Contextual navigation has real costs. It takes up screen space, and on small sites a prominent local menu can add clutter without giving users anything they could not find in one or two clicks. Deep categories have the opposite problem: a local menu with dozens of entries becomes a second navigation system that users have to scan. In those cases, a compact set of closely related links, or inline links placed inside the content, is often the lighter choice.
A quick way to decide:
- List the three to five destinations a user is most likely to want from the current page.
- If they all belong to one category and fit in a short list, a local menu is justified.
- If the list runs to dozens of items or the site has only a few pages, use inline links or a follow-up action instead.
- If the user’s next step is a task such as cancelling, changing or buying, place that action on the page that produced the need, not in a general menu.
Writing and designing the links
- Make the link text describe the destination. Link wording such as “Read the refund policy” tells people what they will get. Avoid relying on distant text to explain what a link does.
- Use different link text for different destinations. If two links go to different places or serve different purposes, they should not share the same wording.
- Keep navigation and commands visually and verbally distinct. NN/G’s guidance on command links describes websites as mainly moving users through information, while applications often change data. It recommends buttons for primary commands. A link such as “Read the related policy” moves the user; “Cancel my registration” changes something and should be designed and labelled as a command.
- Do not let a breadcrumb replace clear link names. A breadcrumb helps with location, but each link on the page still needs a purpose that is clear on its own.
Accessibility requirements
Two WCAG 2.1 criteria apply most directly to contextual navigation.
Best Value
Success Criterion 2.4.4, Link Purpose (In Context), is Level A. It requires that a link’s purpose can be determined from the link text alone, or from the link text together with programmatically determined context, unless the purpose would be ambiguous to users in general. W3C’s guidance says that context can sit in the same sentence, paragraph, list item, or table cell, and that it works best when it comes before the link. The W3C explains the intent this way: “The intent of this Success Criterion is to help users understand the purpose of each link so they can decide whether they want to follow it.” (W3C WAI, Understanding Success Criterion 2.4.4: Link Purpose (In Context))
Success Criterion 2.4.8, Location, is Level AAA. It requires that information about the user’s location within a set of pages be available. W3C gives breadcrumbs and links to higher-level pages as examples (W3C WAI, Understanding Success Criterion 2.4.8: Location). Because it is AAA, it is a stronger target than most projects must meet by default. It is still good practice, and it is worth treating as a design goal rather than a box to tick at AA.
What the evidence does and does not show
The guidance above rests on usability principles and on examples that NN/G and W3C describe. No measured study quantifying the usability or conversion gain from contextual navigation is cited here, so this article does not claim a percentage improvement. The follow-up examples come from a 2004 article and describe observed user behaviour in those cases; they are not evidence that the same pattern will work on every site. Test local navigation and inline links on your own content, especially if your site is unusually deep or unusually small.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
