# Breadcrumbs

Breadcrumbs provide users with a clear path of their navigation history on your site, enhancing the user experience by showing their current location relative to the site structure. In Kalium, breadcrumbs can be customized via the **Appearance -> Customize -> General -> Breadcrumb** section. By default, breadcrumbs are disabled and require the [**Breadcrumb NavXT**](https://wordpress.org/plugins/breadcrumb-navxt/) plugin for functionality. Follow the steps below to set up and configure breadcrumbs:

### Setting Up Breadcrumbs

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FatOryMcnvhrXgUwDqIqt%2Fbreadcrumb-1.jpg?alt=media&#x26;token=e5bc45e5-2815-4676-b642-bcd4376f147f" alt=""><figcaption></figcaption></figure>

1. **Install Breadcrumb NavXT Plugin:**
   * Go to **Plugins -> Add New Plugin**.
   * Search for [**Breadcrumb NavXT**](https://wordpress.org/plugins/breadcrumb-navxt/) plugin.
   * Click **Install Now**, then **Activate**.
2. **Enable Breadcrumbs:**
   * Return to **Appearance -> Customize -> General -> Breadcrumb**.
   * Toggle the switch to enable breadcrumbs.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FirnQU77WG16pWje4DT6W%2Fbreadcrumb-6.jpg?alt=media&#x26;token=fbd23c62-316a-49c4-b226-ad9c26e1d5da" alt="" width="346"><figcaption></figcaption></figure>

### Breadcrumb Options

Once breadcrumbs are enabled, you can customize them using the following options:

#### Type

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F9RJzz31WIJtD9OBn2NVb%2Fbreadcrumb-2.jpg?alt=media&#x26;token=cc9c195a-8a4f-4ac9-96fe-eeabd8a85389" alt="" width="343"><figcaption></figcaption></figure>

* **Type 1:** Classic breadcrumb without a border.
* **Type 2:** Classic breadcrumb with borders at the top and bottom.
* **Type 3:** Modern breadcrumb with enhanced styling options.

#### Text Alignment

Choose the alignment for the breadcrumb text:

* **Left**
* **Center**
* **Right**

This alignment option is available for all breadcrumb types.

#### Display

Control where breadcrumbs are shown or hidden by toggling the options on or off. Additionally, breadcrumbs can be added directly to the header as a [header element](https://docs.kaliumtheme.com/general/header/custom-header/elements#breadcrumb).

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FGTDAgahxckFQVDrPbt1B%2Fbreadcrumb-3.jpg?alt=media&#x26;token=33baf858-22d1-4100-bc7d-9a7d1ee89075" alt="" width="340"><figcaption></figcaption></figure>

#### Responsive

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F2zPQQW0GuxDWLK5egOtu%2Fbreadcrumb-4.jpg?alt=media&#x26;token=f65c7f5b-3f4f-42c9-9a1d-1990bcce80e9" alt="" width="339"><figcaption></figcaption></figure>

Manage the visibility of breadcrumbs across different devices:

* **Desktop**
* **Tablet**
* **Mobile**

Set preferences for each device type to ensure optimal display.

### Style

Customize the appearance of breadcrumbs to match your site's design. The following styling options are available:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FQ347cgz6MuS6Oxx9jEdX%2Fbreadcrumb-5.jpg?alt=media&#x26;token=5de7664d-47cb-4260-86ec-fbdba5bf7337" alt="" width="340"><figcaption></figcaption></figure>

#### Background

Set the background color for the breadcrumb.

#### Separator

Choose the color of the separator. The separator type can be further customized in the Breadcrumb NavXT plugin settings.

#### Border

Define the border color for Type 2 and Type 3 breadcrumbs.

#### Border Radius

Adjust the border radius for Type 1 and Type 3 breadcrumbs.

#### Margin

Set the vertical margin only; side margins are not adjustable.

{% hint style="info" %}
The Breadcrumb NavXT plugin also offers extensive settings such as choosing where to show the breadcrumbs and selecting the separator type.
{% endhint %}