> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/mindpatterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs.md).

# Breadcrumbs

![Screenshot depicting breadcrumb hierarchy on eCommerce site.](/files/-LXQcGwP7tzUxDOIQG1F)

### Introduction

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

The term 'breadcrumbs' comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

### Working Examples

Experience the breadcrumbs pattern in action on our companion [eBay MIND patterns examples website](http://ebay.github.io/mindpatterns/navigation/breadcrumbs/).

Examine the required markup structure in our [Bones GitHub project](https://github.com/ianmcburnie/bones#user-content-breadcrumbs).

View a fully styled example on our [eBay Skin website](https://opensource.ebay.com/skin/component/breadcrumbs/).

### Terminology

* **breadcrumbs** the pattern as a whole, comprised of the following sub-parts
* **breadcrumb item**: a link
* **separator**: the graphical symbol that separates each breadcrumb

### Best Practices

Breadcrumbs are typically used as secondary navigation on sites that are organized in a hierarchical manner.

An SVG symbol is used to separate each breadcrumb link.

The last breadcrumb link, representing the current place in the hierarchy, is non-interactive.

Breadcrumbs **must** have a heading of 'You are here', or words to those effect. This heading can be visually hidden offscreen.

### Interaction Design

Breadcrumb interaction is similar to a simple list of ordered links.

#### Keyboard

TAB key moves from breadcrumb to breadcrumb.

Separator symbols **must not** be keyboard focusable.

The last breadcrumb lacks an `href` value and therefore is omitted from the tab order.

#### Screen Reader

The screen reader will recognize the breadcrumbs as a navigation landmark.

Each breadcrumb will be announced as 'link', followed by the link text.

The screen reader should ignore each separator icon.

### Developer Guide

Breadcrumbs require no JavaScript, they are simply an ordered list of links & icons inside of a navigation landmark region.

```markup
<nav aria-labelledby="breadcrumbs_heading" class="breadcrumbs" role="navigation">
    <h2 class="clipped" id="breadcrumbs_heading">You are here</h2>
    <ol>
        <li>
            <a href="http://www.ebay.com">Home</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a href="http://www.ebay.com">Men's Shoes</a>
            <svg focusable="false" height="10" width="10">
                <use xlink:href="#icon-breadcrumb"></use>
            </svg>
        </li>
        <li>
            <a aria-current="location">Boots</a>
        </li>
    </ol>
</nav>
```

The heading ('You are here') is typically hidden offscreen using the [.clipped](/mindpatterns/appendix/utils.md) class.

While, the separator icon can be generated with CSS, we find that inline SVG offers a more accessible and flexible approach.

### ARIA Reference

* **aria-current="location"**: provides AT with programmatic state on the breadcrumb that reflects the current site location.
* **role=navigation**: creates a navigational landmark for AT.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.