Breadcrumbs
The Home > Section > Page trail at the top of a page, showing where you sit in the hierarchy and how to climb back up.
See it
What it is
Breadcrumbs are a horizontal trail of parent links ending in the page you are on: Home > Electronics > Headphones > Sony WH-1000XM5. The name is straight out of Hansel and Gretel, and the job is the same: show where you are in the hierarchy and give you a one-click way back up. The last item is the current page and is not a link.
Reach for them when content is genuinely nested three or more levels deep and people can land mid-tree from search: docs, category pages, file browsers, admin resources. On e-commerce and docs they also earn their keep in search results, since marking them up with schema.org BreadcrumbList is what turns the ugly URL under a Google result into a readable path.
Biggest misconception: breadcrumbs are not history. They show structure, not the route you took, so they never replace the back button and they never list the pages you visited. Two more traps: a flat site with two levels does not need them at all, and long trails must truncate gracefully on mobile (collapse the middle into an ellipsis menu, keep the first and last). Mark it up as a nav with aria-label='Breadcrumb' wrapping an ordered list, and put aria-current='page' on the last item.
Ask AI for it
Add a breadcrumb trail above the page title: a nav element with aria-label='Breadcrumb' containing an ordered list of links separated by a small chevron icon. All items except the last are links in muted text that darken on hover; the last item is the current page, not a link, styled in full-contrast text with aria-current='page'. On narrow screens collapse the middle items into a '...' button that reveals them in a popover, always keeping the first and last visible. Add schema.org BreadcrumbList JSON-LD matching the trail.