# Search

## Colors

Depending on the setting of the search (Overlay search, expandable search and standard search), the color fields have a different function. Learn more about the respective function of the color under the help labels.

{% hint style="info" %}
The basic appearance settings of the search can be found in the tab "[General](/en/styling/general.md)".
{% endhint %}

![](/files/M7Q3fMOSY4tgxa5FZDUI)

## Basic configuration

The search field **width (1, 2)** is specified as a percentage and refers to the **total width of the header**. If the selected percentage value exceeds the actual available space within the respective header row, the search field will not expand beyond that limit. This means that a width of 50% may already fully occupy the space between the logo and the main navigation in practice.

The **category filter (3)** enables an additional theme feature that allows the search to be filtered by a selected category while typing the search term.

The dividers in the search suggestions can be enabled using the Search suggest separator (4) option.

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

Examples:<br>

<figure><img src="/files/oVSxnTNy9DdIjmiqMcLB" alt=""><figcaption><p>Search with 50% width</p></figcaption></figure>

<figure><img src="/files/eTrieLyAFPsq8yMMwupU" alt=""><figcaption><p>Category filter</p></figcaption></figure>

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


---

# 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://themedocs.zenit.design/en/styling/header/search.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.