> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/breadcrumb.md).

# Breadcrumb

**Breadcrumb** is the trail of links that shows shoppers where they are in your store, for example Home > Collection > Product. It gives them a one click way back to the level above instead of relying on the browser back button, which matters most for visitors who arrive on a deep page from an ad or a search result. It also makes a large catalog feel navigable rather than flat.

This is a global section, so once configured the trail follows the same style everywhere it is displayed.

<figure><img src="/files/6YIRhZ5kcQZlqPcGm7YU" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click **Breadcrumb**.
3. Set the section width, the content alignment, and the padding.
   {% endhint %}

*Result:* the breadcrumb trail in the preview updates to the width and alignment you chose.

### Section settings <a href="#section-settings" id="section-settings"></a>

<figure><img src="/files/0o9IQ2n1gwMZvagk1IkS" alt=""><figcaption></figcaption></figure>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**     | <p>How far the row holding the trail stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the links run close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the links line up with the rest of your page, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the row fills the whole screen and rescales itself to fit it.</li></ul> |
| **Content alignment** | <p>Where the trail sits inside that row.</p><ul><li><strong>Left</strong>: where shoppers expect it, and where it reads first.</li><li><strong>Center</strong>: suits pages with a centred title underneath.</li><li><strong>Right</strong>: keeps the trail clear of left aligned content below.</li></ul>                                                                                                                                       |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                            |
| ---------- | -------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the trail. Increase it when the links sit too close to the header.    |
| **Bottom** | Adds space under the trail, separating it from the page title or content that follows. |

### Where it appears <a href="#where-it-appears" id="where-it-appears"></a>

Breadcrumb is available by default on **Product**, **Collection**, **Collection list**, and **Page** templates. Click the **view** icon next to the section name to show or hide it. The section is built into these templates and cannot be removed.

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see the path back to the parent collection or page, and can jump up a level in one click.
* The trail is generated from where the shopper is, so there is no content to write. You only control how it sits on the page.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Page](/velare/customize-your-pages/page.md): the section that renders the page title, often used together with the breadcrumb
* [Header](/velare/set-up-your-store/header-group/header.md): the main navigation above the breadcrumb
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/breadcrumb.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.
