Publish a short, honest hierarchy with useful public ancestors and an identifiable current page. Keep that path consistent across direct arrivals, templates and mobile layouts instead of deriving it from visit history.
A breadcrumb should explain where this page belongs and offer useful routes to its parents. It should work for a person arriving directly from search, without knowing what they visited previously. Choose the hierarchy first, then make its labels, destinations and current-page state agree.
This guide uses a fictional community journal with guides about growing food and organising local events. The examples are editorial design exercises. They do not report a live accessibility test or promise that search engines will display a particular trail. Machine-readable breadcrumb data is a related but separate task.
Separate the site’s hierarchy from the visitor’s history
A visitor might open an event-planning guide from a newsletter, then read a gardening article. That journey does not make the event guide the gardening article’s parent. The browser’s Back action follows navigation history; a breadcrumb offers a route through the website’s chosen information structure.
For the journal, “Home → Guides → Growing food → Seed storage” can be an honest path if each parent has a useful destination. It should remain meaningful when the seed-storage article is the reader’s first page. Do not prepend whatever page happened to refer the visitor.
The APG breadcrumb pattern describes a hierarchical sequence of parent-page links within labelled navigation. Its current-page treatment depends on whether the final item is a link. That pattern supplies an interaction foundation, not the editorial decisions about which sections truly exist.
Choose real parents before generating a trail
List the pages a reader can actually visit to move outward from the article. Open those destinations and inspect what they offer. A parent should help someone understand the section or discover relevant material, rather than expose an empty archive created solely to make the trail longer.
Do not mechanically turn every URL segment into a navigation label. A date in a permalink might identify publication timing without being a useful public parent. Equally, a meaningful guide collection can be a parent even when its label is absent from the article’s URL.
| Fictional page | Chosen parent path | Reason to keep it |
|---|---|---|
| Seed storage | Guides → Growing food. | The section collects relevant practical growing guides. |
| Organise a street meal | Guides → Local events. | The collection helps plan related community activities. |
| Journal contact details | Home. | No invented intermediate collection is needed. |
These paths are intentionally short. More items do not imply more complete navigation. A page only one level below the homepage may need little or no breadcrumb assistance if its location is already clear; assess its actual reader journey.
Handle articles belonging to several topics
The street-meal guide might concern both food and local events. Choose a defensible primary parent for the visible trail, then use relevant internal links or topic navigation to expose the other relationship. The breadcrumb does not have to carry every classification the editorial system stores.
Write the choice down so a template update does not substitute an arbitrary first category. If multiple legitimate paths are deliberately supported, define where each appears and verify it. Avoid unexplained changes caused by category order, imported metadata or the previous page.
A later reorganisation needs the same care. Before moving seed storage into a broader “Food” collection, ensure that collection is useful and that its destination resolves publicly. Review related links and section navigation along with the breadcrumb. The internal-link workflow covers those broader discovery routes.
Identify the current page without making it another parent
Use a final label that identifies the article the reader is viewing. It can be shorter than a very long headline if it remains unambiguous. Do not use a vague “You are here” as the only article label, or leave the final item pointing at an unrelated category.
MDN’s aria-current reference distinguishes the current item from other items in a related set. For a linked current breadcrumb, the page value communicates that relationship; it is not tab-selection state. Keep only the actual current item marked within that trail.
A plain-text final item can also represent the current page. APG makes aria-current optional for a non-link current item. Choose a consistent treatment and inspect the actual output instead of adding attributes everywhere because they sound descriptive.
Make the breadcrumb recognisable among page regions
A page may contain a primary menu, topic navigation and a breadcrumb. WAI’s page-region guidance explains using meaningful labels to distinguish multiple navigation regions. A recognisable breadcrumb label helps readers locate this particular route without confusing it with the main menu.
Keep the individual link labels useful too. The region name cannot repair “Click here” repeated across several ancestors. For the journal, “Guides” and “Growing food” make the destinations understandable; raw slugs and internal category codes do not.
Decorative separators should visually separate items without becoming a confusing series of spoken controls. They are not extra links. Inspect the resulting reading order and accessible names rather than assuming the visible arrow character establishes the right semantics.
Keep long trails usable on small screens
Review a long real label on a narrow page with enlarged text. Allow a readable arrangement rather than shrinking all text until the trail fits one line. If items wrap, the sequence should remain obvious and no destination should disappear underneath another element.
A collapsed treatment needs a clearly operable way to reveal hidden parents. Do not replace several ancestors with an unexplained ellipsis that looks decorative but unexpectedly opens a menu. For a short journal trail, ordinary wrapping may be simpler than adding another disclosure interaction.
Check both the first parent and the current item. A screenshot showing only a neat middle section can conceal a clipped homepage link or an unreadable final label. Maintain appropriate spacing and visible keyboard focus after the layout changes.
Inspect the public template rather than only the settings
Identify which theme or maintained navigation integration generates the trail. Compare the configuration with a saved public article and a section page. A successful category assignment in the editor is not evidence that the correct parent appeared in the rendered breadcrumb.
The APG example illustrates one implementation and explicitly requires adaptation and testing. Use it to understand the intended relationships, then review the actual component. Copying example markup does not supply useful parents or establish compatibility with every browser and assistive technology.
Keep human navigation and structured data coherent while checking them separately. Our structured-data guide concerns the machine-readable statements. A valid data object does not prove that visitors can reach or understand the visible breadcrumb.
Use a direct-entry acceptance route
- Open a deep article directly, without previously visiting its parents.
- Read the trail and confirm each ancestor describes a real, useful destination.
- Activate every parent using a keyboard and verify the resulting page.
- Check that exactly the intended current item is identified in the breadcrumb.
- Review long titles, multiple-category articles and a short one-level page.
- Repeat at a narrow width with enlarged text and relevant assistive technology.
- Recheck affected templates after renaming or moving a section.
Record failures as specific relationships: wrong parent, missing destination, confusing current state or clipped label. Preserve the separate skip-navigation route too; a breadcrumb should not become an obstacle to reaching the article. Accept the trail when a first-time visitor can locate the page within an honest hierarchy and move outward without guessing.
Sources and verification
Editorial review 2026-10-15. Source check dates are recorded separately. Notes describe what each source supports and its limits.
View sources
- W3C APG: Breadcrumb patternChecked Hierarchical parent links in labelled navigation and current-page treatment for a linked final item.
Limits: The pattern does not choose an editorial hierarchy or establish conformance for a complete implementation. - W3C APG: Breadcrumb exampleChecked An illustrative semantic breadcrumb implementation and its adaptation and testing boundary.
Limits: Example code is not a production guarantee and needs review in the actual template and supported technology. - MDN: aria-currentChecked Current-item semantics, the page value and one current item within a related set.
Limits: The attribute does not select a tab, invent a parent path or repair inaccurate destinations. - W3C WAI: Page regionsChecked Identifying navigation regions with meaningful labels, particularly when several appear on a page.
Limits: A landmark label does not make unclear link text or an incoherent site hierarchy useful.