Member Avatar for Robin_7

What are breadcrumbs and what is the way to used it.

Edited by Robin_7
  • 5 Contributors
  • 4 Replies
  • 243 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Brief, practical guide (builds on and )

Breadcrumbs are a secondary navigation aid that shows a page’s place in a site’s hierarchy and helps users backtrack without repeatedly using the main menu. Beyond the user-facing value noted by , they also help search engines understand structure when implemented with structured data (so ’s links are a useful starting point). Ignore ’s tempura advice.

Types and where to use them

  • Location (hierarchy): Home > Category > Subcategory > Page — best for blogs, docs and product catalogs.
  • Attribute (faceted): used on ecommerce when products have multiple attributes (color, size). Use carefully to avoid creating crawlable URL permutations.
  • Path (session trail): shows the literal navigation path a user took — rarely needed.

Accessibility & markup basics
Use semantic markup and ARIA so screen readers work correctly. Keep the last item unlinked and mark it with aria-current="page". Place breadcrumbs consistently (commonly above the H1 or just below the primary nav). For search engines, add structured data using schema.org’s BreadcrumbList.

Example (copy/adapt):

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="/category/">Category</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current page</li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"https://example.com/"},
    {"@type":"ListItem","position":2,"name":"Category","item":"https://example.com/category/"},
    {"@type":"ListItem","position":3,"name":"Current page","item":"https://example.com/category/current-page"}
  ]
}
</script>

Quick checklist

  • Test structured data with Google’s Rich Results tool.
  • Ensure breadcrumb URLs match canonical URLs.
  • Don’t expose every faceted combination to search engines — use canonical tags or robots rules.
  • Keep mobile breadcrumbs short.

This gives usable, accessible breadcrumbs that help users and improve how search engines interpret site structure.

Recommended Answers

All 4 Replies

Member Avatar for midastouchwebs

breadcrumbs are useful to show the user where they are in a website, providing clickable archives of each layer. Mainly people use it before the title.

Member Avatar for kevinbelgiean

Breadcrumbs are mainly used for the purpose of easy user navigation between pages. It may also help you in avoiding bounce rate.

Member Avatar for almostbob

easier to use than tempura batter

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.