> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/brandy-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yaycommerce.com/brandy-theme/features/general-settings/breadcrumb-settings.md).

# Breadcrumb Settings

The Breadcrumb Settings interface in the Brandy theme provides two primary tabs: **General** and **Design**. Each tab allows you to configure different aspects of the breadcrumb navigation for better user experience and visual appeal.

#### 1. General Settings

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

This section focuses on the structural appearance of breadcrumbs, allowing you to choose the type of separator used between breadcrumb items.

* **Type Separator**: This option allows you to select a separator style for the breadcrumbs. Several predefined options are displayed, including various arrow or divider styles that appear between breadcrumb elements.

#### 2. Design Settings

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

This section provides design customization options to adjust the visual appearance of the breadcrumbs. The available options include settings for typography, colors, container, and item spacing.

* **Typography**: This allows you to adjust the typography settings of the breadcrumbs, such as font family, size, weight, and other text attributes.
* **Text Color**:
  * Allows you to change the colors of the breadcrumb text, providing options to suit your website's design.
  * **Options:** Normal, Hover and Active colors.
* **Container**:
  * **Background Color**: Choose the background color for the breadcrumb container.
  * **Border Radius**: Modify the radius of the container's borders, enabling rounded or square edges.
* **Item**:
  * **Background Color**: Set a background color for individual breadcrumb items.
  * **Border Radius**: Allows you to round the edges of the individual breadcrumb items.
  * **Padding**: Adjust the padding around breadcrumb items (top, right, bottom, and left).
* **Item Spacing**:
  * Modify the spacing between individual breadcrumb items. The slider allows you to adjust the pixel values to increase or decrease the gap between items.

**Publish:** Make sure to click "Publish" after making changes to save and apply the updated settings.
