# Breadcrumbs

<figure><img src="/files/nNIyqKLYhAYbpRnw7Vv6" alt=""><figcaption></figcaption></figure>

Breadcrumb is a type of secondary navigation scheme that reveals the customers’ location on the website.

**Breadcrumbs can improve how a user and Google navigate a website**, especially if your website has many products or pages.

Furthermore, breadcrumbs have been proven to **decrease bounce rates**, keeping users on a website longer.

Lastly, the best benefit of breadcrumbs is SEO-boosting. Google bots use breadcrumbs to categorize and contextualize content in search results more efficiently.

## How to add Breadcrumbs to your page <a href="#how-to-add-an-image" id="how-to-add-an-image"></a>

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

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Quick add**, select **Breadcrumbs** element.
3. Drag the image slide onto your canvas.
   {% endhint %}

<figure><img src="/files/NjHd65uBaPXBnO80Wgtf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Breadcrumbs navigation logic for product pages:**&#x20;

* Single category: If the product belongs to only one collection, the breadcrumbs follow this structure:
  * `Home` > `Collection` > `Current Item`
* Multiple categories: If the content belongs to multiple collections, the breadcrumbs take the collection that comes first in alphabetical order:
  * `Home` > `Alphabetical Collection` > `Current Item`

**The Breadcrumbs** element is available for the following pages:

* Product page
* Collection page
* Page/Blog/Article
  {% endhint %}

## How to edit Breadcrumbs <a href="#how-to-edit-slideshow" id="how-to-edit-slideshow"></a>

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

1. **Select** the relevant layer slide element in the editor.
2. All the formatting tools for the element can be found in the right-hand side **Inspector** panel.
   {% endhint %}

### General settings

* **Show on desktop:** Toggle this option to display the breadcrumbs on desktop screens.
* **Show on tablet:** Toggle this option to display the breadcrumbs on tablet devices.
* **Show on mobile:** Toggle this option to display the breadcrumbs on mobile devices.

### Design settings

**Size & Constraints Settings:** Use these controls to define the element’s dimensions and positioning behavior across devices.

{% content-ref url="/pages/SSvw9bNbiI3U8pCyvlpe" %}
[Constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md)
{% endcontent-ref %}

**Text Font, Spacing, and Styles**

* **Font**: Choose from hundreds of fonts. You can also [upload your own fonts to Foxify](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **Weight** and **Size**: Define the font weight and font size of the text.
* **Text case**: Click the icons to set the text's capitalization: **As typed** ![](https://docs.foxecom.com/foxify-app/~gitbook/image?url=https%3A%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2F12345678-1234-1234-1234-1234567890ab%2F651c25b0-2d60-43c8-addf-1df2fd575568%2F2024%2F08%2F14%2Fcf835ac2-622c-4066-a95e-39e9ff1a7f38%2Fc4f1d248-c718-427e-9db5-77369c22fb67.png\&width=300\&dpr=4\&quality=100\&sign=ac4af2c5\&sv=2), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* **Spacing:** Change the spacing between the lines and characters in the text box.
* **Text style**: Normal/*Italic*.

### Animations

{% content-ref url="/pages/7gnm1vqOxYHR0d2x5dym" %}
[Animations](/foxify-app/foxstudio/layout-and-styling/animations.md)
{% endcontent-ref %}


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/breadcrumbs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.