Breadcrumbs and wayfinding

Why wayfinding matters

Visitors do not always arrive at the home page. Search results, shared links and bookmarks drop them deep inside a site. The first questions they ask, perhaps without noticing, are "Where am I?" and "What else is here?" Wayfinding answers both. Without it, a visitor who lands on the right page may still leave, because they cannot tell whether the page belongs to the organisation they wanted, or how to find the next step.

The signals that tell people where they are

Page title and heading. The browser title and the main heading should name the page specifically. "Apply for a permit" tells people where they are; "Online services" does not.

Current menu item. The main menu should show which section the page belongs to. In code, aria-current="page" on the current link tells assistive technology the same thing. The visual marker should not rely on colour alone.

Local navigation. A menu of the pages within the current section, shown beside or below the content. On large sites it can do more work than the main menu, because it shows the page's siblings.

Breadcrumbs. A trail from the home page down to the current page.

Consistent layout. Keeping repeated navigation in one order on every page is a WCAG 2.2 requirement (3.2.3). When the layout stays put, people learn where to look.

Breadcrumbs in detail

A breadcrumb trail looks like this: Home / Planning and building / Permits / Apply for a permit. Each item except the last is a link to that level.

When breadcrumbs help

Breadcrumbs earn their space on sites with at least three levels of hierarchy, and on pages people reach directly from search. On very flat sites, where every page sits one level below home, they add little.

Location, not history

Breadcrumbs should show where a page sits in the structure, not the path the visitor happened to take. History-based trails change from visit to visit and duplicate the browser's back button.

Which path to show

Google's breadcrumb guidance recommends that the trail reflect the path a user would likely take to the page rather than simply mirror the URL structure. That frees you to show a meaningful trail even when addresses are flat. If a page lives in two places, choose one primary trail.

Writing breadcrumb labels

Use the same labels as the menu and the page headings, or shorter versions of them. A breadcrumb that says "Permits" when the menu says "Planning approvals" makes people wonder whether they are in the same section.

Accessible markup

• Wrap the trail in a <nav> element with an accessible name such as "Breadcrumb".
• Use an ordered list, because the order matters.
• Mark the current page with aria-current="page". It can be shown as plain text rather than a link.
• Draw separators with CSS rather than characters in the text, so screen readers do not announce "slash" between items.

Structured data

Google supports BreadcrumbList structured data. According to its documentation, a trail needs at least two ListItem entries, each with a position and a name, and an item URL for every entry except the last, where the URL of the page itself is used if item is omitted. Google says you do not need to include the top-level domain or the current page in the markup. Structured data describes the trail; it does not replace the visible one.

Local navigation and section menus

Within a section, a local menu lists the section's pages so readers can move sideways. Keep it to the current section; a local menu that grows into a second copy of the whole site defeats its purpose. If the section has subsections, show the current branch expanded and the others collapsed.

On small screens, local menus can move below the content or into a disclosure button labelled with the section name, such as "In this section: Permits". The W3C ARIA Authoring Practices disclosure navigation example shows the pattern.

Wayfinding across a long page

Long guides need wayfinding inside the page too. A short list of headings at the top, or a sticky "On this page" panel on wide screens, lets readers jump to the part they need. The Australian Government Style Manual stresses descriptive headings and a shallow hierarchy, both of which make those lists useful. Each heading should make sense on its own, because it may be read in a list without the text around it.

Wayfinding and multiple ways

WCAG 2.2 success criterion 2.4.5 asks that more than one way is available to locate a page. Breadcrumbs, local menus and in-page contents lists all contribute, alongside the main menu and search. They also help people recover from a wrong turn without starting again from the home page.

Breadcrumb mistakes to avoid

• A trail that repeats the menu. If every breadcrumb reads "Home / Services / Services", the levels are mislabelled or the hierarchy has a redundant step.
• Links on the current page. Linking the last item to the page you are already on adds a useless tab stop for keyboard users.
• Trails on the home page. The home page has no parent, so a trail there only takes up space.
• Different labels in different places. A section called "Courses" in the menu, "Study" in the breadcrumb and "Programs" in the page heading leaves people unsure whether they are in one section or three.
• Breadcrumbs as the only route up. Breadcrumbs supplement local navigation and the main menu; they do not replace them.
• Trails that wrap badly on phones. Long trails can be shortened on small screens by showing only the parent level, with the full trail available to assistive technology.

Wayfinding for visitors who arrive from search

A visitor who lands on a page from search has skipped your home page, your menu and your introductions. The page itself has to tell them three things: who publishes it, what it covers and where it fits. A consistent header with your organisation's name, a specific page heading, a short opening paragraph that answers the question directly, and a breadcrumb trail together cover all three. If a page only makes sense to someone who has read the page before it, add a sentence of context and a link back to the starting point.

A quick wayfinding check

Pick five pages deep inside your site and open each one directly, as a visitor from search would. For each, ask:

1. Can I tell which organisation runs this site?
2. Can I tell which section I am in?
3. Can I reach the section's other pages in one click?
4. Can I reach the level above in one click?
5. Does the menu show where I am?

Any "no" is a wayfinding gap. Each gap can be fixed in the page template, which means one fix improves every page of that type. For help planning breadcrumbs, local menus and templates together, see navigation design and content structures for UX.

Sources checked 4 November 2026 for breadcrumbs and wayfinding

1. Breadcrumb markup, Google
2. Disclosure menu, W3C
3. Hierarchical structure, Style Manual
4. Consistent Navigation (3.2.3), W3C
5. Multiple Ways (2.4.5), W3C