Breadcrumb Navigation

Breadcrumb navigation is a trail of links, usually near the top of a page, that shows the path from the home page to the current page, for example Home > Guides > Glossary. The name comes from the Hansel and Gretel fairy tale.

Why it matters

Breadcrumbs help visitors understand where they are in a site and jump back to a higher level in one click. They are especially useful in large sites such as shops and documentation. Search engines can also use them: with structured data, a breadcrumb path may be shown in place of the plain URL in search results, and the links help crawlers understand how pages are organized.

Example

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/glossary">Glossary</a></li>
    <li aria-current="page">Breadcrumb navigation</li>
  </ol>
</nav>

The nav landmark and aria-current help screen reader users, and the current page is the last item rather than a link.

Common mistakes

• Using breadcrumbs that merely repeat the browser history rather than the site structure.
• Making the last item a link to the page the user is already on.
• Showing them on tiny sites where they add clutter without value.

Related

• Hyperlink
• Structured data
• साइटमैप
• Semantic HTML

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.