# Breadcrumb

Breadcrumbs are navigation links that display the hierarchy of a page on your website. They enhance the user experience by allowing visitors to understand their location and navigate back to previous pages easily.

**You can modify the breadcrumbs globally for your entire site or individually for specific pages.**

#### **Global Option** <a href="#global-option" id="global-option"></a>

{% hint style="success" %}
**Global Option (Apply to Entire Site)**

* Go to **Appearance** → **Customize** → **Site Breadcrumb**.
* Customize the breadcrumbs:
  * Change the **breadcrumb image, style, or settings** globally.
* Click **Publish** to save changes.
  {% endhint %}

#### **Breadcrumb Customization in WordPress** <a href="#breadcrumb-customization-in-wordpress" id="breadcrumb-customization-in-wordpress"></a>

To customize breadcrumbs on your site, follow these steps:

**Step 1: General Options**

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

* Go to **Appearance** → **Customize** → **Site Breadcrumb** → **General Options**.
* Configure the following settings:
  * **Enable Breadcrumb** → **YES** (to display breadcrumbs).
  * **Breadcrumb Source** → **Default**.
  * **Enable Dark Breadcrumb** → **YES** (to use a dark style).
  * **Style** → **Align Center**.
  * **Position** → **Behind the Header**.
  * **Change Breadcrumb Delimiter** → Adjust the separator.
  * **Hide Content** → **YES** (to hide title and breadcrumb).

**Step 2: Colors & Background**

<figure><img src="/files/8T22GoRr6WGEonrZZGWR" alt=""><figcaption></figcaption></figure>

* Navigate to **Site Breadcrumb** → **Colors & Background**.
* Customize breadcrumb appearance:
  * **Title Color, Text Color, Link Color, Link Hover Color** → Choose colors.
  * **Background Color** → Set a background color.
  * **Background Image** → Upload or remove an image.
  * **Background Repeat →** Choose how the background image repeats (e.g., Repeat All, Repeat Horizontally, Repeat Vertically).
  * **Background Position →** Set the alignment of the background image (e.g., Center Bottom, Top Left). **Background Size** → Choose **Cover, Contain, or Auto**.
  * **Background Attachment** → Set to **Inherit, Scroll, or Fixed**.
  * **Overlay Background & Gradient Color** → Select colors if needed.

**Step 3: Typography**

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

1. Go to **Site Breadcrumb** → **Typography**.
2. Adjust text settings for **Title & Breadcrumb Typography**:
   * **Font Family** → Choose or **Inherit** from theme.
   * **Font Weight, Font Style, Text Transform, Text Align, Text Decoration** → Customize as needed.
   * **Font Size, Line Height, Letter Spacing** → Set appropriate values.

**Step 4: Save Changes**

* Click **Publish** to apply all customizations.

#### **Breadcrumb – Individual Page Settings** <a href="#breadcrumb-individual-page-settings" id="breadcrumb-individual-page-settings"></a>

To customize breadcrumbs for a specific page or post, follow these steps:

1. **Navigate to Pages or Posts**
   * Go to **WordPress Dashboard** → **Pages** or **Posts**.
   * Open the page or post where you want custom breadcrumbs.
2. **Modify Breadcrumb Settings**
   * Locate the **Breadcrumb Settings** section.
   * Choose from the following options:
     * **Admin Option** → Uses the global breadcrumb settings.
     * **Individual Option** → Allows you to apply custom breadcrumb settings for a specific page or post, overriding the global breadcrumb settings. This lets you control layout, background, and visibility individually.
     * **Disable** → Hides breadcrumbs on this page/post.
3. **Save Changes**
   * Click **Update** to apply the changes.

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

{% embed url="<https://youtu.be/KGa4K6GHElo>" %}


---

# 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://buddhathemes-test.gitbook.io/chillout/header-footer/breadcrumb.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.