Breadcrumbs: Show an Article’s Place in the Library

Show a location rather than a session history

An article breadcrumb usually describes a stable location, such as Library, Measurement, Citation tracking. It should make sense whether someone arrived from the homepage, an external search result or a colleague's message. A browser back button already offers a way to retrace recent activity. If the breadcrumb instead reproduces every page visited, the same article can appear to belong in different places depending on the session. That makes the trail less useful as an explanation of the library's structure.

Choose parent labels that a newcomer can understand. An internal department code may be convenient for the publishing team but unhelpful to a reader looking for an explanation. Each parent link should lead to a real page that offers broader context or related material. A label that has no destination and exists only to make the hierarchy look deeper creates an empty layer. Begin with the topical map if the library has no agreed categories, then present only the levels that help someone navigate.

Choose a primary home for overlapping topics

Many articles touch more than one subject. A guide to author markup concerns both identity and structured data. That does not require a breadcrumb trail containing every relevant category. Select a primary home according to the article's main reader task. Other relationships can appear through contextual links, tags or related reading. A stable primary trail is easier to recognise and maintain than a breadcrumb generated from whichever tag happens to be listed first in a database record.

Imagine an illustrative article about measuring referrals from answer platforms. It could connect to platform guides, analytics tutorials and marketing strategy. Its primary task is measurement, so a Measurement parent provides a clear home. A paragraph can still link to AI referral traffic from an article in another category when relevant. Breadcrumbs express the hierarchy; contextual links express additional relationships. Keeping those functions separate lets a page participate in a rich network without making its location ambiguous or its navigation trail excessively long.

Make the visible trail accessible

The W3C breadcrumb pattern describes a labelled navigation region and a way to identify the current page. Use a meaningful navigation label so that the breadcrumb can be distinguished from the main menu and other link groups. Parent items should behave as normal links. The current article can appear as plain text, making its status visually clear. If it is a link, identify it appropriately rather than relying only on colour to convey where the reader is.

Separators are visual punctuation, not destinations. They should not create confusing extra stops for assistive technology. Keep their spacing and contrast comfortable, but do not let large decorative arrows dominate the trail. Test keyboard navigation through the parent links and inspect focus visibility. A breadcrumb that looks tidy in a screenshot can still be difficult to use if focus disappears or labels are truncated beyond recognition. The accessible AEO content guide addresses those wider interaction concerns; the breadcrumb itself should remain a small, predictable navigation aid.

Keep markup tied to the same hierarchy

Google's breadcrumb documentation explains the supported BreadcrumbList representation. The practical implementation should draw visible labels and structured data from a consistent source of truth. If editors change a category name, both outputs should update together. If a parent route moves, its structured reference must not continue pointing to the retired address. A syntactically valid object can still communicate an outdated hierarchy, so validation needs to include meaning as well as whether the data parses.

Do not add extra invisible hierarchy levels to pursue a richer search appearance. Start from the real page relationship and represent it accurately. Equally, avoid assuming that a technically valid breadcrumb guarantees a particular search result presentation. The publisher controls its own markup and navigation, while the search service determines what it displays. Keep technical release checks focused on what can be verified: valid output, correct destinations, consistent labels and no mismatch between the article's category record and the trail presented on the page.

Handle long titles and small screens carefully

A breadcrumb should not become a second oversized headline. Long article titles may wrap or dominate a narrow viewport. A concise current-page label can preserve the subject without reproducing the entire H1, provided it remains recognisable. Do not shorten the parent label so aggressively that readers cannot tell which section it names. If the layout collapses intermediate levels, retain a usable way to access them or choose a simpler hierarchy. Hiding everything except an unexplained icon removes much of the trail's value.

Test the design with realistic extremes: a long translated category, a lengthy comparison title and a page with several meaningful levels. These examples reveal problems that a short demonstration title will not. Avoid forcing the trail onto one line by shrinking text until it becomes difficult to read. Also check zoom and keyboard focus. The hierarchy should survive these conditions as information, even if its visual layout changes. Navigation exists to support orientation, so preserving the meaning is more important than maintaining a decorative row at every width.

Change categories without casually changing addresses

An article may move from a broad category to a new specialist section as the library grows. The breadcrumb can change to reflect that improved organisation even when the article URL stays the same. URL paths do not need to mirror every editorial grouping. A stable route avoids an unnecessary migration when the change is purely navigational. Use the URL structure guide to decide which parts of an address represent durable identity and which editorial relationships should remain separate metadata.

If the parent category itself disappears, provide a meaningful successor or simplify the trail. Update category listings, breadcrumbs and any related navigation in the same release. An old category page returning an error leaves the article technically available but removes its route back to broader context. When a migration changes article addresses too, follow the content migration checklist rather than treating the breadcrumb update as the whole task. Redirects, canonical references and external entry points need their own handling beyond the visible navigation change.

Test orientation with a deep arrival

Open a specialist article directly, without visiting the homepage first. Ask what subject area it belongs to and how to find neighbouring explanations. The breadcrumb should answer the location question quickly. The broader category should then fulfil its promise with relevant material. If following a parent reveals an unrelated feed or a nearly empty page, the problem lies in the information architecture as much as the breadcrumb component. A correct trail cannot make an unhelpful parent destination useful by itself.

This test also reveals whether the breadcrumb duplicates another control without adding value. A very small site with only a homepage and a handful of pages may need little hierarchy. A large learning library benefits more from visible location. Choose the component because readers need orientation, not because every template must contain the same interface elements. Maintain it as part of the site's navigation system, with clear labels and real destinations, so that it continues to help even when an article is encountered far from the route its author expected.

Sources and further reading

• W3C breadcrumb patternBreadcrumb navigation has a label and indicates the current page.
• Google breadcrumb structured dataBreadcrumb markup describes a position within a site hierarchy.