What are "breadcrumbs" (a breadcrumb trail)?
"Breadcrumbs" are a navigation element on a site that shows the user's path from the home page to the current one. They help understand exactly where the user is within the site's structure and let them quickly return to previous levels.
Display example:
javascript
Home -> Catalog -> Electronics -> Smartphones -> iPhone 15The user can see they are in the "Smartphones" section within "Electronics", and can click any of the previous items.
HTML example:
html
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/catalog">Catalog</a></li>
<li><a href="/catalog/electronics">Electronics</a></li>
<li>Smartphones</li>
</ol>
</nav>Why breadcrumbs are needed:
- Navigation convenience. The user orients themselves in the site's structure faster.
- Fewer clicks. You can return to any previous level with a single click.
- SEO benefit. Search engines (Google, Bing) use them to display page structure in search results.
- UX landmark. Shows the user the context: where they are and how they got there.
Conclusion:
Breadcrumbs are a chain of navigation links that reflect the page hierarchy from the home page to the current one. They make a site clearer, more convenient, and more useful for SEO.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.