# Category badges

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FJGU5S3NiypCudNjT82il%2Fdocs-en-content-category-badges-custom-fields.png?alt=media\&token=a7f148b1-0ac8-4462-b3a4-70cb88bae457)

In addition to the **Badge - text (1)**, you can also configure a **background color (2)** and **text color (3)**. Leave these fields blank if you want to use the default badge colors. These result from the reverse assignment of the respective foreground and background color of the used navigation. 

| Navigation          | Badge - text color            | Badge - background color         |
| ------------------- | ----------------------------- | -------------------------------- |
| Main navigation     | `$zen-main-navigation-bg`     | `$zen-main-navigation-color`     |
| Flyout navigation   | `$zen-flyout-navigation-bg`   | `$zen-flyout-navigation-color`   |
| Dropdown navigation | `$zen-dropdown-navigation-bg` | `$zen-dropdown-navigation-color` |

{% hint style="info" %}
To  ensure the best possible contrast, the text and background colors are reversed. The text color of the badge becomes the background color, and the background color of the badge becomes the text color.
{% endhint %}

Example:

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FCinq1ZDk2zNBWqdfI3Yy%2Fdocs-de-custom-fields-category-labels-storefront.png?alt=media\&token=9c611aa6-8576-4ab6-8597-f4f477511852)